Веб-дизайнеру
Веб-разработчику
Дополнительно
CSS чекбокс с привлекающим эффектом
Скачать
Демо
↓ Также Вам будет интересно ↓
Кнопка вкл/выкл (чекбокс/checkbox) на CSS3
Простые иконки с эффектом при наведении + 17 вариантов
Кнопки CSS3 – творческие стили 30+ кнопок!
CSS3 кнопки “Bubble” с анимацией пузырей!
Красивые Radio Buttons (radio кнопка) и Checkbox CSS (чекбокс)
Скачать продающую графику PSD для ваших проектов в 4-х оттенках
CSS3 – это действительно интересное дело, благодаря которому можно творить то, что кажется невозможным. И сейчас мы рассмотрим пример создания красивой, даже можно сказать “крутой” кнопки, а именно это css чекбокс (checkbox). Как-то совсем недавно мы уже рассматривали возможные варианты стилизации чекбоксов и радио кнопок в статье “Красивые Radio Buttons (radio кнопка) и Checkbox CSS (чекбокс)”. Этот пример основан на работе от Петра Квятковского, но чекбокс будет несколько изменена под наши потребности и желания. Ну что же, давайте приступим к созданию CSS3 эффектов для нашей кнопки!
HTML структура
Разметка будет вполне проста. Класс для тега i требуется для того, чтобы применить шрифт FontAwesome.
|
1 2 |
<div class="switch"><input type="checkbox" /> <label><i class="icon-off"></i></label></div> |
На это все, перейдем к следующему шагу – стилизация чекбокса.
CSS стили
Мы не будем сейчас рассматривать все о шрифте FontAwesome, потому что я уверен, что эту тему Вы можете найти в другой статье, а также, вероятно, Вы уже делали подобное раньше. А именно, нужно просто убедиться в следующем:
- Для шрифта @font-face указан правильный путь к файлам;
- В одном из Ваших файлов CSS стилей подключен шрифт FontAwesome.
Итак, давайте начнем с основ: как скрывать чекбокс и размеры:
|
1 2 3 4 5 |
.switch { width: 150px; height: 150px; position: relative; } |
Теперь, давайте работать с label. Обратите внимание, что здесь мы включаем несколько шрифтов. Поскольку все они наследуются, они будут идти прямо к элементу i (значок). Так что ничего нового нет – градиент и некоторые тени box-shadow для красивого эффекта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.switch label { display: block; width: 100%; height: 100%; position: relative; color: #a5a39d; font-size: 70px; text-align: center; line-height: 115px; text-shadow: 0 2px 1px rgba(0,0,0,0.25); border-radius: 50%; background: #b25244; /* Fallback */ background: linear-gradient(#f7f2f6, #b2ac9e); transition: all 0.3s ease-out; z-index: -1; box-shadow: inset 0 2px 3px rgba(255,255,255,0.13), 0 5px 8px rgba(0,0,0,0.3), 0 10px 10px 4px rgba(0,0,0,0.3); } |
Теперь label псевдо-элемент, используется для создания существенного эффекта вокруг кнопки. Мы применяем фильтр размытия до ближайшего значения, чтобы сделать его немного более тонким.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.switch label:before { content: ""; position: absolute; left: -10px; right: -10px; top: -10px; bottom: -10px; z-index: -1; border-radius: inherit; box-shadow: inset 0 10px 10px rgba(0,0,0,0.13); -webkit-filter:blur(1px); /* Smooth trick */ filter: blur(1px); /* Future-proof */ } .switch label:after { content: ""; position: absolute; left: -20px; right: -20px; top: -20px; bottom: -20px; z-index: -2; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.15); } |
Хорошо, давайте поработаем на элементом: i . FontAwesome использует :before псевдо-элемент, для показа значка, поэтому мы не можем его использовать. Но, мы можем и будем использовать :after, потому что нам нужно что-то, чтобы сделать верхнюю часть нашей кнопки.
Как обычно, мы даем ей хороший градиент, некоторые тонкие тени и размытие 1px, чтобы сделать её более гладкой.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.switch .icon-off:after { content: ""; display: block; position: absolute; width: 70%; height: 70%; left: 50%; top: 50%; z-index: -1; margin: -35% 0 0 -35%; border-radius: 50%; background: #d2cbc3; /* Fallback */ background: linear-gradient(#cbc7bc, #d2cbc3); box-shadow: 0 -2px 5px rgba(255,255,255,0.05), 0 2px 5px rgba(255,255,255,0.1); -webkit-filter:blur(1px); /* Smooth trick */ filter: blur(1px); /* Future-proof */ } |
И как видим все просто: при активации кнопки, она светится зеленым, а при отключении – обычным серым:
|
1 2 3 4 5 6 7 |
.switch input:checked ~ label { /* Button */ color: #9abb82; box-shadow: inset 0 2px 3px rgba(255,255,255,0.13), 0 5px 8px rgba(0,0,0,0.35), 0 3px 10px 4px rgba(0,0,0,0.2); } |
Вот все и готово! Сложно? Думаю нет. Спасибо за то, что дочитали эту статью до конца. Отзывы и вопросы, пожалуйста, пишите в комментариях.
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
