Оформлення тексту з ефектами тіні, анімації та градієнта

27

Всім добре знайомі різні ефекти тіні для тексту з допомогою властивості CSS3 text-shadow, цей чудовий візуальний ефект став дуже популярний серед веб-дизайнерів і розробників. В силу того, що всі сучасні браузери досить непогано підтримують все більше нових властивостей CSS3, стало можливим використовувати різні варіації та зв’язки цих чудових ефектів.
Сьогодні хочу продемонструвати наочні приклади цікавих ефектів оформлення тексту із застосуванням анімації CSS, лінійного градієнта, тіні і легкої розмитості, для заголовків або текстових логотипів.
Зараз в «інтернетах» створено і чудово працюють велика кількість різних онлайн-генераторів, за допомогою яких можна з легкістю формувати стилі CSS, для тих або інших елементів оформлення веб-сайтів, так що деякі з представлених у статті рішень, будуть виконані саме в таких онлайн-генераторах.

1. Ефект довгої тіні для тексту

Генератор длинной тени для текста

Представлена вище картинка кликабильна, натиснувши на неї, ви потрапите на сторінку дуже цікавого онлайн-генератора Long Shadow Generator, за допомогою якого ви зможете відтворити чудовий ефект довгої тіні для тексту. Працювати з генератором просто, досить вибрати необхідний шрифт, визначити колір основного фону сторінки, вказати колір тексту і тіні, а потім, рухаючи повзунки визначити довжину тіні і її напрямок. Все, потім залишається лише натиснути на кнопку «CODE» та отримати згенерований код CSS, готовий для прямого використання в оформленні ваших заголовків або текстових логотипів.


2. Ефектна анімація тексту з тінню

Анимация для текста с тенью

Дивитися Демо

Чудовий приклад створення візуального ефекту анімації тексту за допомогою CSS3. У прикладі задіяні властивості text-shadow з послідовною зміною значень і трансформація по вертикалі, у зв’язці з функціями анімації, створюється якась ілюзія рухливості тексту. У демонстраційному прикладі використаний шрифт Audiowide подгружаемый з великої бібліотеки шрифтів Google, за таким же принципом, ви зможете використовувати будь-який інший потрібний вам шрифт, головне не забувати про те, що якщо використовуєте російські літери, переконайтеся в підтримку кирилиці в тому чи іншому шрифті.

@import url(http://fonts.googleapis.com/css?family=Audiowide);
h1{
font-family: 'Audiowide';
font-size:5em;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
-webkit-animation: floating-text 2s ease alternate infinite;
-moz-animation: floating-text 2s ease alternate infinite;
-ms-animation: floating-text 2s ease alternate infinite;
-o-animation: floating-text 2s ease alternate infinite;
animation: floating-text 2s ease alternate infinite;
}
@-webkit-keyframes floating-text {
0% {
-webkit-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-moz-keyframes floating-text {
0% {
-moz-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-ms-keyframes floating-text {
0% {
-ms-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-o-keyframes floating-text {
0% {
-o-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@keyframes floating-text {
0% {
transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);
}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}

@import url(http://fonts.googleapis.com/css?family=Audiowide);
h1{
font-family: ‘Audiowide’;
font-size:5em;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:240px;
width:70%;
-webkit-animation: floating-text 2s ease alternate infinite;
-moz-animation: floating-text 2s ease alternate infinite;
-ms-animation: floating-text 2s ease alternate infinite;
-o-animation: floating-text 2s ease alternate infinite;
animation: floating-text 2s ease alternate infinite;
}
@-webkit-keyframes floating-text {
0% {
-webkit-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-moz-keyframes floating-text {
0% {
-moz-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-ms-keyframes floating-text {
0% {
-ms-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@-o-keyframes floating-text {
0% {
-o-transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}
@keyframes floating-text {
0% {
transform: translateY(.1em);
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .3em .2em rgba(0,0,0,.3);}
100% {
text-shadow:0 0 .5em rgba(255,255,255,.4),
0 0 .2em rgba(0,0,0,.3),
0 .5em .5em rgba(0,0,0,.3);
}
}


3. Лінійний градієнт для тексту

Уявляю вашій увазі декілька простих прикладів використання лінійного градієнта в оформленні тексту. Граючи з палітрою(змінюючи значення), ви легко зможете досягти вражаючих результатів, ні якихось картинок, все робиться виключно засобами CSS.

Линейный градиент для текста

Дивитися Демо

У першому прикладі використовуємо плавний перехід від світлих тонів до більш темним. З допомогою -webkit-text-fill-color: transparent; визначимо колір тексту прозорим і виведемо на передній план використовуючи властивість -webkit-background-clip: text;, в такому випадку основоположним в оформленні тексту стає властивість background, де ми і залучаємо функцію лінійного градієнта з потрібними нам значеннями.

h1 {
font-size: 55px;
background: -webkit-linear-gradient(#eee, #353968);
 -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

h1 {
font-size: 55px;
background: -webkit-linear-gradient(#eee, #353968);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

У другому варіанті підемо трохи іншим шляхом, використовуємо новий атрибут HTML5 data-text, і вже безпосередньо в CSS поставимо всі необхідні стилі і значення для створення чудового ефекту градієнтної заливки тексту.

Линейный градиент для текста

Дивитися Демо

За допомогою атрибута data-text використовуваного в тегу заголовка h1, ми просто робимо накладення на базовий текст і все, функцію лінійного градієнта застосовуємо безпосередньо до вмісту атрибута data-text, через псевдоэлемент :after, встановлюючи потрібні нам значення, як для основного кольору, так і перехідні значення градієнта.

@import url(http://fonts.googleapis.com/css?family=Coda+Caption:800);
/* CSS text gradients */
h1{
font-size: 70px;
font-family: 'Coda Caption', sans-serif;
}
h1[data-text] {
position: relative;
}
h1[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
 position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left, top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

@import url(http://fonts.googleapis.com/css?family=Coda+Caption:800);
/* CSS text gradients */
h1{
font-size: 70px;
font-family: ‘Coda Caption’, sans-serif;
}
h1[data-text] {
position: relative;
}
h1[data-text]::after {
content: attr(data-text);
z-index: 10;
color: #e3e3e3;
position: absolute;
top: 0;
left: 0;
-webkit-mask-image: -webkit-gradient(linear, left, top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}


4. Злегка розмитий текст

Найпростіший приклад легкої розмитості тексту з відновленням різкості при наведенні на нього курсору. Досягається з допомогою добре знайомого властивості text-shadow і значення transparen(прозорий фон), для базового кольору тексту властивості color.

Слегка размытый текст CSS

Дивитися Демо

При наведенні на текст відновлюється різкість, тобто виводиться певний колір для тексту color: rgba(0,0,0,0.6), а для тіні визначається зміщення вниз і по діагоналі:

@import url(http://fonts.googleapis.com/css?family=Audiowide);
.blur {
color: transparent;
font-family: 'Audiowide';
font-size:5em;
text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.blur:hover {
color: rgba(0,0,0,0.6);
text-shadow:1px 2px 5px rgba(0,0,0,0.5);
}

@import url(http://fonts.googleapis.com/css?family=Audiowide);
.blur {
color: transparent;
font-family: ‘Audiowide’;
font-size:5em;
text-shadow: 0 0 5px rgba(0,0,0,0.7);
}
.blur:hover {
color: rgba(0,0,0,0.6);
text-shadow:1px 2px 5px rgba(0,0,0,0.5);
}


Всі приклади описані у статті доступні в онлайн-редакторі, так що можете сміливо експериментувати або ж використовувати фрагменти коду. Сподіваюся, що ця добірка, кому-небудь стане в нагоді при розробці нових, цікавих інтернет-проектів.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: