CSS 3.0 является одной из самых горячих тенденций веб-разработки на сегодняшний день. Новые возможности CSS позволяют применять популярные решения без использования графики и javascript.

К сожалению Internet Explorer до 9 версии не поддерживал стандарты CSS 3.0, в то время как Firefox, Chrome и Safari старались поддерживать их изо всех сил.

Каждому владельцу сайта хочется чтобы его детище выглядело одинаково везде, а применять целые отдельные решения для IE - невыгодно. Для этого и предназначена наша статья, вы сможете быстро найти аналог CSS 3.0 свойства для Internet Explorer.

Прозрачность

#element {
	opacity: .3; /* для всех браузеров, поддерживающих данное свойство */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); /* работает в IE6, IE7 и IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; /* только для IE8 */
}

Закругленные углы

.box-radius {
	border-radius: 15px;
	behavior: url(border-radius.htc);
}

border-radius.htc скачать можно здесь.

Тень от блоков

.box-shadow {
	-moz-box-shadow: 2px 2px 5px #969696; /* Firefox 3.5+ */
	-webkit-box-shadow: 2px 2px 5px #969696; /* Safari, Chrome */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=5); /* Все версии IE */
}

Тень от текста

.text-shadow {
	text-shadow: #ccc 1px 0px 1px;
}

/* Для IE придется использовать плагин jQuery. */
$(document).ready(function(){
	$(".text-shadow").textShadow();
});

Плагин скачать можно здесь, там же описан синтаксис использования и пример.

Градиенты

.gradient {
	background-image: -moz-linear-gradient(top, #33bbbb, #33bb53); /* Firefox 3.6 */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #33bb53),color-stop(1, #33bbbb)); /* Safari и Chrome */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#33bbbb', endColorstr='#33bb53'); /* IE6 и IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#33bbbb', endColorstr='#33bb53')"; /* IE8 */
}

GradientType - 0[вертикальный], 1[горизонтальный]

Прозрачный цвет фона

#rgba p {
	background: rgba(98, 135, 167, .3); /* Прозрачность 30% */
}

#rgba p {
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#886287a7', endColorstr='#886287a7');
}

Многослойный фон

#multi-bg {
	background: url(images/bg1.gif) center center no-repeat, url(images/bg2.gif) top left repeat; /* Firefox, Safari, Chrome */
}

#multi-bg {
	background: transparent url(images/bg1.gif) top left repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg2.gif', sizingMethod='crop'); /* IE6-8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg2.gif', sizingMethod='crop')"; /* IE8 */
}

Ротация элементов

#rotate {
	-webkit-transform: rotate(180deg); /* Safari, Chrome*/
	-moz-transform: rotate(180deg); /* Firefox */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE */
}

Для IE ставится цифра от 1 до 4. 1 - 90 градусов, 2 - 180, 3 - 270 и т.д.

Это краткий перевод статьи на smashingmagazine.com

(Visited 389 times, 1 visits today)