Округленные уголки и тени с CSS3, даже в IE6+

Закругленные уголки и тени стали неотъемлемой частью дизайна почти для любого сайта. Они встречались почти во всех дизайнах, которые мне приходилось верстать на заказ. Честно скажу, в верстке именно эти два элемента меня больше всего бесили. Ведь, если это бокс динамического размера, приходилось создавать таблицу на 9 элементов, либо дивов не меньше, еще и 8 элементов разрезать (4  уголка+4 боковины), в общем жуть. Может быть я конечно  и верстальщик никудышный, но суть не этом.

С помощью CSS3 уголки и тени можно добавить вписав лишь несколько строчек в стилях. Пример обычного дива с фоном и бордером, с закругленными уголками и тенью:

<style>
div.box{
box-shadow:10px 10px 10px #000000;
-moz-box-shadow: 10px 10px 10px #000000;
-webkit-box-shadow: 10px 10px 10px #000000;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

display:block;
width:400px;
height:50px;
background:#bdc2e7;
border:#384386 solid 2px;
padding:20px;
}
</style>

<div>
<a href=»http://denweb.org/»>Пример закругленного дива с тенью при помощи css3</a>
</div>

Первые три строчки в стилях задают параметры тени: отступ вправо,отступ вниз, размытие и цвет тени. За ними три строчки, которые задают радиус округления. Поигравшись с этими параметрами можно добиться красивых эффектов, и вместо  квадратных серых блоков на сайте будут висеть симпатичные объемные элементы. Особенно я люблю применять эти стили для выпадающих менюшек.

Всё бы здорово, если бы не наш «любимый» IE. Даже 9я версия так и не научилась понимать CSS3. Но спасение есть и имя ему PIE (Progressive Internet Explorer). PIE с помощью VML объектов перерисовывает отображение объекта, понимая некоторые свойства CSS3. CSS3 не ограничивается лишь закруглениями и тенями, более подробно о его возможностях вы можете почитать тут либо погуглив. На момент написания статьи PIE научился эмулировать 6 свойств:

  • border-radius —  округление углов
  • box-shadow — тени
  • border-image — бордер картинкой
  • pie-background — множественные background’ы
  • linear-gradient - градиенты
  • rgba цвета — понимание альфа канала

Использование PIE

Качаем дистрибутив последней версии, разархивируем, нас интересует только PIE.htc. Копируем его в корень сайта и в стилях элемента, которому присваиваем свойства CSS3, добавляем строчку: behavior:url(PIE.htc);. PIE работает не со всем элементами (например input его игнорирует), поэтому нерабочие элементы нужно обворачивать в див, а диву уже присваивать свойства. Иногда ничего не хочет работать при позиционировании static, в этом случае попробуйте поставить position:relative. Вот собственно кроссбраузерная страница с использованием закруглений и теней в CSS3.

Похожие записи

  • Нет похожих записей

Ваш комментарий

Я не робот