Ефект тіні css - уроки css

Ефект тіні CSS

Метою уроку є показати ще один атрибут "каскадних таблиць стилів" (CSS), за допомогою якого звичайного елементу можна надати особливий вид. Цей атрибут - bоx- shadow:

Даний атрибут додає тінь до елементу і причому тіней може бути кілька (вони перераховуються через кому).

Існує два види запису:

Перший - зсув по X. зрушення по Y. радіус тіні, rgb-колір, ступінь розмиття (від 0.1 до 1);

RGB-колір розшифровується, як Red Green Blue, якщо ви скористаєтеся генератором html-кольорів. то помітите, що крім html-коду кольору є ще й три рядки з тими назвами, в кожній з них число. Код згенерованого кольору записують у вигляді трьох чисел через кому.

Нижче представлений приклад, що наочно демонструє, вище описане - квадратний блок з тінню зліва. Теню матиме чорний колір (rgba (0,0,0, ...);

Як видно з прикладу - тінь зміщена на 4 пікселя вліво і 2 пікселя вниз і хоч колір тіні чорний, але через те що ступінь розмиття 0.5 колір тіні розмитого сірого кольору.

Другий спосіб завдання тіні - зсув по X. зрушення по Y. розмиття, радіус, колір.

Для прикладу зробимо блок, у якого тінь буде праворуч.

Актуально звернути увагу на те, що тінь можна задати і тексту. Нижче показаний блок з текстом всередині нього і тексту задані деякі параметри тіні (1-им способом). У блоку закруглені кути і тінь, задана для нього, автоматично "закруглюється."

Тінь навколо блоку і у тексту

Тепер буде продемонстровано те, що можна задати відразу кілька тіней. У цьому прикладі їх буде дві і, причому, одна з тіней задана всередині блоку (inset) світло-зеленого кольору.


Тінь всередині блоку і під ним

Блок схожий на об'ємну фігуру.

Ну і наостанок поставимо останньому блоку ще пару тіней.


Тінь всередині блоку, знизу, зверху і навколо нього

Схожі статті