Интернет-технологии очень активно развиваются. Когда то в 2008 году, когда я начинал верстать и осваивать веб-технологии стало модно делать закругленные блоки. Возможно это началось и раньше, но тогда я еще был далек от интернета — аська на телефоне и доволен.
Использовать закругленные уголки в то время считалось очень круто и модно, и лепил где только подвернется. А тогда была Joomla 1.0 (1.5 еще работала с кучей ошибок), а в ней максимальная конструкция вывода блока была тремя вложенными div’ами. И крутись как можешь. В Joomla 1.5 эта проблема изящно решилась, предоставив создателю шаблонов самому настраивать вывод (почитать можно здесь).
Потом потихоньку стали пробираться CSS3. Тень у ссылок в главном меню — большинство пищало от восторга. Вау, круто. И те самые закругленные блоки, теперь можно запросто сделать несколькими строчками:
html
<div class="round-block">Я текст в модном блоке.</div> |
css
div.round-block{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:5px; display:inline-block; background:#eee; } |
Добавляем тень:
-webkit-box-shadow: 0px 0px 3px #999; -moz-box-shadow: 0px 0px 3px #999; box-shadow: 0px 0px 3px #999; |
Подробнее о свойствах на html-book.ru
Внутренняя тень, добавляем параметр inset
-webkit-box-shadow:inset 0px 0px 3px #999; -moz-box-shadow:inset 0px 0px 3px #999; box-shadow:inset 0px 0px 3px #999; |
Для того чтобы сделать у блока как внутреннюю тень, так и внешнюю придется вложить в него еще один блок. Вместе эти свойства не работают. У первого блока делаем внешнюю тень и скругление. У внутреннего: отступ, внутреннюю тень и скругление.
Добавляем градиент
background: -moz-linear-gradient(top, #ffffff 0%, #e2e2e2 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%); background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%); background: linear-gradient(top, #ffffff 0%,#ededed 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */ background-color: #e2e2e2; |
Все результаты можно посмотреть здесь.
Если все остальные свойства работают только в современных браузерах, то градиент поддерживается даже IE6.
Использование CSS3 позволяет верстать намного быстрее, избавиться от множества мелких изображений, файлы стилей более читабельными. Так что я активно использую его в своих проектах, чего и всем желаю.
Использование CSS3: 0 комментариев