Тень блока – отличный эффект трехмерности, которая придает блокам сайта реалистичность и объемность. Когда я начинал изучать HTML (примерно 5-6 лет тому назад), я не догадывался о существовании CSS, и мне при создании сайта приходилось делать тень блоков изображением. Это было очень неудобно, да и не всегда получалось так, как хотелось. Спасибо возможностям CSS, которые упростили труд веб-дизайнеров. Сегодня я покажу возможность в CSS, как создать для блоков тень.
Для добавления тени в CSS используется свойство box-shadow.
Схема:
1. сдвиг тени по горизонтали (до 100px вправо, до -100px влево);
2. сдвиг по вертикали (до 100px вниз, до -100px вверх);
3. размытие тени (0 — четкая тень, 100 — сильно размытая тень);
4. растяжение тени (до 100px — растяжение, до -100px — сжатие);
5. цвет тени;
6. inset - тень внутри элемента, без inset тень будет наружу.
Пример:
<html>
<head>
<title>Тень блока в CSS</title>
<style>
.blok1
{
box-shadow:1px 5px 15px -2px #7777db;
width:300px;
padding:10px;
background:#d5ffd5;
}
</style>
</head>
<body>
<div class="blok1">
<p> Когда я начинал изучать HTML (примерно 5-6 лет тому назад), я не догадывался о существовании CSS, и мне при создании сайта приходилось делать тень блоков изображением.</p>
</div>
</body>
</html>
Результат:
Таблица с тенями:
| код | Пример: |
| 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;
}
Результат:
Многослойный блок
1)
.blok1
{
width: 30%;
max-width: 550px;
margin: 2em auto;
padding: 1em;
background: #DADADA;
box-shadow: 6px 6px #BBBBBB, 12px 12px #919191;
}
Результат:
2)
.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
<pre> .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;
}
Результат:
Неровная тень
<html>
<head>
<title>Тень блока в CSS</title>
<style>
.blok1 {
position: relative;
width: 30%;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
margin: 60px auto;
}
.blok1:before,
.blok1:after {
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.blok1:after {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<br>
<div class="blok1">
<center>
<h1>BLOGGOOD.RU </h1>
</center>
</div>
</body>
</html>
Результат:
Вот таких красивых эффектов можно добиться при помощи теней в CSS. Придумайте что-то новенькое и оригинальненькое, все в ваших руках. Знание и возможности у вас есть.
А на днях я опубликую статью, как можно создавать красивые иконки на чистом CSS без использования фотошопа. Так что, будьте в центре событий и подписывайтесь на обновления моего блога. Не пропустите интересную для вас тему. Ну, все, удачи!!!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Свойства и оформление ссылок в CSS
Как сделать плавную прокрутку к якорю на JQuery. Способ№2
Как прижать футер сайта (подвал) к низу экрана с помощью CSS
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330346 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274701 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222534 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187742 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
2 Ответов на комментарий - Тень блока в CSS
Добавить комментарий
Метки: css, эффекты для сайта
Очень полезная подборка, спасибо!
Пожалуйста, Юрий!