Креативный стиль текста CSS

С помощью CSS волшебства мы можем создать красивые стили текста, в большинстве случаях без использования изображений. В этом учебном руководстве мы будем создавать различные CSS стили текста, используя jQuery библиотеку lettering.js и методы CSS. Для некоторых примеров мы также добавим эффекты при наведении, чтобы сделать нашу работу еще более привлекательной.

Сложность

Внимание: демонстрационные примеры работают только в браузерах, которые поддерживают соответствующие CSS свойства (Chrome, Mozila, Opera, Safari).

В большинстве примеров мы будем использовать библиотеку lettering.js.

В статье будет представлено 8 различных примеров, давайте приступим.

Стиль текста CSS #1

В первом примере мы разрежем одно слово, внутри которого плавно появится другое. Для этого мы будем использовать специальную структуру.

<h2 class="cs-text">
   <span class="cs-text-cut">Smooth</span>
   <span class="cs-text-mid">Operator</span>
   <span class="cs-text-cut">Smooth</span>
</h2>

Дублируем первоначальное слово.

Добавляем библиотеку lettering.js для двух слов, это означает, что у нас появится промежуток вокруг первого и последнего слова (копия):

$(".cs-text-cut").lettering('words');

В CSS, прежде всего зададим фиксированную ширину:

.cs-text {
   width: 645px;
   margin: 120px auto 30px;
   cursor: default;
}

Элементы span первого уровня будут отображаться как блочные элементы:

.cs-text > span {
   display: block;
}

Для двух внешних элементов span с классом cs-text-cut зададим высоту в 90px и установим свойство overflow: hidden. Для того чтобы уменьшить внутреннюю высоту в половину. Также добавим css transition к этим элементам:

.cs-text-cut {
   width: 100%;
   height: 90px;
   overflow: hidden;
   transition: all 0.4s ease-in-out;
}

Добавим рамку к верхней и нижней части:

.cs-text-cut:first-child {
   border-top: 1px solid rgba(255,255,255,0.5);
}

.cs-text-cut:last-child {
   border-bottom: 1px solid rgba(255,255,255,0.5);
}

Установим размер шрифта и высоту строки внутреннего span равной 180px, что является больше родительского элемента в два раза, так же добавим некоторые стили текста:

.cs-text-cut span {
   display: block;
   line-height: 180px;
   color: rgba(255,255,255,1);
   font-size: 180px;
   font-weight: 400;
   text-transform: uppercase;
   text-align: center;
   margin-top: 6px;
   font-family: 'Sancreek', cursive;
   text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
}

Второй span, который является дочерним элементом в нашей структуре, будет отображать нижнюю часть слова:

.cs-text-cut:last-child span {
   margin-top: -84px;
}

Для текста в середине (на месте разреза), зададим абсолютную позицию. Установим непрозрачность 0 и уменьшим масштаб до 0.5:

.cs-text-mid {
   font-family: 'Raleway', sans-serif;
   font-weight: 100;
   text-transform: uppercase;
   font-size: 50px;
   letter-spacing: 50px;
   line-height: 50px;
   text-indent: 20px;
   position: absolute;
   top: 50%;
   margin-top: -25px;
   color: rgba(255,255,255,0.3);
   text-shadow: 0 0 0 rgba(255,255,255,0.9);
   opacity: 0;
   transform: scale(0.5);
   transition: all 0.4s ease-in-out 0s;
}

Когда появляется текст в середине, необходимо чтобы верхняя часть основного текста переместилась вверх, следовательно, смещаем ее по оси Y и уменьшаем прозрачность:

.cs-text:hover .cs-text-cut:first-child {
   transform: translateY(-25px);
   opacity: 0.5;
}

Нижнюю часть текста переместим вниз:

.cs-text:hover .cs-text-cut:last-child {
   transform: translateY(25px);
   opacity: 0.5;
}

И наконец, нам нужно, чтобы текст в середине появлялся с анимацией, при этом уменьшал свою непрозрачность. Обратите внимание, мы добавили задержку для перехода в 0.3 секунды. Это позволит выиграть время для первого шага, когда часть слова перемещается вверх и вниз. По умолчанию задержка составляет 0 секунд, это означает, когда мы убираем курсор мыши с окна, то слово сразу исчезает:

.cs-text:hover .cs-text-mid {
   transition-delay: 0.3s;
   opacity: 1;
   transform: scale(1);
}

Итак, мы закончили с первым примером. Давайте приступим к следующему.

Стиль текста CSS #2

Во втором примере мы немного поиграем с CSS transforms и создадим полупрозрачную панель.

<h2 class="cs-text" id="cs-text">Glass</h2>

Добавим элемент span для каждой буквы со всех сторон:

$("#cs-text").lettering();

Установим для контейнера фиксированную ширину и высоту, добавим clearfix hack, для анимации:

.cs-text {
    width: 600px;
    margin: 70px auto 30px;
}
 
/* Микро clearfix hack */
.cs-text:before,
.cs-text:after {
    content: " ";
    display: table;
}
 
.cs-text:after {
    clear: both;
}
/* конец clearfix hack */

Для каждого элемента span добавим полупрозрачный фон, тени в качестве толстой рамки. Повернем span и добавим к нему css transition.

.cs-text span {
    float: left;
    width: 120px;
    font-size: 120px;
    line-height: 230px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    font-family: 'Medula One', cursive;
    display: block;
    z-index: 1;
    position: relative;
    color: rgba(255,255,255,0.7);
    text-shadow: 5px 5px 2px rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.05) url(../images/scratch-texture.png);
    box-shadow:
        -6px 2px 10px rgba(0,0,0,0.5),
        inset 0 0 0 20px rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    transform: skewY(8deg);
    transition: all 0.5s ease-in-out;
}

Cоздаlbv псевдо-класс :before и тень.

.cs-text span:before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
    box-shadow:
        1px 1px 1px rgba(255,255,255,0.4),
        inset 1px 1px 1px rgba(0,0,0,0.1);
}

На верхней части элемента span будет псевдо-класс :before в виде маленькой точки:

.cs-text span:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 5px;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.2);
}

И наконец, при наведении курсора мыши, меняем масштаб:

.cs-text span:hover {
    transform: translateY(-10px) scale(1.1);
    color: rgba(255,255,255,1);
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

Стиль текста CSS #3

Стиль для третьего примера основан на учебном руководстве по Photoshop, в котором рассказывают как создать аккуратный текстовый эффект в виде мозаики.

Мы же создадим такой же эффект с помощью CSS:

<h2 class="cs-text">
        To sing is to ♥love and affirm, to fly and soar, to coast into the hearts of the people who listen, to tell them that life is to live, that love is there, that nothing is a promise, but that beauty exists, and must be hunted for and found.
</h2>
<h3 class="cs-text">Joan Baez</h3>

Добавим lettering.js к словам и буквам:

$(".cs-text").lettering('words').children('span').lettering()

Данная операция добавит каждое слово начиная с класса "word" и каждую букву слова в элемент span с классом "char".

Разместим текст по центру:

.cs-text {
    text-align: center;
    margin-top: 70px;
}

Слова будут отображаться в качестве встроенных блоков:

.cs-text span[class^="word"] {
    display: inline-block;
    margin: 0 15px;
}

Для каждого символа установим цвет фона, ширину и высоту. Текстовая тень создаст эффект вырезанных букв, а несколько значений text-shadow добавят глубину мозаики:

.cs-text span[class^="char"] {
    width: 90px;
    height: 100px;
    display: inline-block;
    background: #e4d095;
    color: #2a1f1b;
    border-radius: 4px;
    font-size: 60px;
    font-weight: 400;
    line-height: 100px;
    margin: 10px 3px;
    text-align: center;
    cursor: default;
    font-family: "Spinnaker", Arial, sans-serif;
    text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.9),
        0 -1px 1px rgba(255,255,255,0.2);
    text-transform: uppercase;
    box-shadow:
        1px 7px 15px rgba(0,0,0,0.8),
        inset 3px 0 2px rgba(255,255,255,0.4),
        inset 0 3px 0px rgba(255,255,255,0.5),
        inset -2px -3px 0px rgba(143,128,82,0.6);
}

Сейчас мы создадим интересный эффект, путём небольшого поворота каждой нечетной и третьей буквы:

.cs-text span[class^="char"]:nth-child(odd) {
    transform: rotate(2deg);
}
 
.cs-text span[class^="char"]:nth-child(3n) {
    transform: rotate(-3deg);
}

У пятого слова и последнего заголовка будут красные буквы, ещё последний заголовок будет немного меньше, чем остальная часть стилей текста:

.cs-text > span:nth-child(5) span,
h3.cs-text span[class^="char"] {
    color: #a62a19;
}
 
h3.cs-text span[class^="char"] {
    font-size: 40px;
    width: 50px;
    height: 60px;
    line-height: 60px;
}

Стиль текста CSS #4

Следующий пример - стилизация текста в качестве фона. Сделаем буквы большими и полупрозрачными, добавим текстовую css тень и повернем некоторые буквы в произвольном порядке.

<h2 class="cs-text" id="cs-text">Nothing can be more hopeless than to attempt to explain this similarity
of pattern in members of the same class, by utility or by the doctrine
of final causes. The hopelessness of the attempt has been expressly
admitted by Owen in his most interesting work on the "Nature of Limbs."
On the ordinary view of the independent creation of each being, we can
only say that so it is; that it has pleased the Creator to construct all
the animals and plants in each great class on a uniform plan; but this
is not a scientific explanation.</h2>

Просто добавим с помощью lettering.js, элемент span для каждой буквы со всех сторон:

$("#cs-text").lettering();

Весь текст будет плавающим, зададим ему ширину 100%:

.cs-text {
    width: 100%;
    text-align: center;
    margin-top: 80px;
}

Для букв зададим цвет в RGBA с низким значением непрозрачности. Также добавим текстовую тень с большим смещением:

.cs-text span {
    font-family: 'Cantata One', 'Trebuchet MS', sans-serif;
    font-size: 180px;
    line-height: 150px;
    font-weight: 400;
    color: rgba(255,255,255,0.3);
    display: inline-block;
    text-transform: uppercase;
    text-shadow: 15px 15px 0 rgba(0,0,0,0.2);
    cursor: default;
    pointer-events: none;
}

Так как необходимо использовать текст в качестве фона, мы установим свойство pointer-events: none. Это позволит избежать интерактивного выделения текста.

Настало время беспорядочно вращать, переводить, улучшать и увеличивать некоторые буквы. Для этого будем использовать селектор :nth-child :

.cs-text span:nth-child(2n) {
    transform: rotate(-6deg);
    color: rgba(255,255,255,0.4); ;
}
 
.cs-text span:nth-child(3n) {
    transform: translateY(20px);
}
 
.cs-text span:nth-child(4n) {
    color: rgba(255,255,255,0.2);
}
 
.cs-text span:nth-child(3n+3) {
    transform: scale(1.4) rotate(5deg);
}
 
.cs-text span:nth-child(7n) {
    font-size: 110px;
}
 
.cs-text span:nth-child(12n) {
    font-size: 200px;
}

У нас получился очень простой, но захватывающий текстовой эффект.

Стиль текста CSS #5

Пример №5 имеет 3D эффект, который визуализирует глубину.

<h2 class="cs-text" id="cs-text">Disarmer</h2>

В данном примере, необходимо чтобы у каждой буквы было по два элемента span, поэтому добавляем lettering.js, с вложенным span:

$("#cs-text").lettering().children('span').wrap(''); 

Добавим отступы для основного span:

.cs-text {
    position: relative;
    width: 960px;
    height: 100px;
    margin: 100px auto;
    cursor: default;
}

Элемент span первого уровня будет иметь свойства perspective и float:

.cs-text > span {
    perspective: 200px;
    float: left;
    position: relative;
}

Для того чтобы повернуть внутренние элементы span, потребуется определенный порядок расстановки перспективы (от центра к краям):

.cs-text > span:first-child,
.cs-text > span:last-child {
    z-index: 1;
}
 
.cs-text > span:nth-child(2),
.cs-text > span:nth-child(7){
    z-index: 2;
}
 
.cs-text > span:nth-child(3),
.cs-text > span:nth-child(6){
    z-index: 3;
}
 
.cs-text > span:nth-child(4) {
    z-index: 5;
}
 
.cs-text > span:nth-child(5){
    z-index: 4;
}

Внутренние элементы span имеют несколько фонов: css градиент и полупрозрачную текстуру. Также добавим box-shadow, для увеличения глубины элементов:

.cs-text span span {
    display: block;
    background: url(../images/scratch-texture.png), linear-gradient(to right, #00b7ea 0%,#009ec3 100%);
    box-shadow:
        -1px 0 2px rgba(255,255,255,0.4),
        -2px 0 0 #00adda,
        -2px 7px 9px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
    width: 120px;
    height: 150px;
    font-weight: 700;
    line-height: 150px;
    font-size: 140px;
    text-align: center;
    text-transform: uppercase;
}

У последних четырех букв будет обратный css градиент,box-shadow и text-shadow:

.cs-text > span:nth-child(n+5) span {
    background: url(../images/scratch-texture.png), linear-gradient(to right, #009ec3 0%,#00b7ea 100%);
    box-shadow:
        1px 0 2px rgba(255,255,255,0.4),
        2px 0 0 #00adda,
        -2px 7px 9px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

Поворачиваем внутренние span и меняем значение z-index, для создания красивого эффекта. Каждый из них будет иметь различные значения, поэтому мы должны ориентироваться на селектор :nth-child:

.cs-text > span:nth-child(4) span{
    transform: translateZ(40px) rotateY(40deg);
}
 
.cs-text > span:nth-child(5) span{
    transform: translateZ(40px) rotateY(-40deg);
}
 
.cs-text > span:nth-child(3) span{
    transform: translateZ(30px) rotateY(30deg);
}
 
.cs-text > span:nth-child(6) span{
    transform: translateZ(30px) rotateY(-30deg);
}
 
.cs-text > span:nth-child(2) span{
    transform: translateZ(20px) rotateY(20deg);
}
 
.cs-text > span:nth-child(7) span{
    transform: translateZ(20px) rotateY(-20deg);
}
 
.cs-text > span:first-child span{
    transform: translateZ(10px) rotateY(10deg);
}
 
.cs-text > span:last-child span{
    transform: translateZ(10px) rotateY(-10deg);
}

Немного сместим по оси X:

.cs-text > span:nth-child(-n+4) {
    transform: translateX(14px);
}
 
.cs-text > span:nth-child(n+5) {
    transform: translateX(-14px);
}

Стиль текста CSS #6

На создание этого примера меня вдохновило искусство оригами. Здесь есть несколько полупрозрачных элементов span, которые мы повернем в различные стороны.

<h2 class="cs-text" id="cs-text">Bird</h2>

Обернем каждую букву в элемент span, в нем будет три других span, которые поворачиваются при наведении:

$("#cs-text").lettering().children('span').wrap('').parent().prepend('');

Установим ширину некоторых полей основного элемента span и уберем эффект плавучести:

.cs-text {
   width: 600px;
   margin: 70px auto 30px;
}

/* Micro clearfix hack */
.cs-text:before,
.cs-text:after {
   content: " ";
    display: table;
}

.cs-text:after {
   clear: both;
}
/* конец clearfix hack */

Все элементы span будут отображаться в качестве блочных элементов:

.cs-text span{
   cursor: default;
   display: block;
   position: relative;
}

У всех span первого уровня будет высота и ширина в 130px и небольшой отступ:

.cs-text > span {
   float: left;
   width: 130px;
   height: 130px;
   margin: 10px;
}

Для всех внутренних элементов span зададим RGBA фон, который сделает их полупрозрачными. Также добавим CSS transition:

.cs-text span span {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: rgba(255,255,255,0.3);
   box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
   transition: all 0.3s ease-in-out;
}

.cs-text span span:last-child{
   font-size: 70px;
   line-height: 130px;
   font-weight: 400;
   text-transform: uppercase;
   text-align: center;
   color: rgba(255,255,255,0.8);
   font-family: 'Michroma', sans-serif;
   text-shadow: 
      1px 1px 1px rgba(0,0,0,0.1),
      -1px -1px 1px rgba(0,0,0,0.1),
      5px 5px 0 rgba(216,65,40,0.6),
      -5px -5px 0 rgba(37,166,164,0.6);
   background: 
      linear-gradient(
         45deg, 
         rgba(249,249,249,0.08) 0%,
         rgba(234,234,234,0.5) 49%,
         rgba(255,255,255,0.51) 50%,
         rgba(244,244,244,0.94) 100%
         );
}

зададим произвольный поворот и наклон к неактивным элементам span:

.cs-text > span:nth-child(odd) span:first-child {
   transform: rotate(5deg) skewY(-14deg);
}

.cs-text > span:nth-child(even) span:first-child {
   transform: rotate(-35deg) skewY(-5deg);
}

.cs-text > span:nth-child(odd) span:nth-child(2) {
   transform: rotate(45deg) skewY(-10deg);
}

.cs-text > span:nth-child(even) span:nth-child(2) {
   transform: rotate(27deg) skewY(-12deg);
}

.cs-text > span:nth-child(odd) span:nth-child(3) {
   transform: rotate(45deg);
}

.cs-text > span:nth-child(even) span:nth-child(3) {
   transform: rotate(30deg);
}

При наведении, элементы span повернутся до нуля градусов. Установим text-shadow, для создания хорошего эффекта:

#cs-text > span:hover span {
   transform: rotate(0deg) skewY(0deg);
   text-shadow:
      1px 1px 0 rgba(216,65,40,0.1),
      -1px -1px 0 rgba(37,166,164,0.1);
}

Стиль текста CSS #7

В этом примере изначально мы покажем иконку, а при наведении курсора появятся символы. Используем следующую структуру:

<h2 class="cs-text">
   <span>C</span>
   <span>o</span>
   <span>d</span>
   <span>r</span>
   <span>o</span>
   <span>p</span>
   <span>s</span>
   <span></span>
</h2>

Зададим некоторые свойства, а также ширину текста:

.cs-text {
   font-size: 50px;
   text-transform: uppercase;
   margin: 80px auto 0 auto;
   width: 580px;
   height: 100px;
   padding-left: 20px;
   font-family: 'McLaren', Arial;
   font-weight: 400;
   position: relative;
}

/* Micro clearfix hack */
.cs-text:before,
.cs-text:after {
   content: " ";
    display: table;
}

.cs-text:after {
   clear: both;
}
/* конец clearfix hack */

Сейчас добавим css transition. Элементы span будут плавающими:

.cs-text span {
   cursor: default;
   display: block;
   float: left;
   border-radius: 50%;
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   margin: 0 0 0 -20px;
   color: rgba(255,255,255,0.95);
   text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
   transition: all 0.4s ease-in-out;
}

Элементы span должны чередоваться с цветом фона. Также добавим легкую текстуру:

.cs-text span:nth-child(odd) {
   background: rgba(118,176,204, 0.8) url(../images/noise.png); 
}

.cs-text span:nth-child(even) {
   background: rgba(58,126,162, 0.8) url(../images/noise.png); 
}

.cs-text span:nth-child(1) {
   transform: translate(300%) translate(-60px);
}

.cs-text span:nth-child(2) {
   transform: translate(200%) translate(-40px);
}

.cs-text span:nth-child(3) {
   transform: translate(100%) translate(-20px);
}

.cs-text span:nth-child(5) {
   transform: translate(-100%) translate(20px);
}

.cs-text span:nth-child(6) {
   transform: translate(-200%) translate(40px);
}

.cs-text span:nth-child(7) {
   transform: translate(-300%) translate(60px);
}

Установим непрозрачность со значением 0:

.cs-text span:not(:last-child) {
   opacity: 0;
   pointer-events: none;
}

Последний span - это логотип. Установим для него отличный от других фон и расположим по центру:

.cs-text span:last-child{
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -50px;
   z-index: 100;
   background: url(../images/codrops_logo.jpg) no-repeat center center;
}

При наведении, отображаем все скрытые элементы span, увеличиваем значение непрозрачности до 1:

.cs-text:hover span:not(:last-child){
   transform: translate(0%);
   opacity: 1;
}

Логотип немного увеличивается и постепенно исчезает:

.cs-text:hover span:last-child {
   opacity: 0;
   transform: scale(1.4);
}

Стиль текста CSS #8

В последнем примере поэкспериментируем с многократными текстовыми css тенями.

<h2 class="cs-text">Time for Thyme</h2>

Добавим все слова в элементы span при помощи lettering.js:

$(".cs-text").lettering('words');

Зададим ширину для основного заголовка, разместим его по центру и немного наклоним:

.cs-text {
   width: 660px;
   margin: 120px auto 30px;
   cursor: default;
   transform: skewY(-12deg); 
   text-align: center;
}

Для span добавим свойство display: block:

.cs-text span {
   display: block;
   color: #fff;
   font-weight: 400;
   text-transform: uppercase;
   margin-top: 6px;
   font-family: 'Stint Ultra Expanded', cursive;
}

Первое слово будет иметь размер шрифта 100px и интервал заглавной буквы 96px:

.cs-text span:first-child {
   font-size: 100px;
   letter-spacing: 96px;
   text-shadow: 6px 6px 0px rgba(255,255,255,0.3);
}

Второе слово будет иметь курсивный шрифт с засечками. Зададим ему темный цвет:

.cs-text span:nth-child(2) {
   font-family: Georgia, serif;
   font-weight: 400;
   text-transform: none;
   font-style: italic;
   line-height: 60px;
   font-size: 67px;
   color: #392f2c;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
   position: relative;
}

Мы используем псевдо-классы :before и :after, чтобы создать две строки:

.cs-text span:nth-child(2):before,
.cs-text span:nth-child(2):after {
   content: '';
   width: 240px;
   height: 2px;
   background: #392f2c;
   position: absolute;
   top: 50%;
   margin-top: -1px;
   box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.cs-text span:nth-child(2):before {
   left: 0px;
}

.cs-text span:nth-child(2):after {
   right: 0px;
}

Последнее слово будет иметь несколько теней, для того, чтобы создать многократный эффект. Хитрость заключается в том, что мы чередуем цвет между цветом текста и цветом фона, который, в нашем случае, является темно-коричневым:

.cs-text span:nth-child(3) {
   font-size: 130px;
   text-shadow: 
      2px 2px 0 #645f59,
      4px 4px 0 #fff,
      6px 6px 0 #645f59,
      8px 8px 0 #fff,
      10px 10px 0 #645f59,
      12px 12px 0 #fff,
      14px 14px 0 #645f59,
      16px 16px 0 #fff,
      18px 18px 0 #645f59,
      20px 20px 0 #fff,
      22px 22px 0 #645f59,
      24px 24px 0 #fff; 
}

Надеюсь, вам понравились эти примеры и они смогут Вас вдохновить на новые идеи! Не бойтесь экспериментировать, чтобы добиться наиболее подходящего Вам эффекта!

ДЕМО СКАЧАТЬ Перевод статьи Creative Web Typography Styles

 

Тэги: transitiontext

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.