<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

Всё создание сайта будет происходить на Ваших глазах, поэтому Вы легко сможете повторить весь процесс создания сложного функционального сайта уже при разработке своего портала.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Верстаем круглые кнопки на CSS3.

Верстаем круглые кнопки на CSS3.

Здравствуйте, дорогие читатели. Мы уже изучили многие свойства, которые появились в CSS3, но просто их знать мало. Нужно обязательно практиковаться! И вот сегодня я покажу, как создать круглые кнопки на CSS3.

Откроем файл index.html и создадим простенькую структуру

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>CSS3 Buttons</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="button"></div>
  <div class="button"></div>
  <div class="button"></div>
</body>
</html>

Ничего особенного. Просто 3 блока с классом .button Перейдём теперь к стилям.

body {
  background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
}

.button {
  display: inline-block;
  margin: 40px;
  width: 100px;
  height: 100px;
  background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
  cursor: pointer;
  border-radius: 50%;

  box-shadow: 0 3px 20px rgba(0,0,0,.25),
  inset 0 2px 0 rgba(255,255,255,.6),
  0 2px 0 rgba(0,0,0,.1),
  inset 0 0 20px rgba(0,0,0,.1);
}

Фон для документа и наших кнопок я взял с сайта subtlepatterns.com.

Мы делаем наши div строчно-блочными, чтобы они выстроились по горизонтали, задаём им высоту, ширину, отступ от краёв браузера, скругление 50%, чтобы получить круг, и при наведении курсор делаем pointer. Здесь нет ничего сложного, но тень я не зря отделил в стилях, т.к. это именно та часть, которая может вызвать затруднения, хотя, там тоже всё просто, и это вы сейчас увидите.

Задав первую тень, мы уже увидим контур нашего круга:

box-shadow: 0 3px 20px rgba(0,0,0,.25);

Контур круга

Затем мы задаём внутреннюю тень, чтобы у нас сверху появилась такая оконтовочка, и кнопка стала более объёмной.

box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6);

Контур круга с оконтовочкой

Следующая внешняя тень нужна для того, чтобы немного затемнить место под кнопкой снизу, а следующая внутренняя затемняет пространство внутри кнопки для пущего эффекта)

box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);

Как видите, по-началу кажется сложно, много свойств, но, если разобраться, то всё оказывается намного проще. Итак, вот наш конечный результат:

Готовая кнопка

Теперь реализуем поведение при наведении на блок

.button:hover {
  box-shadow: inset 0 0 20px rgba(0,0,0,.2),
  0 2px 0 rgba(255,255,255,.4),
  inset 0 2px 0 rgba(0,0,0,.1);
}

Мы уже разобрались с тенями в блоке, а теперь попробуйте разобраться сами с тем, что происходит при наведении. Точно так же оставьте только одну тень и посмотрите, что происходит, а затем добавьте вторую и посмотрите, что изменилось, и так далее.

Кнопка при наведении

Наконец, давайте добавим иконки нашим кнопкам, чтобы было не очень скучно. Для этого изменим немного html

<div class="button btn-photo"></div>
<div class="button btn-settings"></div>
<div class="button btn-tag"></div>

Мы просто добавили дополнительный класс для каждой кнопки и теперь давайте зададим стили для них

.btn-photo {
  background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-camera-photo_0.png) center center no-repeat;
}

.btn-settings {
  background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/settings.png) center center no-repeat;
}

.btn-tag {
  background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/tag.png) center center no-repeat;
}

Готовые кнопки

Здесь мы просто добавляем второй фон для каждой кнопки, взяв иконки с сайта defaulticon.com.

Вот и всё. Сегодня мы рассмотрели, как создать круглые кнопки на CSS3.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

gordon gordon 23.05.2014 16:15:12

Симпатично и работает во всех основных браузерах

Ответить

alexandrdante alexandrdante 23.05.2014 16:46:30

в современных версиях - во всех. а так...старые версии ie не поддерживают border-radius

Ответить

sergkosm sergkosm 08.10.2014 00:55:56

opera квадрат показала, второй раз открыл - норм)

Ответить

tikkiwiki tikkiwiki 08.10.2014 09:46:23

Бывает

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.