Тень блока – отличный эффект трехмерности, которая придает блокам сайта реалистичность и объемность. Когда я начинал изучать (примерно 5-6 лет тому назад), я не догадывался о существовании , и мне при создании сайта приходилось делать тень блоков изображением. Это было очень неудобно, да и не всегда получалось так, как хотелось. Спасибо возможностям CSS, которые упростили труд веб-дизайнеров. Сегодня я покажу возможность в CSS, как создать для блоков тень.
Для добавления тени в CSS используется свойство box-shadow .
1. сдвиг тени по горизонтали (до 100px вправо, до -100px влево);
2. сдвиг по вертикали (до 100px вниз, до -100px вверх);
3. размытие тени (0 - четкая тень, 100 - сильно размытая тень);
4. растяжение тени (до 100px - растяжение, до -100px - сжатие);
5. цвет тени;
6. inset - тень внутри элемента, без inset тень будет наружу.
Когда я начинал изучать HTML (примерно 5-6 лет тому назад), я не догадывался о существовании CSS, и мне при создании сайта приходилось делать тень блоков изображением.
Результат :
Таблица с тенями:
| код | Пример: |
| box-shadow: 0px 13px 17px -6px #000000; |  |
| box-shadow: 10px -10px 0px -6px #000000; |  |
| box-shadow: 10px 13px 0px -6px #000000; |  |
| box-shadow: 1px 1px 32px -6px #000000; |  |
| box-shadow: -1px 23px 41px -25px #000000; |  |
| box-shadow: -1px 23px 41px -25px #4dc13c; |  |
| box-shadow: -10px -10px 40px -6px #000000 inset; |  |
| box-shadow: 7px 10px 23px -8px #92a9e7; |  |
С помощью тени можно создать объемный блок:
| Код | Пример |
| box-shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190,30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9px rgb(184,159,0); |  |
| box-shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0); |  |
| box-shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191,31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px -7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0); |  |
| box-shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0); |  |
Blok1 { width: 70%; 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; }
Результат :
Blok1 { width: 30%; max-width: 550px; margin: 2em auto; padding: 1em; background: #DADADA; box-shadow: 6px 6px #BBBBBB, 12px 12px #919191; }
Результат :
Blok1 { width: 30%; margin: 0 auto; padding: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px #FFFF00, -20px 0 0 -10px #FF3399; }
Результат :
С помощью тени можно сделать красивую рамку.
Красивая рамка с помощью свойства box - shadow
Blok1
{
width: 20%;
max-width: 250px;
margin: 0 auto;
padding: 1em;
border: 2px dashed #999;
box-shadow: 0 0 0 1px #999,
inset 0 0 0 1px #999;
}
Результат
:
Blok1
{
width: 30%;
max-width: 250px;
margin: 2em auto;
padding: 4em;
background: #dcc005;
box-shadow: 0 0 4em 4em #fff inset;
}
Результат
:
Blok1
{
max-width: 250px;
margin: 0 auto;
padding: 1em;
border-radius: 10px;
background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255,.35));
box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px;
}
Результат
:
Тень блока в CSS
сайт
Результат
:
Вот таких красивых эффектов можно добиться при помощи теней в CSS. Придумайте что-то новенькое и оригинальненькое, все в ваших руках. Знание и возможности у вас есть.
А на днях я опубликую статью, как можно создавать без использования фотошопа. Так что, будьте в центре событий и подписывайтесь на обновления моего блога. Не пропустите интересную для вас тему. Ну, все, удачи!!!
Сегодня мы узнаем как сделать CSS тени без картинок. После изучения этого урока вам уже не понадобится CSS генератор тени.
В чем основное достоинство теней, созданных при помощи CSS3, так это в простоте реализации и уменьшении числа запросов к серверу (поскольку мы больше не используем картинки). Чтобы сделать тень на CSS нам понадобится тег div и CSS свойство box-shadow . Вам не понадобится дополнительная разметка, поскольку мы создим псевдо элементы :after и :before , которые поместим за основным объектом (div с классом block
).
Взгляните на HTML код, для которого мы будем создавать CSS3 тень:
Содержимое
Далее вы сможете посмотреть готовые примеры и код, необходимый для их реализации. С целью минимизации текста на странице, мы опустим CSS свойства с браузерными префиксами. Полный код можно увилдеть, нажав на соответствующую примеру ссылку "Пример".
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
border-radius:4px;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}
.block:after {
right:10px;
left:auto;
transform:rotate(3deg);
}
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
border:1px solid #efefef;
border-radius:0 0 120px 120px / 0 0 6px 6px;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
bottom:12px;
left:10px;
width:50%;
height:55%;
max-width:200px;
box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
transform:skew(-8deg) rotate(-3deg);
}
.block:after {
right:10px;
left:auto;
transform:skew(8deg) rotate(3deg);
}
С помощью тени можно придать блоку перспективу. Смотреть пример .
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
}
.block:before {
left:80px;
bottom:5px;
width:50%;
height:35%;
max-width:200px;
box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
transform:skew(50deg);
transform-origin:0 100%;
}
.block:after {
display:none;
}
CSS тень у проподнятого блока. Смотреть пример .
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5),
0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
}
Пример CSS3 тени для вертикально согнутого блока. Смотреть пример .
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
}
.block:before {
top:10px;
bottom:10px;
left:0;
right:50%;
box-shadow:0 0 15px rgba(0,0,0,0.6);
border-radius:10px / 100px;
}
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
}
.block:before {
top:10px;
bottom:10px;
left:0;
right:0;
box-shadow:0 0 15px rgba(0,0,0,0.6);
border-radius:10px / 100px;
}
Пример CSS3 тени для горизонтально согнутого блока. Смотреть пример .
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
}
.block:before {
top:50%;
bottom:0px;
left:10px;
right:10px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
border-radius:100px / 10px;
}
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
}
.block:before {
top:0px;
bottom:0px;
left:10px;
right:10px;
box-shadow:0 0 15px rgba(0,0,0,0.6);
border-radius:100px / 10px;
}
CSS3 тень для повернутого блока. Смотреть пример .
.block {
position:relative;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
border-radius:4px;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:none;
transform:rotate(-3deg);
}
.block > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0px;
bottom:0;
left:0;
right:0px;
background:#fff;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3),
0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.block:before,
.block:after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
transform:rotate(-3deg);
}
.block:after {
right:10px;
left:auto;
transform:rotate(3deg);
}
Пояснения:
, — свойства языка CSS, используются для создания теней. , , — параметры свойства теней. , , , — свойства CSS, отвечают за изменение размеров и местоположения элементов. - — тег, отвечает за создание ссылок.
- Селекторы — своего рода ссылки, с помощью которых CSS определяет к каким именно элементам нужно применять те или иные стили.
- Hover
— селектор состояния.
— свойство анимированного изменения объекта.
Тени нередко используются для получения эффекта объемности. Они позволяют придать текстам и блокам уникальный стиль, а в сочетании с особыми шрифтами, может получиться отличный эффект.
CSS предлагает нам столько пространства для фантазии и экспериментов, что вам потребуются годы для того, чтобы опробовать их все.
В этой статье мы подробно опишем создание теней в CSS. Кроме обычных внешних теней, мы покажем как создавать внутренние тени и тени состояния.
CSS — тень блока. Свойство box-shadow
html{
background: #fff;
}
body{
width: 80%;
margin: 0 auto;
background-color: rgba(150,60,60,0.54)
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88)
}
Инструмент позволяет нам создать одну или несколько теней вокруг блока, с любым цветом.
По сути, что такое тень? Это точная копия площади элемента, которая имеет определенный цвет и расположение. Эти параметры можно задавать с помощью свойства box-shadow.
Свойства тени используются в таком порядке:
- Перемещение по горизонтали.
- Перемещение по вертикали.
- Уровень расплывчатости.
- Растяжение.
- Цвет тени.
Именно в таком порядке нужно указывать параметры тени. Главное, не перепутать значение, так как первые 4 задаются одинаково, с помощью числовых значений — , , и так далее.
Первый параметр, которое называется — смещает тень по горизонтали относительно блока. Принимает любые значения, включая отрицательные.
Отрицательные значения смещают тень влево, а положительные — вправо. Значение параметра может быть равно 0 при размытии теней по вертикальной оси.
Далее по порядку идет свойство . Отвечает за перемещение тени по вертикали. Тоже принимает любые значения — положительные и отрицательные. Отрицательные значения смещают тень вверх, а положительные — вниз.
Параметру может быть присвоено значение 0. Обычно используется при горизонтальном размытии теней.
Внимание! Советуем указывать значение в пикселях. Можете использовать и другие значения — , , % и другие, но делать это не рекомендуется. Все эти величины довольно большие для создания теней. Указав их можно переборщить с размерами.
3 значение — или размытие. Данное значение вводить не обязательно, без его указания тени всё равно будут работать.
Заданное значение определяет радиус, по которому будет размываться тень. Отрицательные значения не указываются.
Здесь можно использовать и более крупные величины. Сильное размытие поможет создать красочный эффект, но лишь в некоторых ситуациях.
Предпоследнее значение, которое отвечает за растяжение тени. Оно также является необязательным, но может повысить красочность вашей тени.
Расширение происходит за счет растяжения центральной сплошной части тени, которая находится между размытыми краями.
Данный параметр принимает любые значения, как положительные, так и отрицательные. Положительные значения растягивают тень, а отрицательные наоборот, уменьшают.
И последний параметр — . Его также необязательно указывать, так как по умолчанию тень блока имеет собственный цвет — черный.
Для изменения цвета подойдет любая цветовая система — , а также стандартные цвета.
Внимание! Если вы хотите чтобы свойство работало в Safari, то этот параметр должен быть указан, даже если вы используете стандартный черный цвет.
Внутренняя тень — CSS
html{
background: #fff;
}
body{
width: 80%;
margin: 0 auto;
background-color: rgba(150,60,60,0.54)
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88) inset;
}
Итак, давайте рассмотрим первый пример применения теней. Здесь мы будем рассматривать создание внутренней тени для блока body.
Для начала откройте наш HTML документ и заполните его. Можете не указывать никакие теги, не заполнять контент, главное создайте тег
.
Открываем наш CSS документ, записываем тег
, он будет нашим основным селектором.
Далее открываем фигурные скобки и записываем свойство . Задаем расположение, размытие, растяжение. Как задавать эти значения вы уже знаете. После этого задаем цвет тени, мы сделали белый, но вы можете задать по своему вкусу.
Теперь самое главное. Для того, чтобы создать внутреннюю тень блока в CSS нужно прописать значение inset. Можете указать его сразу после определения цвета.
В итоге, у нас получился вот такой блок:
HTML/CSS — тень текста
html{
background: #fff;
}
body{
width: 80%;
margin: 0 auto;
background-color: rgba(150,60,60,0.54)
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88) inset;
}
div{
margin: 150px;
box-shadow: -1px 5px 5px 5px rgba(77,63,63,0.88);
font-size: 25px;
}
Создается похожим образом, но вместо box-shadow используется свойство . Параметры свойства идут в следующем порядке.
- Сдвиг по горизонтали.
- Сдвиг по вертикали.
- Радиус размытия. Необязательно.
- Цвет.
Как видите, в этом свойстве нет параметра растяжения. Размер тени всегда будет идентичен размеру текста, исправить это не получится.
Очень удобно накладывать тени друг на друга. Для этого нужно перечислить несколько групп параметров
Первая тень будет располагаться ближе к тексту, а вторая выше её. Напоминает работу со свойствами outline и border, но здесь можно создавать и 2, 3 и больше теней.
Тени при наведении — CSS
Теперь давайте рассмотрим создание теней для определенного состояния. В нашем примере будет использоваться кнопка.
Для того, чтобы создать тень для кнопки, её для начала нужно разместить. Открываем тег a, записываем для него класс button и любое текстовое значение, для лучшего отображения.
Сначала зададим размещение, с помощью свойства margin и увеличим кнопку до определенных размеров. Для увеличения можно использовать свойства width и height, либо же воспользоваться свойством padding.
Теперь задаем цвет фона, текста и рамку. Наша кнопка готова, приступаем к созданию тени.
Сначала создадим обычную тень, небольшого размера, с помощью box-shadow. Она будет видна по умолчанию, без наведения на кнопку.
Сделаем самый простой эффект — увеличим тень. Можете сделать её размытой или изменить растяжение — по вкусу.
Для лучшего эффекта зададим свойство transition для обычной ссылки, поставим время в 0.5s.
Теперь у нас есть отличная кнопка с красивой тенью, которая при наведении будет плавно расширяться.
Заключение
В этой статье мы ознакомились со всеми основными способами создания теней. Мы разобрали все свойства и параметры теней.
Все элементы, которые были представлены на скриншотах вы сможете найти в папке с исходниками. Если хотите, можете самостоятельно изучить их и поэкспериментировать со значениями. Может быть у вас получится намного лучше, чем это сделали мы.
Здравствуйте, дорогие читатели . Сегодня мы с Вами будем делать красивую тень для блоков при помощи CSS
. Я думаю, что это очень сильно пригодится Вам, тем более если Вы делаете шаблоны. А блоки с тенью смотрятся очень привлекательно и современно.
Поддержка браузеров
В основном все современные браузеры поддерживают эффекты тени:
- Internet Explorer 9.0 и выше;
- Firefox 3.5 и выше;
- Chrome 1 и выше;
- Safari 3 и выше;
- Opera 10.5 и выше.
Ещё хотелось бы упомянуть один не маловажный момент: для некоторых браузеров мы будем использовать некие префиксы. Для Firefox используется -moz- , для Chrome и Safari нужно использовать префикс -webkit.
Ну а сейчас переходим к самой интересной части. Давайте рассмотрим все тени по отдельности, эффектов будет 8.
Эффект тени 1
В данном примере тень от блока находится снизу.
HTML
Эффект 1
CSS
text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 1 * ===============================================*/ .effect1{ -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }Эффект тени 2
В этом примере тень от блока идёт слева и справа, а по середине её нет. Получается очень интересный эффект.
HTML
Эффект 2
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 2 * ===============================================*/ .effect2 { position: relative; } .effect2:before, .effect2:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .effect2:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; }Эффект тени 3
Здесь тень от блока только слева.
HTML
Эффект 3
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 3 * ===============================================*/ .effect3 { position: relative; } .effect3:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); }Эффект тени 4
Тень справа.
HTML
Эффект 4
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 4 * ===============================================*/ .effect4 { position: relative; } .effect4:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); }Эффект тени 5
В данном случае тень с двух сторон сильнее сдвинулась вниз.
HTML
Эффект 5
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 5 * ===============================================*/ .effect5 { position: relative; } .effect5:before, .effect5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } .effect5:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; }Эффект тени 6
Здесь эффект изогнутых теней на дне блока.
HTML
Эффект 6
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 6 * ===============================================*/ .effect6 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect6:before, .effect6:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect6:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }Эффект тени 7
Такой же эффект только тень снизу и сверху блока.
HTML
Эффект 7
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 7 * ===============================================*/ .effect7 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect7:before, .effect7:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:0; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect7:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }Эффект тени 8
Эффект изогнутых теней по бокам блока.
HTML
Эффект 8
CSS
.box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height:200px; background:#FFF; margin:40px auto; } /*================================================== * Effect 8 * ===============================================*/ .effect8 { position:relative; -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect8:before, .effect8:after { content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:10px; bottom:10px; left:0; right:0; -moz-border-radius:100px / 10px; border-radius:100px / 10px; } .effect8:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); }Вот и всё дорогие друзья. Если Вам что либо будет не понятно, обязательно спрашивайте в комментариях. До скорой встречи.
Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
Синтаксис
Прежде всего рассмотрим два основных способа реализации теней в CSS.box-shadow
Конструкция box-shadow содержит несколько различных значений:
Horizontal offset и vertical offset - горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
Край тени просто размывается. При различном значении spread radius видим следующее:
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius , то они будут равны 0.
text-shadow
Синтаксис очень похож на box-shadow :
Значения аналогичные, только нет spread-shadow . Пример использования:
Inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:
Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):
Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:
Изображения с тенями
Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div . Для начала вот обычный код картинки: 
Логично предположить, что добавить тень можно так:
Img { 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; }
Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ - это установить изображение фоном нужного блока:
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); }
Вот, что может получится при использовании внутренних теней:
Inset в text-shadow
Для реализации внутренней тени текста простое добавление в код inset не работает:
Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:
H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); }
Вот, что получается:
Добавляем секретный ингредиент background-clip , который обрезает все, что выходит за пределы текста (на темный фон):
H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
