CSS тень или как повысить видимость блока или текста

Желание повысить видимость текста или блока, сделать его более красочным подталкивает нас к всевозможным приемам таким, как, например, тени CSS. И если в Photoshop это делается очень быстро и элементарно, то в CSS придется немного потрудиться. А теперь обо всем по порядку.

Тень в CSS – коротко о главном

Если вы зададите поисковику запрос «как сделать тень в CSS», то в абсолютном большинстве случаев в выдаче вы найдете ссылку на CSS3. С его приходом эти и другие дизайнерские эффекты создавать стало гораздо проще.

Два варианта реализации теней в CSS

  • Тени блока в CSS — box-shadow. Это свойство состоит из нескольких параметров:
Тени блока в CSS

Vertical offset и horizontal offset — это вертикальное и горизонтальное смещение. С помощью этих параметров мы задаем направление, в котором объект будет отбрасывать тень:

Vertical offset и horizontal offset

Чтобы сделать жесткую CSS тень, установите степень размытия 0 или вообще не задавайте это значение. Если требуется задать несколько свойств блока, укажите их через запятую.

  • Тени текста в CSS — text-shadow

Свойство text-shadow поддерживают все популярные браузеры (Google Chrome, Firefox, Opera, Safari). Text-shadow имеет четыре параметра:

  • Смещение по горизонтали (положительное – вправо, отрицательное – влево);
  • Смещение по вертикали (положительное — вниз, отрицательное – вверх);
  • Радиус размытия;
  • Цвет тени.

По синтаксису text-shadow во многом напоминает box-shadow:

По синтаксису text-shadow во многом напоминает box-shadow

При этом spread-shadow отсутствует. Вот так это может выглядеть на примере:

При этом spread-shadow отсутствует

Базовая тень в CSS

Создадим css файл и укажем в нем следующее:

body {
  background: #ccc;
  margin: 0;}

div {   background-color: #fff;
  width: 400px;
  height: 200px;
  padding: 15px;
  margin: 15px;
  float: left;}

.shadow {
  box-shadow: 5px 5px rgba(150,150,150,0.5);}
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Shadow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="shadow"></div>
</body>
</html>

Смещать тень можно изменяя значение 5px, а задавать тот или иной цвет, применяя rgba. В таком случае у нас получается вот такая тень:

получается вот такая тень

Размытая тень

CSS будет вот такой:

body {
  margin: 0;
  padding: 0;
  background: #ccc;}

.shadow {
  margin: 30px;
  background: #fff;
  width: 494px;
  height: 294px;
  border-radius: 3px;
  box-shadow: 0 10px 2px -10px rgba(0,0,0,0.3);
  font: 15px "Sans-Serif", "Times New Roman";
  padding: 3px;} 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blurred Spread Shadow</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="shadow">Some text...</div>
</body>
</html>

Получаем вот такую тень, которая хорошо будет смотреться под слайдерами:

под слайдерами

Двойная тень текста CSS

Синтаксис:

shadow-text-double {
text-shadow:4px 4px 10px #FFDD33, 1px 1px 1px #D50000;}

В одном элементе можно использовать несколько теней. Для этого необходимо прописать параметры обеих теней после двоеточия, разделив их запятой:

Двойная тень текста CSS

Тень по бокам блока в CSS

.boxShadow2 { 
width: 80%; 
max-width: 550px; 
margin: 10px auto; 
padding: 1em; 
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 
-23px 0 20px -23px rgba(0, 0, 0, .8), 
23px 0 20px -23px rgba(0, 0, 0, .8), 
0 0 40px rgba(0, 0, 0, .1) inset; }
Тень по бокам блока в CSS

Внутренняя тень в CSS

Чтобы «развернуть» тень объекта внутрь, достаточно добавить в CSS inset:

Внутренняя тень в CSS

Внутренняя тень блока в CSS — inset в box-shadow

Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:

inset в box-shadow

Если вы сумели разобраться с основным синтаксисом свойства box-shadow, то сделать внутреннюю тень CSS вам не составит труда. Единственный нюанс — можно дополнительно указать цвет в формате RGBA:

RGBA

Альфа-значение будет отвечать за прозрачность тени:

Альфа-значение

Внутренняя тень текста CSS: inset в text-shadow

Для создания внутренней тени текста, недостаточно просто добавить inset в код:

inset в text-shadow

Сначала можно применить к h1 светлую тень и темный фон:

h1 {
  background-color: #6666;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(150,150,150,0.5);}

У вас получится:

У вас получится

Тень блока div в CSS

Создает тень div CSS:

.boxShadow { 
width: 80%; 
max-width: 550px; 
margin: 1em auto; 
padding: 1em; 
box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
Тень блока div в CSS

Тень внизу блока в CSS

.boxShadow1 { 
width: 80%; 
max-width: 550px; 
margin: 1em auto; 
padding: 1em; 
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2)}
Тень внизу блока в CSS

Тень картинки в CSS

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

<img src="http://site.com/800/400/transport/2" alt="airplane">

Можно добавить тень картинки CSS следующим образом:

box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);

Однако ее плохо видно:

Однако ее плохо видно

Решить эту проблему можно, обернув изображение в div:

div {
height: 200px;
width: 400px;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);}
	 
img { 
height: 200px;
width: 400px;
position: relative;
z-index: -2;}
изображение в div

Далее следует установить изображение фоном нужного блока:

div {
height: 200px;
width: 400px;
background: url(http://lorempixum.com/400/200/transport/2);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);}
изображение фоном

Тень шрифта в CSS

Тень шрифта с множеством оттенков:

p {font-size: 4em; text-shadow:3px 3px 10px red,-3px -3px 10px yellow;color: #101921;}
Тень шрифта
p {background-color: #000;
        padding:90px 0 0;
        margin: 20px auto;
        font-family: Arial;
        font-size: 200px; 
        text-transform: uppercase; 
        color: #fff;
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;}
17

Тень внутри блока в CSS

Добиться эффекта появления тени внутри блока, можно прописав:

body{font-family: Arial,Verdana,sans-serif;}
h2{text-align: center;margin:5px 0 10px 0;font-weight:bold;}
p{font-size:0.8em;margin-bottom:5px;}
.bsh-wrap{width:300px; border:1px solid #f28cfb; border-radius:5px; margin:25px; overflow:hidden;}
.bsh-shad{position:relative;}
.bsh-shad:after {bottom: -1px; box-shadow: 0 0 8px 0 rgba(167, 97, 166, 0.8); content: ""; height: 1px; left: 1px; position: absolute; right: 1px;}
.bsh-inner{padding:10px;}

Можно добавить тень с одной или нескольких сторон блока:

boxShadow3 { 
width: 80%; 
max-width: 550px; 
margin: 1em auto; 
padding: 1em; 
box-shadow: 0 0 40px rgba(0, 0, 0, .1) inset;}
добавить тень
.boxShadow4 { 
width: 80%; 
max-width: 550px; 
margin: 2em auto; 
padding: 4em; 
background: lightcyan; 
box-shadow: 0 0 4em 4em white inset;}
19

Тень вокруг блока в CSS

.boxShadow8 { 
width: 80%; 
max-width: 550px; 
margin: 2em auto; 
padding: 1em; 
box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1); }
Тень вокруг блока в CSS

Тень внизу блока в CSS

.boxShadow1 { 
width: 80%; 
max-width: 550px; 
margin: 1em auto; 
padding: 1em; 
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);}
Тень внизу блока в CSS

Кроме того, можно поместить тень внизу блока и поменять ее цвет и степень размытия.

Генераторы CSS-теней – эффективные решения

Для упрощения создания нужных эффектов существуют специальные CSS3-генераторы. Вот самые удобные и функциональные из них:

CSS3 Generator

С помощью CSS3 Generator можно создать до десяти разных эффектов, таких как, например, закругленные углы, плавный переход, тень блока CSS. Генератор очень прост и удобен в использовании:

CSS3 Generator

CSS Gradient generator

В этом генераторе собраны все инструменты для создания идеального CSS-градиента:

собраны все инструменты

CSS button generator

Это один из самых продвинутых CSS-генераторов. Установите параметры, скопируете сгенерированный код и готово!

скопируете сгенерированный код

CSS3Gen

Хороший генератор тени CSS, позволяющий создавать полезные фрагменты и с легкостью переносить их в свой проект. Этот CSS3-генератор позаботится обо всех префиксах для популярных браузеров:

позаботится обо всех префиксах

CSS3 Please

Отличный вариант для тестирования CSS3-кода: с помощью редактора вносите изменения в CSS-стили, и блок мгновенно изменится, а вы сможете увидеть результат:

тестирования CSS3-кода

Удачной работы!