Изучаем CSS: тень блока
Желание повысить видимость текста или блока, сделать его более красочным подталкивает нас к всевозможным приемам таким, как, например, тени CSS. И если в Photoshop это делается очень быстро и элементарно, то в CSS придется немного потрудиться. А теперь обо всем по порядку.
- Как сделать тень в CSS – коротко о главном
- Как сделать тень в CSS - два варианта реализации
- Базовая тень в CSS
- Размытая тень
- Двойная тень текста CSS
- Тень по бокам блока в CSS
- Внутренняя тень CSS
- Внутренняя тень блока в CSS - inset в box-shadow
- Внутренняя тень текста CSS: inset в text-shadow
- Тень блока div в CSS
- Тень внизу блока в CSS
- Тень картинки в CSS
- Тень шрифта в CSS
- Тень внутри блока в CSS
- Тень вокруг блока в CSS
- Тень внизу блока в CSS
- Генераторы CSS-теней – эффективные решения
Как сделать тень в CSS – коротко о главном
Если вы зададите поисковику запрос «как сделать тень в CSS», то в абсолютном большинстве случаев в выдаче вы найдете ссылку на CSS3. С его приходом эти и другие дизайнерские эффекты создавать стало гораздо проще.
Как сделать тень в CSS - два варианта реализации
- Тени блока в CSS - box-shadow. Это свойство состоит из нескольких параметров:
Vertical offset и horizontal offset — это вертикальное и горизонтальное смещение. С помощью этих параметров мы задаем направление, в котором объект будет отбрасывать тень:
Чтобы сделать жесткую CSS тень, установите степень размытия 0 или вообще не задавайте это значение. Если требуется задать несколько свойств блока, укажите их через запятую.
- Тени текста в CSS - text-shadow
Свойство text-shadow поддерживают все популярные браузеры (Google Chrome, Firefox, Opera, Safari). Text-shadow имеет четыре параметра:
- Смещение по горизонтали (положительное – вправо, отрицательное – влево);
- Смещение по вертикали (положительное - вниз, отрицательное – вверх);
- Радиус размытия;
- Цвет тени.
По синтаксису text-shadow во многом напоминает box-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
.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 inset:
Внутренняя тень блока в CSS - inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:
Если вы сумели разобраться с основным синтаксисом свойства box-shadow, то сделать внутреннюю тень CSS вам не составит труда. Единственный нюанс - можно дополнительно указать цвет в формате RGBA:
Альфа-значение будет отвечать за прозрачность тени:
Внутренняя тень текста CSS: inset в text-shadow
Для создания внутренней тени текста, недостаточно просто добавить inset в код:
Сначала можно применить к 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); }
Тень внизу блока в CSS
.boxShadow1 {
width: 80%;
max-width: 550px;
margin: 1em auto;
padding: 1em;
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2)}
Тень картинки в 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 {
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;}
Тень внутри блока в 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;}
Тень вокруг блока в CSS
.boxShadow8 {
width: 80%;
max-width: 550px;
margin: 2em auto;
padding: 1em;
box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1); }
Тень внизу блока в CSS
.boxShadow1 {
width: 80%;
max-width: 550px;
margin: 1em auto;
padding: 1em;
box-shadow: 0 6px 4px -4px rgba(0, 0, 0, .2);}
Кроме того, можно поместить тень внизу блока и поменять ее цвет и степень размытия.
Генераторы CSS-теней – эффективные решения
Для упрощения создания нужных эффектов существуют специальные CSS3-генераторы. Вот самые удобные и функциональные из них:
CSS3 Generator
С помощью CSS3 Generator можно создать до десяти разных эффектов, таких как, например, закругленные углы, плавный переход, тень блока CSS. Генератор очень прост и удобен в использовании:
CSS Gradient generator
В этом генераторе собраны все инструменты для создания идеального CSS-градиента:
CSS button generator
Это один из самых продвинутых CSS-генераторов. Установите параметры, скопируете сгенерированный код и готово!
CSS3Gen
Хороший генератор тени CSS, позволяющий создавать полезные фрагменты и с легкостью переносить их в свой проект. Этот CSS3-генератор позаботится обо всех префиксах для популярных браузеров:
CSS3 Please
Отличный вариант для тестирования CSS3-кода: с помощью редактора вносите изменения в CSS-стили, и блок мгновенно изменится, а вы сможете увидеть результат:
Удачной работы!