Ефект тіні 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) світло-зеленого кольору.
Тінь всередині блоку і під ним
Блок схожий на об'ємну фігуру.
Ну і наостанок поставимо останньому блоку ще пару тіней.
Тінь всередині блоку, знизу, зверху і навколо нього