Красивые 3D-кнопки с помощью CSS3
Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте.
Есть один замечательный дизайнерский англоязычный блог PremiumPixels.com, автор которого бесплатно делится красивыми элементами интерфейса для сайтов. Мне очень нравится стиль этого дизайнера, он рисует обалденно. Я уже неоднократно использовал на своих блогах его полезняшки, и одной из этих полезняшек стал набор красивых 3D-кнопок.
С помощью CSS3 я “нарисовал” практически копии этих кнопок, кодом которых и поделюсь в данной статье.
HTML
HTML-код кнопки будет таким:
Можно было бы использовать и тег <input>, но есть 2 причины, по которым в данном случае лучше будет задействовать тег <button>:
- В Опере на input’е не работает свойство text-shadow;
- В Опере у input-кнопки появляется черная обводка, если есть фокус в одном из полей формы, что делает кнопку некрасивой.
Примеры
На отдельной странице я подготовил все 10 вариантов 3D-кнопки. CSS-код понравившегося цвета кнопки вы можете скопировать из поля под соответствующей кнопкой.
Также пример такой кнопки вы можете наблюдать в форме добавления комментария на данном блоге.
Особенности
- Каждая кнопка имеет 3 состояния: по умолчанию, при наведении курсора мыши и при клике.
- Полноценно (т.е. так, как и задумывалось) кнопки отображаются в браузерах Opera, Firefox, Chrome, Safari. В Internet Explorer 9 отсутствуют закругления углов, внутренняя обводка и тень у текста (поскольку эти свойства он не поддерживает). Несмотря на это, в IE9 кнопки выглядят неплохо. В IE8 и версиях ниже также отсутствует объемность кнопки, но в них, по крайней мере, есть градиенты.
- Для создания градиентов я воспользовался удобным сервисом Ultimate CSS Gradient Generator.
- Если сравнивать место, занимаемое на сервере, между кнопкой, созданной в виде изображения, и кнопкой, созданной на чистом CSS-коде, то разница получается несущественная - плюс-минус 1 Кб. Однако при этом кнопка на CSS3 позволяет снизить количество запросов к серверу на 1, что, несомненно, является плюсом.
В итоге, несмотря на отсутствие поддержки в браузерах Internet Explorer ряда CSS-свойств, я считаю, что 3D-кнопки, оформленные подобным образом с помощью CSS3, можно смело использовать на своих сайтах, ведь на их юзабилити это никак не сказывается, а пользователи IE лишены лишь возможности наблюдать все прелести современных веб-технологий.
Не нужен.
Красявишно, надо попробовать.
Точно-точно надо :)
=)
Для разных элементов применяются разные значения Display.
Есть блочные элементы (p, div, h1-h6), которые по умолчанию имеют вид блока (display:block;) - т.е. растягиваются на всю ширину блока в котором они находятся.
При этом, то что находится после этого элемента, переносится на новую строку.
Есть элементы, которые не растягиваются (а, span, b, i, u, s) - ими можно выделять определенные участки блочных элементов. Вот как сейчас я выделяю жирным и курсивом названия этих тегов и правил CSS.
По умолчанию значения их свойства display: inline;
И если это свойство прописать для таких тегов как p, div, h1-h6 - они тоже не будут переноситься на новую строку.
А есть элементы которые и блочного типа, и в то же время не переносятся на новую строку, так как не принимают автоматически всю ширину блока, в котором они находятся. Это наши картинки - тег img.
И по умолчанию - значение их свойства display: inline-block;
Т.е. свойство display указывает браузеру, как он должен обрабатывать и отображать тег или селектор.
Яснее стало хоть? Или только еще больше запутал? :)
По поводу ссылки a - не обязательно делать его display: inline-block; Достаточно указать поля сверху и снизу, и она автоматически будет принимать размер с учетом содержимого и величины шрифта.
Я именно так и реализовал. ;)
Дима, там у тебя Allpa спрашивала про это свойство, и я нажал ответить, но по ходу не нажал :)
И у меня этот коммент здесь ни к лесу ни к полю.
Я сделаю его дубликат ответом Allpa, а ты этот коммент и тот который выше удали плиз.
Сор за спам :)
Блин, по ходу ответить не работает, или я достиг максимального лимита ответов? :)
Короче, надеюсь Allpa увидит этот ответ.
Работает, но нестандартным способом. Коммент, на который ты отвечал, находится на одной странице комментариев, а добавляемый коммент - на другой странице (поскольку та страница уже заполнена). Это связано с особенностями моего шаблона.
В общем, у меня система комментов хитро сделана =) Например, если отключить в браузере JavaScript, то древовидность пропадает.
Ну сейчас браузер без яваскрипта, что машина без колес…
Эх… мне бы такую на MaxSite присобачить :)
Отличные кнопки! Спасибо, будем юзать)