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

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

В этом уроке я расскажу Вам как же ж с помощью CSS 3 добиться прозрачности или полупрозрачности блоков, картинок, форм и так далее. Одним правилом тут не обойдешься, так как они не являются кроссбраузерными. Что же делать? В принципе не будет ошибкой если для каждого браузера установить свое отдельное правило. Итак приступим.

HTML-код:

<div id="block">Text Text Text Text Text Text Text Text Text Text Text</div>

CSS-код:

1<p style="padding-left: 30px;">#block {</p>

2<p style="padding-left: 30px;">border:1px solid #000;</p>

3<p style="padding-left: 30px;">background-color: #aaa;

4opacity: 0.5; // - для Firefox и Опера

5-moz-opacity: 0.5; // - для Firefox ниже 1.5 версии

6filter: alpha(opacity=50); - Internet Explorer

7}

Вы помните, как раньше, чтобы сделать полупрозрачность, а при наведении на блок или картинку, чтобы этот блок или картинка опять становилась непрозрачной надо было писать сложный скрипт и так далее… Теперь это в прошлом. просто пишем следующий код в CSS:

1#block:hover{

2border:1px solid #000;

3background-color: #aaa;

4opacity: 1; // - для Firefox и Опера

5-moz-opacity: 1; // - для Firefox ниже 1.5 версии

6filter: alpha(opacity=100); - Internet Explorer

7}

Вот в принципе и вся магия. Я подготовил небольшую демонстративную страницу для большего усвоения.

CSS-код тестовой страницы:

1#block1{

2border:1px solid #000;

3background-color: #aaa;

4width:400px;

5height:70px;

6opacity: 0.5; // - для Firefox и Опера

7-moz-opacity: 0.5; // - для Firefox ниже 1.5 версии

8filter: alpha(opacity=50); - Internet Explorer

9}

10#block{

11border:1px solid #000;

12background-color: #aaa;

13width:400px;

14height:70px;

15opacity: 0.5; // - для Firefox и Опера

16-moz-opacity: 0.5; // - для Firefox ниже 1.5 версии

17filter: alpha(opacity=50); - Internet Explorer

18}

19#block:hover{

20border:1px solid #000;

21background-color: #aaa;

22width:400px;

23height:70px;

24opacity: 1; // - для Firefox и Опера

25-moz-opacity: 1; // - для Firefox ниже 1.5 версии

26filter: alpha(opacity=100); - Internet Explorer

27}

28.img{

29border:1px solid #000;

30background-color: #aaa;

31opacity: 0.2; // - для Firefox и Опера

32-moz-opacity: 0.2; // - для Firefox ниже 1.5 версии

33filter: alpha(opacity=20); - Internet Explorer

34}

35.img1{

36border:1px solid #000;

37background-color: #aaa;

38opacity: 0.2; // - для Firefox и Опера

39-moz-opacity: 0.2; // - для Firefox ниже 1.5 версии

40filter: alpha(opacity=20); - Internet Explorer

41}

42.img1:hover{

43border:1px solid #000;

44background-color: #aaa;

45opacity: 1; // - для Firefox и Опера

46-moz-opacity: 1; // - для Firefox ниже 1.5 версии

47filter: alpha(opacity=100); - Internet Explorer

48}


Карта сайта


Информационный сайт Webavtocat.ru