Кроссбраузерные CSS: углы, тени, прозрачность, градиент, переходы, трансформация и пр.

 

background: #999; 

/* для IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ccc', endColorstr = '#000');

/* для IE10+ */
background: -ms-linear-gradient(top,  #ccc,  #000); 

/* для webkit-браузеров */
background: -webkit-linear-gradient(top, bottom, #ccc, #000); 

/* для firefox 3.6+ */
background: -moz-linear-gradient(top,  #ccc,  #000); 

/* для Opera 11.10+ */
background: -o-linear-gradient(top,  #ccc,  #000);
 

 

---

 

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

/* Firefox */
-moz-border-radius: 5px 5px 5px 5px;
/* Safari, Google Chrome */
-webkit-border-radius: 5px 5px 5px 5px;
/* KHTML */
-khtml-border-radius: 5px 5px 5px 5px;
/* Opera */
-o-border-radius: 5px 5px 5px 5px;
/* IE8 */
-ms-border-radius: 5px 5px 5px 5px;
/* Icab */
-icab-border-radius: 5px 5px 5px 5px;
/* CSS3 */
border-radius: 5px 5px 5px 5px;

/* Учим IE понимать border-radius */
behavior: url('border-radius.htc'); [скачать файл]
 

---

 

Кроссбраузерная прозрачность

/* для IE5+ */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* для firefox 1.6 и ниже */
-moz-opacity: 0.5;
/* для Konqueror 3.1, Safari 1.1 */
-khtml-opacity: 0.5;
/* для Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
opacity: 0.5;
 

---

 

Кроссбраузерная тень элемента

/* Firefox */
-moz-box-shadow: 2px 2px 10px #b8d4fd;
/* Safari and Chrome */
-webkit-box-shadow: 2px 2px 10px #b8d4fd;
/* Opera 10.5+, IE6+ с pie.htc */
box-shadow: 2px 2px 10px #b8d4fd;

/* Учим IE понимать box-shadow */
behavior: url('pie.htc'); [скачать файл]
 

---

 

Кроссбраузерное трансформирование (масштаб, поворот)

/* Firefox */
-moz-transform: scale(1.5) rotate(190deg);
/* Opera */
-o-transform: scale(1.5) rotate(190deg);
/* Safari, Google Chrome */
-webkit-transform: scale(1.5) rotate(190deg);
/* CSS3 */
transform: scale(1.5) rotate(190deg);
 

---

 

Кроссбраузерный плавный переход (сек.)

/* Firefox */
-moz-transition-duration: 1.0s;
/* Opera */
-o-transition-duration: 1.0s;
/* Safari, Google Chrome */
-webkit-transition-duration: 1.0s;
/* CSS3 */
transition-duration: 1.0s;
 

---

 

Кроссбраузерное масштабирование фона

background-size: <значение> | <проценты> | auto | cover | contain
cover - масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
contain - масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

/* Firefox */
-moz-background-size:cover;
/* Opera */
-o-background-size:cover;
/* Safari, Google Chrome */
-webkit-background-size:cover;
/* CSS3 */
background-size:cover;
 

---

Мы надеемся, что после прочтения данной статьи Ваша работа значительно упростится.
Присоединяйтесь и следите за интересными и полезными публикациями на официальном сайте Студии дизайна MUST-STYLE и группе в соц.сети Вконтакте (http://vk.com/muststyle)