Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Анимированные кнопки в стиле мыльных пузырей на CSS3
 |
 |
Исходники |
Пример |
В этом уроке мы создадим полезный набор анимированных кнопок, используя возможности CSS3 для задания нескольких фонов и анимации. С этим набором кнопок Вы легко сможете превратить любую ссылку на странице в анимированную кнопку, просто придав ей определенный класс. JavaScript не используется. Доступно четыре цветовых темы и три размера при назначении дополнительных классов.
HTML
Для того, чтобы превратить обычную ссылку в красивую анимированную кнопку, нужно всего лишь назначить ей класс .button и один из доступных цветов. Смотрите примеры ниже:
<a href="#" class="button blue big">Download</a> <a href="#" class="button blue medium">Submit</a> <a href="#" class="button small blue rounded">Submit</a>
Есть 4 цвета - голубой, зеленый, оранжевый и серый. Остальные классы, назначенные ссылкам из примера выше - необязательны. Вы можете выбрать размер между small, medium и big и еще один класс - rounded, который позволяет сделать кнопку скругленной.
Имена классов говорящие и самоочевидные, поэтому их легко запомнить. Но помните о том, что возможны "пересечения" с другими классами с такими же именами, которые Вы создали сами. Поэтому будьте внимательны.
Теперь давайте посмотрим на те CSS-классы, которые делают все это возможным.
CSS
Весь CSS-код находится в файле buttons.css. Это удобно, так как позволяет вам просто перебросить его в уже существующий проект и использовать.
Вы можете обратить внимание на то, что в коде ниже в некоторых местах есть различные версии для одного и того же свойства CSS. Делается это в связи с тем, что браузеры по-разному обрабатывают CSS-файлы. Они поочередно производят разбор одного правила за другим, игнорируя те из них, которые им "непонятны".
Таким образом, у нас есть базовая версия правил, которые понятны всем браузерам и версия на CSS3, которая будет проигнорирована браузерами, которые данную версию не поддерживают.
buttons/buttons.css
.button{
font:15px Calibri, Arial, sans-serif;
/* полупрозрачная тень текста */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
/* Убираем подчеркивание ссылок по умолчанию */
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
/* следующие два правила предназначены для случая,
когда браузер не поддерживает множественные фоны.
*/
background-position:bottom left;
background-image:url('button_bg.png');
/* CSS3 позиционирование фона с несколькими значениями. Сами фоновые
картинки определены в отдельных классах цветов */
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
/* Применяем радиус скругления в 8px */
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
/* Подсветка 1px внутри кнопки */
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
/* Анимация для фона на CSS3 */
/* На данный момент работает только в Safari и Chrome */
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
-o-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
/* Первое правило - на случай того, если браузер
не поддеживает несколько фонов
*/
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
Первое, что нам нужно сделать - это определить класс .button. Это костяк кнопок, в нем задаются позиционирование, шрифт и фон.
Сначала задаем шрифт, затем идет свойство inline-block, которое позволяет кнопке находиться на той же самой линии, что и текст вокруг нее (как элемент типа inline), но также и ведет себя как блочный элемент в отношении внутренних и внешних отступов (padding и margin).
Как Вы скоро увидите, к каждой кнопке применяется четыре картинки. Хотя это и звучит устрашающе, на самом деле с сервера загружается только один файл. Первые два фона-картинки - это нижняя левая и верхняя правая части картинки с пузырями, которую вы видите ниже. Остальные два фона - градиенты CSS.
Как я уже упомянул, пузырчатый фон отображается как два самостоятельных рисунка, что достигается применением свойства background-position. Используя свойство transition в CSS3, мы определяем две версии фоновой картинки, которые скользят к верху или к низу картинки соответственно, что и создает интересный эффект мыльных пузырей.
Теперь несколько слов о размере и классах скругления.
/* Три размера кнопок */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* Скругленные кнопки */
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
Выше Вы можете видеть три класса для задания размеров кнопок - .big, .medium и .small. Кнопки пропорционально увеличиваются в зависимости от примененного класса, поэтому нет необходимости жестко задавать их высоту и ширину.
Теперь переходим к цветам. Ниже приведен вариант только для голубого цвета, так как другие цвета задаются совершенно аналогичным образом.
/* Голубая кнопка */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
/* фон для подстраховки */
background-color: #48b5f2;
/* Задаем градиенты */
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
Каждый цветовой класс определяет уникальный набор свойств - цвет надписи на кнопке, тень текста и набор фоновых картинок. Обратите внимание, что мы используем свойство background для добавления нескольких изображений к одной кнопке. Они "лежат" одна на другой в порядке их использования.
На данный момент CSS градиенты поддерживаются в Firefox и браузерами на основе движка WebKit, но для этого используется разный синтаксис. Остальные браузеры просто отобразят наш "страховочный" фон.
Вы могли заметить, что мы не используем при задании градиентов свойств без спец-суффиксов. Это связано с тем, что на данный момент градиенты не являются часть официальной спецификации CSS и нет соглашения о том, какой синтаксис предпочтительнее использовать.
На этом мы заканчиваем с созданием кнопок в стиле мыльных пузырей.
Заключение
Все эффекты созданы исключительно средствами CSS и интеграция их в готовый проект очень проста. Вы также можете создавать свои новые цвета и формы кнопок, внося изменения в css-файл.
По материалам tutorialzine.com
Перевод - Дмитрий Науменко
P.S. Если вы изучаете CSS для того, чтобы освоить верстку сайтов, также рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
