Стильна тінь та 3D текст на CSS

Стильна тінь та 3D текст на CSS

Автор TechDude

Категория: Для веб-майстра

Ось така симпатична подвійна тінь, що робить текст ніби вирізаним з паперу, досягається за допомогою використання властивості text-shadow з двома послідовно (через кому) записаними значеннями.

Стильна тінь

text-shadow: 0 2px 0 #fff, 0 4px 0 #ccc;

Спочатку додається тінь білого кольору, зрушена вниз на 2 пікселя, а потім ще одна тінь сірого кольору, але вже зрушена на 4 пікселя. Просто і досить симпатично. Нагадаю, що перші два значення задають зсув по горизонталі і по вертикалі, відповідно, третє — розмиття.

А ось ще більш крутіше використання даної властивості — 3D текст.

3D Текст

{text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);}

Все це працює в останніх версіях Safari, Chrome, Firefox, та Opera.

15 Август 2012

1 коментар
  1. Павел:

    Класс. Мне очень понравилась статья. Очень интересная и поучительная. Надо будет попробывать сделать также.

Оставь свой комментарий!

rss
Про блог
TechDude.Blog – персональний блог, который не имеет одной конкретной тематики. Тут вы найдете интересные и полезные статьи про: интернет, гаджети, музику, видео, спорт, искусство, web и социальные сервисы.
Надеемся, что Вам понравиться!
Подпишитесь на обновления блога и получайте свежие новости на свой E-mail. Введите свей e-mail тут:


Флаг
Розмовляй українською!
Якщо вважаеш потрібним зберегти українську мову – просто розмовляй українською. УкрЦентр