Столкнулся с интересным примером или задачей - не знаю, как сказать.

Состоит в том, чтобы сделать для картинки тень, причем внутреннюю тень. Казалось бы, задачу просто решить - с помощью box-shadow или text-shadow.

Но не все так просто. В Интернете есть хорошие статьи на эту тему, в частности, на Хабре имеет очень детальный обзор данного способа.

Но пример так мне понравился, что решил его описать у себя - повторение мать учения, как говорится.

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

Первый способ - это “обернуть” ее в дополнительный блок, которому прописать внутреннюю тень. Главное тут - не забыть “опустить” изображение внутри блока, чтобы тень “легла” на нее.

Код такого способа представлен ниже:

 class="block1">
  src="images/charlize_theron_1.jpg" width="480" height="300">
.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.

Код второго способа показан ниже:

 class="block2">
.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;
}

Картинка - результат работы этого кода:

Картинка, вложенная в блок в качестве фонового изображения

Код более краткий. Единственный минус - изображение должно быть только в качестве фона для блока.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке