Здравствуйте, уважаемые читатели блога SerBlog.ru. В этой статье будет небольшой экскурс в мир современного веб-дизайна. А именно о том, как делать различные элементы на страницах сайта с эффектом прозрачности. Для начала поговорим о свойстве opacity, которое появилось в CSS-3. Это свойство придает элементам прозрачность от 0 до 1. 0 — полная прозрачность, 1 — не прозрачный, 0.5 — полупрозрачный. Например если посмотреть на футер моего блога и навести курсор на изображение дома, то он частично станет прозрачным. Здесь как раз работает свойство opacity. Но тут есть одно, но очень большое НО. Прозрачность свойства opacity передается дочерним элементам. То есть, если вы захотели сделать какой-то блок на странице полупрозрачным, то ко всем элементам, находящимся внутри этого блока тоже будет применено это свойство. Давайте рассмотрим на примере.
Эффекты прозрачности не работают в старых браузерах. Все веяния современного веб-дизайна предполагают использование браузеров самых последних версий.
Создадим HTML страницу. Фоном установим картинку, чтобы прозрачность была более заметна. Создадим блок шириной 500 пикселей и высотой- 300. Цвет блока будем использовать в формате RGB. Об этом немного написано в этой статье. Рассмотрим код:
1
2
3
4
5
6
7
8
9
10
11
12
| < !DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Эффект прозрачности с с использованием свойства opacity</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="block"><h1>Полупрозрачный элемент с использованием свойства: opacity</h1></div>
<div class=""></div>
</body>
</html> |
< !DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Эффект прозрачности с с использованием свойства opacity</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="block"><h1>Полупрозрачный элемент с использованием свойства: opacity</h1></div>
<div class=""></div>
</body>
</html>
Теперь пишем 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
| body, html
{
margin:0;
padding:0; /* Убираем отступы */
background:url(bg.png); /* Фоновая картинка */
font-family:sans-serif; /*Семейство шрифта */
}
#blok
{
width:500px; /* Ширина блока */
height:300px; /* Высота блока */
background:rgb(255, 252, 204); /* Цвет фона блока */
opacity:0.4; /* Прозрачность блока */
margin:100px auto 0; /* Выравнивание блока посередине*/
border-radius:10px; /* Скругление углов */
text-align:center; /* Выравнивание текста по центру */
box-shadow: 0 0 5px 2px #555; /* Тень блока */
}
#blok:hover /* Эффект при наведении курсора */
{
background:rgb(255, 252, 204); /* Фоновый цвет */
opacity:0.7; /* Прозрачность блока */
}
h1
{
color:rgb(0, 0, 0); /* Цвет текста */
text-shadow:1px 1px 0 #fff; /* Тень текста */
font-size:2,54sm; /* Размер текста */
} |
body, html
{
margin:0;
padding:0; /* Убираем отступы */
background:url(bg.png); /* Фоновая картинка */
font-family:sans-serif; /*Семейство шрифта */
}
#blok
{
width:500px; /* Ширина блока */
height:300px; /* Высота блока */
background:rgb(255, 252, 204); /* Цвет фона блока */
opacity:0.4; /* Прозрачность блока */
margin:100px auto 0; /* Выравнивание блока посередине*/
border-radius:10px; /* Скругление углов */
text-align:center; /* Выравнивание текста по центру */
box-shadow: 0 0 5px 2px #555; /* Тень блока */
}
#blok:hover /* Эффект при наведении курсора */
{
background:rgb(255, 252, 204); /* Фоновый цвет */
opacity:0.7; /* Прозрачность блока */
}
h1
{
color:rgb(0, 0, 0); /* Цвет текста */
text-shadow:1px 1px 0 #fff; /* Тень текста */
font-size:2,54sm; /* Размер текста */
}
Надеюсь, что вам понятно, что я написал в комментариях CSS. Теперь посмотрим, что у нас из этого получилось.
Демо
Как видно в примере, текст, находящийся в блоке принял на себя свойство прозрачности родителя, то есть блока. Это и есть тот самый минус, о котором я говорил. И что самое плохое, поделать с этим ничего нельзя. пока никакого решения этой проблемы нет. Теперь рассмотрим второй способ. Он более привлекателен, потому, как не имеет подобных ограничений. Этот способ подразумевает использование так называемого альфа канала.
В компьютерной графике альфа-композиция обозначает процесс комбинирования изображения с фоном с целью создания эффекта частичной прозрачности.
Для примера создадим еще одну страницу. Можно просто скопировать все то же из первой HTML страницы. В CSS убираем свойство opacity. И пишем значение прозрачности с применением альфа канала.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| #blok
{
width:500px;
height:300px;
background:rgba(255, 252, 204, 0.4); /* Использование альфа канала */
margin:100px auto 0 ;
border-radius:10px;
text-align:center;
box-shadow: 0 0 5px 2px #555;
}
#blok:hover
{
background:rgba(255, 252, 204, 0.7); /* Использование альфа канала */
} |
#blok
{
width:500px;
height:300px;
background:rgba(255, 252, 204, 0.4); /* Использование альфа канала */
margin:100px auto 0 ;
border-radius:10px;
text-align:center;
box-shadow: 0 0 5px 2px #555;
}
#blok:hover
{
background:rgba(255, 252, 204, 0.7); /* Использование альфа канала */
}
Как вы уже заметили, применение альфа канала не такое уж сложное. То же самое, что и применение цвета методом RGB. Только добавляем еще букву «А» и через запятую уровень прозрачности. Работает точно так же, как и с opacity, от 0 до 1. Можно кстати писать и десятичные значения, только нужно будет убрать ноль, а точку оставить и писать примерно так: (255, 252, 204, .85) Давайте посмотрим пример:
Демо
Как видно, мы получили ту же самую прозрачность блока, что и с применением свойства opacity, но эта прозрачность применена исключительно к блоку. Текст остался без изменений. Вот таким вот образом можно применять данные эффекты на страницах своего сайта. Это становится все более популярным в веб-дизайне, да и смотрится красиво. Например создание симпатичных всплывающих полупрозрачных модальных окон. Кому хочется поближе рассмотреть код примеров, то можно скачать оба варианта. Если что-то непонятно, не стесняйтесь, спрашивайте в комментариях.
СКАЧАТЬ
1692![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
спасибо, сохраню данную страницу в закладки!!!- ну очень полезная 😉
Полезная статья, спасибо, нашел для себя новенькое
Пожалуйста.
Александр хорошая статья,главное всё доступно объяснили,а то нагородят огород 5 высших не помогут.Будим применять,ну я думаю в IE даже в последней не чего не покажет(устала с ним).Спасибо! ❗
Пожалуйста. IE9 сейчас практически все новые эффекты поддерживает. Другое дело-версии 8, 7, 6.. Там уже приходится заниматься магией. 🙂
В IE9 тени от шрифтов не отображаются не какими способами.Испробовала штук 5.Просто караул!
Ну да, есть такая беда..