Уроки CSS

Эффект тени CSS

Целью урока является показать ещё один атрибут "каскадных таблиц стилей" (CSS), с помощью которого обычному элементу можно придать особенный вид. Этот атрибут – bоx- shadow:

Данный атрибут добавляет тень к элементу и причём теней может быть несколько (они перечисляются через запятую).

Существует два вида записи:

Первый – сдвиг по X, сдвиг по Y, радиус тени, rgb-цвет, степень размытия (от 0.1 до 1);

RGB-цвет расшифровывается, как Red Green Blue, если вы воспользуетесь генератором html-цветов, то заметите, что помимо html-кода цвета есть ещё и три строчки с теми названиями, в каждой из них число. Код сгенерированного цвета записывают в виде трёх чисел через запятую.

Ниже представлен пример, наглядно демонстрирующий, выше описанное – квадратный блок с тенью слева. Теню будет иметь чёрный цвет ( rgba(0,0,0,… );

Пример:

Код:

<style>
#shed_left {
  width: 100px;
  height: 100px;
  background: #8FD532;
  color: White;
  padding: 10px;
  margin: 10px;
  font-size: 28px;
  text-align: center;
  box-shadow: -4px 2px 8px rgba(0,0,0,0.5);
}
</style>
  
  <div id="shed_left">
  Тень слева
  </div>

Как видно из примера – тень смещена на 4 пикселя влево и 2 пикселя вниз и хоть цвет тени чёрный, но из-за того что степень размытия 0.5 цвет тени размытого серого цвета.

Второй способ задания тени – сдвиг по X, сдвиг по Y, размытие, радиус, цвет.

Для примера сделаем блок, у которого тень будет справа.

Блок:

Код:

 <style>
#shed_right {
  width: 100px;
  height: 100px;
  background: #8FD532;
  color: White;
  padding: 10px;
  margin: 10px;
  allign: right;
  font-size: 28px;
  text-align: center;
  box-shadow: 4px 2px 8px 2px #A3A3A3;
}
</style>
  
  <div id="shed_right">
  Тень справа
  </div>

Актуально обратить внимание на то, что тень можно задать и тексту. Ниже показан блок с текстом внутри него и тексту заданы некоторые параметры тени (1-ым способом). У блока закруглённые углы и тень, заданная для него, автоматически "закругляется."

Блок:

Код:

  <style>
#bord_shed {
  width: 400px;
  height: 100px;
  background: #BDF181;
  color: White;
  padding: 10px;
  margin: auto;
  border: 1px solid Yellow;
  border-radius: 16px;
  font-size: 28px;
  text-align: center;
  text-shadow: -4px 3px 8px rgba(0,0,0,0.6);
  box-shadow: 0 0 40px rgba(255,217,0,0.9);
}
</style>
  
  <div id="bord_shed">
  Тень вокруг блока и у текста
  </div>

Теперь будет продемонстрировано то, что можно задать сразу несколько теней. В этом примере их будет две и, причём, одна из теней задана внутри блока (inset) светло-зелёного цвета.

Пример:

Код:

 <style>
#twoth_shed {
  width: 350px;
  height: 90px;
  background: #8FD532;
  color: White;
  padding: 10px;
  margin: auto;
  border-radius: 16px;
  font-size: 20px;
  text-align: center;
  box-shadow:
      inset 5px 6px 3px rgba(203,255,144,0.4), 
      3px 3px 4px rgba(0,0,0,0.6);
}
</style>
  
  <div id="twoth_shed">
  <br>
  Тень внутри блока и под ним
  </div>

Блок похож на объёмную фигуру.

Ну и напоследок зададим последнему блоку ещё пару теней.

Код:

<style>
#theard_shed {
  width: 350px;
  height: 90px;
  background: #8FD532;
  color: White;
  padding: 10px;
  margin: auto;
  border-radius: 16px;
  font-size: 20px;
  text-align: center;
  box-shadow:
      inset 5px 6px 3px rgba(203,255,144,0.4), 
      3px 3px 4px rgba(0,0,0,0.6),
	  -2px -2px 4px rgba(223,152,0,0.7),
	  0 0 20px 3px Yellow;
}
</style>
  
  <div id="theard_shed">
  <br>
  Тень внутри блока, снизу, сверху и вокруг него
  </div>

◄ Предыдущий урок

Содержание

Следующий урок ►