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

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

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;
}

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

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

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

На этом все.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024