Столкнулся с интересным примером или задачей - не знаю, как сказать.
Состоит в том, чтобы сделать для картинки тень, причем внутреннюю тень. Казалось бы, задачу просто решить - с помощью 1
box-shadow
1
text-shadow
Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.
Но пример так мне понравился, что решил его описать у себя - повторение мать учения, как говорится.
Данную задачу можно решить двумя способами. Ни один из них не является достаточно универсальным, это всего лишь выход из положения. Итак, имеется изображение, для которого нужно создать внутреннюю тень.
Первый способ - это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут - не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.
Код такого способа представлен ниже:
<div class="block1">
<img src="images/charlize_theron_1.jpg" width="480" height="300">
</div>.block1{
box-shadow: inset 0 0 6px 4px rgba(0,0,0,.7);
width: 480px;
height: 300px;
}
.block1 img{
position: relative;
z-index: -2;
}И результат работы этого кода:
Все хорошо - просто и работает. Единственный минус - нарушение семантики HTML-кода. Ведь, чтобы добавить для картинки всего лишь тень, потребовалось создать лишний HTML-элемент, тем самым засоряя документ.
Второй способ - более правильный с точки зрения семантики. Чтобы “набросить” тень на изображение, нужно поместить его в блок в качестве фонового изображения.
В остальном все остается точно таким же, как и в первом примере. Также создается внутренняя тень для блока, но при этом нет необходимости “опускать” картинку с помощью z-index.
Код второго способа показан ниже:
<div class="block2"></div>.block2{
box-shadow: inset 0 0 12px 8px rgba(0,0,0,.6);
width: 481px;
height: 361px;
background: url(images/charlize_theron_2.jpg) 0 0 no-repeat;
}Картинка - результат работы этого кода:
Код более краткий. Единственный минус - изображение должно быть только в качестве фона для блока.
На этом все.