<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

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

Также к курсу идёт Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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-код ссылки для форумов (например, можете поставить её в подписи):

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

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

Бывает

Ответить

hod1234hod@yahoo.com hod1234hod@yahoo.com 11.08.2017 01:52:35

Здравствуйте. Возник вопрос насчет адреса картинки. Такой код у меня отлично сработал: background: url(http://test.ru/image.jpeg); А вот такой нет: background: url(image.jpeg); Почему не сработал второй? Ведь картинка лежит в корне, а не в папке.

Ответить

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