»

 Будь в курсе событий:

tekstovie effecti na css3

Текстовые эффекты на CSS3
Текстовые эффекты на CSS3

Для того, чтобы придать тексту выразительность или своеобразно выделить слово или целый текстовый блок, нужно воспользоваться CSS3. С помощью него текст возможно менять на свой вкус как только воображение захочется.

Текстовые эффекты на CSS3

Сейчас на сайтах используется очень много всяких эффектов с текстом. Это осуществляется в основном при помощи CSS3. Есть конечно же древние сайты, которые по старинке используют изображения, для придания нужного эффекта, но я не сторонник такого явления. Зачем весь этот лишний загруз страниц вообще нужно использовать, который может исчисляться мегабайтами? Ответ: "Незачем". Я покажу основные приемы, которые чаще всего используются на сайтах. Хотя многие из них меня не впечатлили. Но на вкус и цвет товарища нет. Установка стилей очень проста в освоении.

 Стиль можно спокойно прописать к любому текстовому тегу, внедрить при помощи <style> в <head>, либо заполнить css в собственном шаблоне Jimdo.

Пример 1


text-shadow: -1px -1px #666, 1px 1px #FFF;

 Пример текста



Пример 2


text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;

 Пример текста



Пример 3


text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;

 Пример текста



Пример 4


text-shadow: 1px 0 #F33, -1px 0 #33F;

 Пример текста



Пример 5


text-shadow: 2px 0 4px #600, -2px 0 4px #006;

 Пример текста



Пример 6


text-shadow: 0 6px 4px #33F, -3px -5px 4px #F00, 3px -5px 4px #0F0;

 Пример текста



Пример 7


text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;

 Пример текста



Пример 8


text-shadow: 1px 1px 2px #999;

 Пример текста



Пример 9


text-shadow: 2px 2px 3px #999;

 Пример текста



Пример 10


text-shadow: 0 0 8px #000;

 Пример текста



Пример 11


text-shadow: 0 0 11px #0F0;

 Пример текста



Пример 12


text-shadow: 0 0 5px #FF0;

 Пример текста



Пример 13


text-shadow: 0 0 3px #F90;

 Пример текста



Пример 14


text-shadow: 1px 1px 0px #eee, 3px 3px 0px #707070;

 Пример текста



Пример 15


text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;

 Пример текста



Пример 16


text-shadow: 0px 1px 2px #737373;

 Пример текста



Пример 17


text-shadow: 0px 0.5px 1px #F2F2F2;

 Пример текста



Пример 18


text-shadow: #f8fcee 0 1px 1px;

 Пример текста



Пример 19


text-shadow: 3px 3px 0 rgba(255,0,180,0.5);

 Пример текста



Пример 20


text-shadow: 0 0 4px #fefcc9, 2px -2px 6px #feec85, -4px -4px 8px #ffae34, 4px -8px 10px #ec760c, -4px -12px 12px #cd4606, 0 -16px 14px #973716, 2px -18px 16px #451b0e;


 Пример текста



Пример 21


text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;


 Пример текста



Пример 22


text-shadow: 0px -1px 2px rgb(255, 255, 0), -1px -3px 3px rgb(255, 204, 0), 1px -5px 4px rgb(255, 153, 0), 1px -7px 5px rgb(255, 102, 0), 2px -9px 6px rgb(255, 51, 0), 4px -11px 7px rgb(255, 0, 0);


 Пример текста



Пример 23


text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20 0 0 20px #FF0;


 Пример текста



Пример 24


text-shadow: 5px 5px 0 #ffd217, 10px 10px 0 #5ac7ff, 15px 15px 0 #ffd217, 20px 20px 0 #5ac7ff;

 Пример текста



Пример 25


text-shadow: 0 7px 11px #390;

 Пример текста



Пример 26


text-shadow: 0px -15px 0 #F00;

 Пример текста



Пример 27


text-shadow: 0 0 11px #FF6;

 Пример текста



Пример 28


text-shadow: 0 0 8px #000;

 Пример текста



Пример 29


text-shadow: 2px 2px 3px #000

 Пример текста



Пример 30


text-shadow: 2px 2px #666;

 Пример текста



Пример 31


text-shadow: 2px -2px 3px #000;

 Пример текста



Пример 32


text-shadow: 2px 2px 2px #ff3300;

 Пример текста



Пример 33


text-shadow: 0px 1px 1px #fff;

 Пример текста



Пример 34


text-shadow: 0px 1px 1px #000;

 Пример текста



Пример 35


text-shadow: 1px 1px 6px #fff;

 Пример текста



Пример 36


text-shadow: 0px 0px 3px#fff;

 Пример текста



Пример 37


text-shadow: 1px 1px 4px #fff;

 Пример текста



Пример 38


text-shadow: 1px 1px 4px#000;

 Пример текста



Пример 39


text-shadow: 0px 1px #600;

 Пример текста



Пример 40


text-shadow: 0px 1px 0px #ccc;

 Пример текста


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

Комментарии: 0