Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Трехмерные круглые кнопки с помощью CSS Категория: CSS
Название: Трехмерные круглые кнопки с помощью CSS
Дата добавления: 15-06-2012
Раз просмотрено: 2140
Комментарии: 0
Рейтинг: * * * * * * * * * * (4 голоса)

Трехмерные круглые кнопки с помощью CSS

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

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

Трехмерные круглые кнопки с помощью CSS
Трехмерные круглые кнопки с помощью 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"; }

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

  1. Зайдите на сайт Fontello, выберете необходимые вам иконки и нажмите на кнопку «Download your font pack». На ваш компьютер будет закачан архив с файлами.
  2. Разархивируйте его и замените шрифты, скачанные с этого сайта на новые из архива.
  3. Замените CSS код, описанный выше, на содержимое файла demo.css.
  4. Задайте в вашей 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;
}

На этом этапе наши кнопки будут выглядеть так:

Трехмерные круглые кнопки с помощью CSS

Неплохо, но нам есть к чему стремиться — мы будем использовать псевдоэлементы для создания дополнительных эффектов. Чтобы создать горизонтальную линию, которую вы видели между кнопок, мы добавим с помощью псевдоселектора :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;
}

На этом все. В результате, вы получите такие, уже виденные вами в начале урока, трехмерные круглые кнопки:

Трехмерные круглые кнопки с помощью CSS

Поддержка браузерами

Эти кнопки используют самые распространенные CSS3 свойства и псевдоэлементы, которые входят в CSS 2.1. Ничего слишком прогрессивного. Любая версия Safari, Chrome, Opera или Firefox последних годов с легкостью справится с этим. В Internet Explorer 8, который не поддерживает CSS3, кнопки будут выглядеть таким образом (В Internet Explorer 7, не поддерживающем псевдоэлементы не будет видно горизонтальной линии):

Трехмерные круглые кнопки в Internet Explorer 8

Это интересно: «Фоновое изображение в поле ввода».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.