Публікації блогу Міки > Рубрика: HTML 5 - CSS 3 > "7 цікавих текстових ефектів на CSS 3"


7 цікавих текстових ефектів на CSS 3


12 Квітень 2011 16:11:27


Раніше у веб таких ефектів можна було досягнути тільки за допомогою Фотошопу та вставки зображень. Але це додавало ваги сайту. Тепер же, ми можемо писати кодом те, що раніше малювали в Фотошопі.


У цій публікації представлю 7 текстових ефектів на css 3 з кодом, демо та вихідними файлами.


7 цікавих текстових ефектів на CSS 3


Ось, що ми будемо робити:

7 цікавих текстових ефектів на CSS 3

1. "Тінь тексту"

text-shadow: 0px 2px 3px #555;

Параметри: x-offset, y-offset, blur, color



2. "Вінтажний текстовий ефект"

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


3. "Неоновий текстовий ефект"

text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 150px #ff00de;

Неоновий ефект складається з восьми рівнів затінення.



4. "Ефект тисненого тексту"

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


5. "Ще один цікавий текстовий ефект"

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


6. "Вогняний текст"

text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fefcc9, 15px -15px 20px #feec85, -5px -5px 10px #ffae34, 5px -10px 20px #ec760c, -5px -20px 20px #cd4606, 0 -30px 20px #973716, 3px -30px 20px #451b0e;


7. "Board ефект"

text-shadow: 3px 3px 0 #ffd217, 5px 5px 0 #5ac7ff, 8px 8px 0 #ffd217, 10px 10px 0 #5ac7ff;


Вихідний код

CSS 3:

h1{font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:33px;}

.shadow h1{
color:#33CC00;
text-shadow: 0px 2px 3px #555;}

.vintag h1{
text-shadow: 2px 2px 0px #eee, 3px 3px 0px #707070;}

.neon h1{
text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 150px #ff00de;}

.tus h1{
color:#FFFFFF;
text-shadow: 0px 1px 2px #777;}

.anaglyphic h1{
text-transform: uppercase;
color: rgba(0,168,255,0.5);
text-shadow: 3px 3px 0 rgba(255,0,180,0.5);}

.fire {background-color:#000000;
padding:33px;}
.fire h1{
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fefcc9, 15px -15px 20px #feec85, -5px -5px 10px #ffae34, 5px -10px 20px #ec760c, -5px -20px 20px #cd4606, 0 -30px 20px #973716, 3px -30px 20px #451b0e;}
	
.board h1{
color:#efefef;
text-shadow: 3px 3px 0 #ffd217, 5px 5px 0 #5ac7ff, 8px 8px 0 #ffd217, 10px 10px 0 #5ac7ff;}




HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Текстові ефекти на CSS 3</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="shadow"><h1>Тінь тексту</h1></div>
<div class="vintag"><h1>Вінтажний текстовий ефект</h1></div>
<div class="neon"><h1>Неоновий текстовий ефект</h1></div>
<div class="tus"><h1>Ефект тисненого тексту</h1></div>
<div class="anaglyphic"><h1>Ще один цікавий текстовий ефект</h1></div>
<div class="fire"><h1>Вогняний текст</h1></div>
<div class="board"><h1>Board ефект</h1></div>
</body>
</html>



Демо

Вихідні файли




Джерело

Автор: Міка
Кількість переглядів: 884

Рейтинг: Рейтинг
Ваша оцінка:
1
2
3
4
5






Коментарів ще нема

  • X
    Ваше ім'я:

    Ваш E-mail:
    Ваш коментар:

    Ми хочемо знати, що Ви не робот. Будь ласка введіть суму цифрами:
    Сімсот Сімдесять Сім