Приклади тіней на css.

Відео: Уроки по CSS / CSS3. Частина 14. Тіні (box-shadow)

Ми вже розбирали з вами властивість box-shadow, але мало хто може за допомогою нього зробити класні тіні. Сьогодні я хочу показати вам прості приклади використання цієї властивості для створення знаменитих ефектів.

Базова тінь

створимо html і css файли. В html пропишемо наступне:

 
lang="En"gt; 




 
charset="UTF-8"gt; 
Basic Shadow 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Shadow"gt;

А тепер перейдемо до css

body { 
 background:# ccc- 
 margin:0- 
} 
 
div { background-color:# fff- 
 width:400px- 
 height:200px- 
 padding:15px- 
 margin:15px- 
float: left- 
} 
 
.shadow { 
 box-shadow:5px5px rgba(150,150,150,.5) - 
}

Пояснювати тут, чесно кажучи, нічого. Єдине, в тіні ми зрушуємо її вправо і вниз на 5px і задаємо колір, використовуючи rgba, з прозорістю 0.5. У підсумку отримуємо просту, але симпатичну тінь

проста тінь

Розмита поширена тінь

Html у нас такий:

Відео: Тінь блоку css

 
lang="En"gt; 




 
charset="UTF-8"gt; 
Blurred Spread Shadow 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Shadow"gt;Some text ...

А css ось такий:

body { 
 margin:0- 
 padding:0- 
 background:# ccc- 
} 
 
.shadow { 
 margin:30px- 
 background:# fff- 
 width:494px- 
 height:294px- 
 border-radius:3px- 
 box-shadow:020px3px-10px rgba(0,0,0,.3) - 
 font:15px"Sans-Serif","Times New Roman"- 
 padding:3px- 
}

Тут тінь зміщена по осі x на 0px, по осі y на 20px, розмиття задано невелике - 3px. Найголовніше - поширення тіні. Ми його ставимо негативним в 10px. У підсумку, ось така красива тінь, яку, наприклад, можна використовувати під слайдерами

Розмита поширена тінь

падаюча тінь

Html ось такий:

 
lang="En"gt; 




 
charset="UTF-8"gt; 
Drop Shadow 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Container"gt; 
src="Ball.jpg"width="250"height="250"alt="М`яч"gt;

В html файлі нічого незвичайного, крім того, що я використовую картинку футбольного м`ячика в блоці .container. перейдемо до css

body { 
 background-color:# ccc- 
 margin:0- 
} 
 
.container { 
 padding:20px50px- 
 background-color: black- 
} 
 
.container img { 
-webkit-filter: drop-shadow(20px20px50px white) - 
}

падаюча тінь

Тут ми вже не використовуємо властивість box-shadow, а використовуємо властивість filter. Воно поки що погано підтримується, але вже працює в webkit браузерах останніх версій. У нашому випадку ми використовуємо функцію drop-shadow, в яку передаємо вже знайомі нам з властивості box-shadow параметри: x, y, розмиття і колір.

Отже, на цьому все. Сподіваюся, що ви зможете знайти застосування цих ефектів тіней і придумаєте свої, цікавіші. Успіхів!

Поділися в соціальних мережах:

Схожі