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

Категории:HTML-верстка
Теги: css3, html, кроссбраузерность, прозрачность

Опубликовано:
26-04-2010

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

HTML-код:

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

CSS-код:

1
2
3
4
5
6
7

#block {
border:1px solid #000;
background-color: #aaa;
opacity: 0.5; // - для Firefox и Опера
-moz-opacity: 0.5; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=50); - Internet Explorer
}

А вы знаете где отдыхается лучше всех? Затока Одесса самый оптимальный вариант для этого! Этот длиннющий пляж заставит вас проводит на нем не только жаркие солнечные дни, но и лунные ночи!

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

1
2
3
4
5
6
7

#block:hover{
border:1px solid #000;
background-color: #aaa;
opacity: 1; // - для Firefox и Опера
-moz-opacity: 1; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=100); - Internet Explorer
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

#block1{
border:1px solid #000;
background-color: #aaa;
width:400px;
height:70px;
opacity: 0.5; // - для Firefox и Опера
-moz-opacity: 0.5; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=50); - Internet Explorer
}
#block{
border:1px solid #000;
background-color: #aaa;
width:400px;
height:70px;
opacity: 0.5; // - для Firefox и Опера
-moz-opacity: 0.5; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=50); - Internet Explorer
}
#block:hover{
border:1px solid #000;
background-color: #aaa;
width:400px;
height:70px;
opacity: 1; // - для Firefox и Опера
-moz-opacity: 1; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=100); - Internet Explorer
}
.img{
border:1px solid #000;
background-color: #aaa;
opacity: 0.2; // - для Firefox и Опера
-moz-opacity: 0.2; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=20); - Internet Explorer
}
.img1{
border:1px solid #000;
background-color: #aaa;
opacity: 0.2; // - для Firefox и Опера
-moz-opacity: 0.2; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=20); - Internet Explorer
}
.img1:hover{
border:1px solid #000;
background-color: #aaa;
opacity: 1; // - для Firefox и Опера
-moz-opacity: 1; // - для Firefox ниже 1.5 версии
filter: alpha(opacity=100); - Internet Explorer
}

Желаю удачи! =)

Поступило очень хорошее предложение купить обувь оптом. Нашел несколько точек по городу, где можно брать обувь старых коллекций за небольшие деньги и сбывать ее же за двойную цену. Хороший бизнес намечается

masterix.com.ua

HTML верстка макетов любой сложности