BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Тень блока в CSS

Тень блока в CSS

2014-06-06 / Вр:22:35 / просмотров: 11359

Тень блока в CSS

Тень блока – отличный эффект трехмерности, которая придает блокам сайта реалистичность и объемность.  Когда я начинал изучать HTML (примерно 5-6 лет тому назад), я не догадывался о существовании CSS, и мне при создании сайта приходилось делать тень блоков изображением. Это было очень неудобно, да и не всегда получалось так, как хотелось. Спасибо возможностям CSS, которые упростили труд веб-дизайнеров. Сегодня я покажу возможность в CSS, как создать для блоков тень.

Для добавления тени в CSS используется свойство box-shadow.

Схема:

Тень блока в CSS

 

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>

Результат:

Тень блока в CSS

Таблица с тенями:

код Пример:
box-shadow: 0px 13px 17px -6px #000000;  Тень блока в CSS
box-shadow: 10px -10px 0px -6px #000000;  Тень блока в CSS
box-shadow: 10px 13px 0px -6px #000000;  Тень блока в CSS
box-shadow: 1px 1px 32px -6px #000000;  Тень блока в CSS
box-shadow: -1px 23px 41px -25px #000000;  Тень блока в CSS
box-shadow: -1px 23px 41px -25px #4dc13c;  Тень блока в CSS
box-shadow: -10px -10px 40px -6px #000000 inset;  Тень блока в CSS
box-shadow: 7px 10px 23px -8px #92a9e7;  Тень блока в CSS

С помощью тени можно создать объемный блок:

Код Пример
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);  Тень блока в CSS
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);  Тень блока в CSS
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);  Тень блока в CSS
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);  Тень блока в CSS

Тень по бокам блока с левой и правой стороны

.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;
 }

Результат:

Красивая рамка с помощью свойства box-shadow

Красивый блок с растушеванной тенью

 .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 без использования фотошопа.  Так что, будьте в центре событий и подписывайтесь на обновления моего блога. Не пропустите интересную для вас тему. Ну, все, удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Тень блока в CSS

  1. Юрий

    Очень полезная подборка, спасибо!

  2. Степан => автор блога Степан => автор блога

    Пожалуйста, Юрий!

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573