Несколько полезных CSS кроссбраузерных решений

Куча хаков, которые могут быть очень полезны если нужно сделать кроссбраузерно.

Opacity / Transparency:

#myElement {
opacity: .4; /* other browsers */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */
}

Gradients:

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

}

Multiple Backgrounds:

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

Element Rotation:

#rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
} Box Shadow: .box-shadow {
-moz-box-shadow: 2px 2px 3px #969696; /* for Firefox 3.5+ */
-webkit-box-shadow: 2px 2px 3px #969696; /* for Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);

}

Border-radius:

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

Скачать файл border-radius.htc (Google Code)

Оцени публикацию:
  • 8,40
Оценили человек: 8

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »