 |
Категория: CSS |
| Название: Трехмерные круглые кнопки с помощью CSS | |
| Дата добавления: 15-06-2012 | |
| Раз просмотрено: 2140 | |
| Комментарии: 0 | |
Рейтинг:  (4 голоса) |
Трехмерные круглые кнопки с помощью CSS
В этом уроке вы научитесь создавать современные минималистические трехмерные кнопки, которые отлично подойдут для любого сайта или веб-приложения. Для создания этих кнопок мы будем использовать специальный шрифт с иконками и современные CSS3 свойства, такие как скругление, тени и градиенты. Однако, эти кнопки будут приемлемо выглядеть даже в старых браузерах и не потеряют своего функционала.
В конце нашей работы над этими трехмерными круглыми кнопками, мы получим такой результат. Демо с кнопками вы можете посмотреть на этой странице.
Трехмерные круглые кнопки с помощью CSS
HTML
Для создания этих кнопок мы будем использовать ненумерованный список. В элементах этого списка будут находится ссылки с разными классами. В зависимости от этих классов мы будем получать разные иконки на кнопках:
<ul id="buttons"> <li><a href="#" class="icon-home"></a></li> <li><a href="#" class="icon-cog"></a></li> <li><a href="#" class="icon-cw"></a></li> <li><a href="#" class="icon-location"></a></li> </ul>
CSS для шрифта с иконками
Для создания различных иконок для этих трехмерных круглых кнопок мы будем использовать специальный шрифт. В отличии от обычного шрифта, такой шрифт вместо символов содержит различные знаки и иконки. Чтобы задать этот шрифт, мы будем использовать правило @font-face, если вы не знакомы с ним, вам пригодится статья «Как использовать любой шрифт на сайте». А для получения шрифта с иконками мы воспользуемся сервисом Fontello.
Этот сервис позволяет создавать шрифт с собственной подборкой необходимых иконок, что позволяет минимизировать трафик пользователя. Шрифты сохраняются в четырех различных форматах: TTF, EOT, WOFF и SVG, которые необходимы для обеспечения полной кроссбраузерности шрифта. Чтобы посмотреть результат этого примера, скачайте архив с необходимыми шрифтами по этой ссылке, разархивируйте его и добавьте файлы на сайт.
Чтобы на наших кнопках отображались иконки, добавьте этот CSS код к вашей странице. Не забудьте поменять пути до шрифтов, которые вы скачали, если это необходимо:
@font-face {
font-family: 'fontello';
src: url('fontello.eot');
src: url('fontello.eot?#iefix') format('embedded-opentype'),
url('fontello.woff') format('woff'),
url('fontello.ttf') format('truetype'),
url('fontello.svg#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
[class*=' icon-'] {
font-family: 'fontello';
font-size: 3em;
speak: none;
}
.icon-home:after { content: "\2302"; }
.icon-cog:after { content: "\2699"; }
.icon-cw:after { content: "\27f3"; }
.icon-location:after { content: "\e724"; }
В этом примере мы использовали четыре иконки. Скорее всего, вам понадобится больше, либо иконки должны быть другими. Для того, чтобы сделать кнопки с другими иконками следуйте этой инструкции:
- Зайдите на сайт Fontello, выберете необходимые вам иконки и нажмите на кнопку «Download your font pack». На ваш компьютер будет закачан архив с файлами.
- Разархивируйте его и замените шрифты, скачанные с этого сайта на новые из архива.
- Замените CSS код, описанный выше, на содержимое файла demo.css.
- Задайте в вашей HTML разметке ссылкам классы, соответствующие описанным в конце файла demo.css (например,
icon-home,icon-locationи т.д.).
CSS для кнопок
Мы расположим кнопки горизонтально путем задания отображения элементов списка, как inline-block. А с помощью небольшого отрицательного отступа, мы заставим их располагаться вплотную друг к другу:
#buttons {
list-style: none;
text-align: center;
}
#buttons li {
position: relative;
display: inline-block;
margin-right: -4px;
}
Приятная трехмерность кнопок создается при помощи легкого градиента и двух теней — внешней и внутренней. Одинаковая ширина и высота кнопок создают квадрат, из которого потом, с помощью свойства border-radius получается идеальный круг. Свойство line-height задает высоту, а text-align задано по центру, что делает иконки выровненными по вертикали и горизонтали соответственно:
#buttons a {
display: block;
background-color: #F7F7F7;
background-image: -webkit-linear-gradient(top, #F7F7F7, #E7E7E7);
background-image: -moz-linear-gradient(top, #F7F7F7, #E7E7E7);
background-image: linear-gradient(top, #F7F7F7, #E7E7E7);
color: #A7A7A7;
margin: 36px;
width: 144px;
height: 144px;
position: relative;
text-align: center;
line-height: 144px;
border-radius: 50%;
box-shadow: 0px 3px 8px #AAA, inset 0px 2px 3px #FFF;
text-decoration: none;
}
Мы можем немного вдавить наши кнопки, при наведении на них мыши, для создания эффекта нажатия. Это делается при помощи псевдокласса :hover. Вы можете задать другой эффект, или описать состояние при щелчке при помощи псевдокласса :active:
#buttons a:hover {
color: #555;
background: #F5F5F5;
}
На этом этапе наши кнопки будут выглядеть так:
Неплохо, но нам есть к чему стремиться — мы будем использовать псевдоэлементы для создания дополнительных эффектов. Чтобы создать горизонтальную линию, которую вы видели между кнопок, мы добавим с помощью псевдоселектора :before к каждому элементу списка. С помощью отрицательного z-index мы поместим ее позади всего. Двойная граница придаст вдавленный вид, а отрицательные отступы позволят линии выглядеть непрерывной. С помощью абсолютного позиционирования мы выровняем линию по центру:
#buttons li:before {
content: '';
display: block;
border-top: 1px solid #DDD;
border-bottom: 1px solid #FFF;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: -1;
}
Для дополнительной трехмерности мы создадим кольцо вокруг каждой кнопки. И опять, как в случае с линией, мы не будем использовать дополнительную HTML разметку, а применим псевдоэлементы. Размер кольца (немного больше самой кнопки), задается путем абсолютного его позиционирования за кнопкой и растягиванием отрицательными значениями позиционирования со всех сторон. Трехмерность мы создаем при помощи верхней границы и внешней и внутренней теней:
#buttons a:before {
content: '';
display: block;
background: #FFF;
border-top: 2px solid #DDD;
position: absolute;
top: -18px;
left: -18px;
bottom: -18px;
right: -18px;
z-index: -1;
border-radius: 50%;
box-shadow: inset 0px 8px 48px #DDD;
}
На этом все. В результате, вы получите такие, уже виденные вами в начале урока, трехмерные круглые кнопки:
Поддержка браузерами
Эти кнопки используют самые распространенные CSS3 свойства и псевдоэлементы, которые входят в CSS 2.1. Ничего слишком прогрессивного. Любая версия Safari, Chrome, Opera или Firefox последних годов с легкостью справится с этим. В Internet Explorer 8, который не поддерживает CSS3, кнопки будут выглядеть таким образом (В Internet Explorer 7, не поддерживающем псевдоэлементы не будет видно горизонтальной линии):
Это интересно: «Фоновое изображение в поле ввода».
Ваш комментарий будет первым.