Кроссбраузерное закругление углов с тенью

28 Июл
2011

Я хочу рассказать о том, как долго мучился для того что бы создать всплывающую дивку, которая была бы видна одинакова во всех браузерах. Да именно кросс, и для IE7+. Я работаю на сайте знакомств верстальщиком и вот в один чудесный день появилась задача сделать одну дивку для всего сайта. Характеристики: — закругленные углы; — тень; — хвостик с разных сторон. Перебрав море вариантов, я остановился на создании всплывающей дивки с изображением. Так как «любимые» браузеры IE7-8 не понимают CSS3. image Примем дивки с изображением. Весит она не так уж много (9,7кб*), работает везде, практически. В IE7 обязательно нужно задавать ширину, это и стало камнем в мой огород. Я решил найти способ застваить IE7+ работать с CSS3 и правильно отображать тень и закругленные углы. Порувшись в интернете я нашел отличный интсрумент – PIE image Получившаяся дивка (пример) отлично работает в IE7+ да и остальные браузеры ее понимают. Пример дивки. Весит она не много: — 6,8кб* это для всех кроме IE7+; — 6.8кб+34кб* для IE7+. PIE позволяет работать IE с: — border-radius — box-shadow — border-image — multiple background images — linear-gradient as background image Так что PIE пригодиться всему сайту. * Размер был взят с примера (html страница + css), с помощью firebug. PIE — css3pie.com/
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх