Декілька гарних текстових ефектів з використанням CSS

У цьому уроці навчимося створювати деякі цікаві текстові ефекти за допомогою CSS3. Вони використовуються, щоб зробити сайт більш елегантним. Розглянемо 11 ефектів, які може використати кожен веб-дизайнер для свого веб-проекту. Text-shadow атрибут використовується для створення красивих текстових ефектів. Все, що вам потрібно зробити - це поекспериментувати з кодом.

Спробуємо відтворити такі ефекти, як: Anaglyphic, Embedded, Embossed, Neon, Fire, Retro, Blurred, Gradient, Golden, Stiched і 3-D Effect.

ANAGLYPHIC

Anaglyphic - стереоскопічний 3D-ефект, досягнути якого можна шляхом кодування кожного зображення за допомогою різних фільтрів (як правило, хроматично протилежних) кольору, зазвичай це червоний і блакитний.

<div id="anaglyphic">ANAGLYPHIC</div>

#anaglyphic {
	display: inline;
	position: relative;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	letter-spacing: -5px;
	color: #6CF;
	font-size: 100px;
}
#anaglyphic:after {
	content: "ANAGLYPHIC";
	position: absolute;
	top: 5px;
	left: 5px;
	color:#F69 ;
}

EMBEDDED

Embedded - ефект "вбудованності", "вдавлення" тексту в фон.

<div id="embedded">EMBEDDED</div>

#embedded {
	color: #111;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
	text-shadow: 0px 1px 1px #555;
}

EMBOSSED

Випуклий текст.

<div id="embossed">EMBOSSED</div>

#embossed {
	text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
	color: #F63;
	opacity: 0.3;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
}

NEON

Відтворення ефекту світіння неонових ламп.

<div id="neon">NEON</div>

#neon {
	color: #f5f5f5;
	text-shadow: 0 0 5px #fff,
	 0 0 10px #fff,
	 0 0 15px #fff,
	 0 0 20px #3FF,
	 0 0 30px #3FF,
	 0 0 40px #3FF,
	 0 0 50px #3FF,
	 0 0 75px #3FF;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
}

FIRE

Ефект горіння без використання анімації.

<div id="fire">FIRE</div>

#fire {
	color: #f5f5f5;
	text-shadow:
	0px -2px 4px #fff,
	0px -2px 10px #FF3,
	0px -10px 20px #F90,
	0px -20px 40px #C33;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
}

RETRO

Ретро - мода з недавнього минулого. В основному використовується для одягу, музики і стилю.

<div id="retro">RETRO</div>

#retro {
	color: #FC9;
	text-shadow: 3px 3px 0px #333, 5px 5px 0px #999;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
}

BLURRED

Розмиття - ефект туманності.

<div id="blurred">BLURRED</div>

#blurred {
	text-shadow: 0px 0px 10px rgba(255,255,255,0.4),
	0px 0px 30px rgba(255,255,255,0.6),
	0px 0px 50px rgba(255,255,255,0.5),
	0px 0px 180px rgba(255,255,255,0.5);
	color: rgba(255,255,255,0);
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
}

GRADIENT

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

<div id="gradient">GRADIENT</div>

#gradient {
  background: -webkit-linear-gradient(#444, #BBB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
}

GOLDEN

Ефект блискучого золота.

<div id="golden">GOLDEN</div>

#golden {
  background: -webkit-linear-gradient(#FF6, #F90, #FF0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 100px;
}

STICHED

Ефект простроченої нашивки.

<div id="stiched">STICHED</div>

#stiched {
	outline: 2px dashed #777;
	outline-offset: -15px;	
	background-color: #555;
	height: 150px;
	width: 500px;
	margin: 20px auto;
	box-shadow: 2px 2px 2px #111;
	-webkit-box-shadow: 2px 2px 2px #111;
	-moz-box-shadow: 2px 2px 2px #111;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 100px;
	text-align: center;
	line-height: 150px;
	color: #DDDDDD
}

3-D EFFECT

<div id="three_d">3-D EFFECT</div

#three_d {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-size: 100px;
	color: #B00;
	text-shadow:#A00 1px 1px 0,
	#500 2px 2px 0,
	#500 3px 3px 0,
	#500 4px 4px 0,
	#500 5px 5px 0,
	#500 6px 6px 0,
	#500 7px 7px 0,
	#500 8px 8px 0,
	#500 9px 9px 0,
	#500 10px 10px 0;
}

Джерело

Завантажити