наверх





Если правильно использовать в элементах сайта прозрачность, то может получится неплохой, а даже красивый дизайн. Но как эту самую прозрачность сделать? Об этом в данном примере и говорится, причем с подробным описанием свойств и их значений.


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

Для примера я взял цветное изображение бабочки, с которым и поработаем. Эффект прозрачности создает свойство opacity. Однако, некоторые браузеры не воспринимают данное свойство, поэтому были созданы дополнительные свойства:
-moz-opacity, для Mozilla Firefox 2;
-khtml-opacity, для старых Safari и для браузеров Google Chrome, Chromium;
-ms-filter, для IE 6;
filter, для IE 6-8.

Для всех браузеров прописывать свое свойство нет смысла, когда был создан сервис, который автоматически вам все сгенерирует: BlueCode Opacity Generator.

Итак, что нужно сделать, что бы у картинки появилась полу-прозрачность? Для этого ей нужно задать свойство opacity со значением 0.3-0.5. Чем меньше значение, тем больше прозрачность. 0 - это полная прозрачность, а 1- без прозрачности.

img {
-moz-opacity: 0.30;
-khtml-opacity: 0.30;
opacity: 0.30;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
filter:alpha(opacity=30);
}
img:hover{
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter:alpha(opacity=100);
}


При наведении курсором на изображение, как видно из кода, прозрачность становилась равно 1, а значить исчезала. По сути, псевдокласс :hover можно было и не добавлять, хотя это кому как нравится.




Просмотр демо-варианта


Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.