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

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

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

ANAGLYPHIC

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

    <div>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>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>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>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>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>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>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>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>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>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
    }