Lecaw

Учимся создавать Web-сайты

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

September 14, 2012
CSS
3247hits
 
 

С помощью 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>

Слово, которое будет отображаться на начальном этапе, будет дублироваться. (Прошу заметить, что все примеры предназначены для декоративных целей и не имеют ничего общего с "SEO").

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

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

Теперь давайте посмотрим на моделирование. Прежде всего, мы зададим фиксированную ширину:

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

Промежутки первого уровня будут выведены на экран как блочные элементы:

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

У двух внешних промежутков с классом "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);
}

Давайте установим размер шрифта и высоту строки внутреннего промежутка равной 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);
}

Второй копией, которая является дочерним элементом в нашей структуре, является промежуток "pulled up". Он покажет нижнюю часть слова:

.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

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

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

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

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

Зададим оболочке фиксированную ширину и высоту и добавим clearfix hack созданный Nicolas Gallagher, чтобы наши промежутки были с анимацией:

.cs-text {
    width: 600px;
    margin: 70px auto 30px;
}
 
/* Микро clearfix hack созданный Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
    content: " ";
    display: table;
}
 
.cs-text:after {
    clear: both;
}
/* конец clearfix hack */

Каждому плавающему промежутку добавим полупрозрачный фон, тени, которые сделают хорошую толстую границу. Повернем элемент и добавим к нему 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;
}

Теперь нам нужно создать псевдо-класс :before и тень. Есть несколько способов сделать это, но давайте попробуем необычный :). Итак, размер css тени у нас составит 20px, зададим белый box-shadow:

.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);
}

На верхней части элемента будет псевдо-класс :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 о создании аккуратного текстового эффекта в виде мозаики textuts.com. Просмотрите учебное руководство, чтобы понять, как создаются теневые эффекты с помощью мозаики.

Мы же создадим такой же эффект с помощью 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" и каждую букву слова в оболочку с классом "char".

Давайте выровняем текст по центру:

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

Слова будут выведены на экран как встроенные блоки:

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

Для символов зададим цвет фона, также мы установим ширину и высоту для них. Текстовая тень создаст эффект вырезанных букв, а многократные box-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:

$("#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>

Так как нам нужно, чтобы у каждой буквы были добавлены два промежутка, мы сначала применим lettering.js, а потом добавим созданный промежуток:

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

Давайте сделаем отступ для основного промежутка:

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

Промежутки первого уровня будут иметь perspective и float:

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

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

.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;
}

Внутренние промежутки имеют несколько фонов: 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);
}

Теперь мы переведем внутренние промежутки на 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);
}

Вот мы и получили аккуратный 3D эффект.

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

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

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

Нам потребуется промежуток для каждой буквы. Ему соответствуют три других промежутка, которые поворачиваются и получается один. (Это довольно необычно):

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

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

.cs-text {
	width: 600px;
	margin: 70px auto 30px;
}
/* Micro clearfix hack созданный Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}
.cs-text:after {
	clear: both;
}
/* конец clearfix hack */

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

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

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

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

У всех внутренних промежутков будет фон RGBA, который сделает их полупрозрачный фон - белым. Мы также добавим переход к ним:

.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;
}

Последний дочерний элемент внутренних промежутков - это буква и мы зададим ей размер, чтобы добавить несколько цветных теней. Цвет css градиента будет такой же как у фона, который моделирует тонкий сгиб:

.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%
			);
}

Давайте добавим произвольный поворот и наклон к неактивным промежуткам:

.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);
}

При наведении наши промежутки повернутся до нуля градусов. Применим также различные 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);
}

И это был 6 пример! Есть много вариантов исполнения, просто попробуйте изменить значения преобразования или использовать промежутки для получения некоторых интересных эффектов.

Стиль текста 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 созданный Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
	content: " ";
    display: table;
}
.cs-text:after {
	clear: both;
}
/* конец clearfix hack */

Сейчас мы добавим css transition. Промежутки будут плавающими вокруг букв:

.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;
}

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

.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); 
}

Все пролеты будут перемещены в центр. Мы применим преобразование дважды: первый представляет собой процент, то есть первый пролет должен иметь 3 позиции, то есть 300%, а второй - преобразование для компенсации полей:

.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;
}

Последний промежуток - это специальный промежуток для логотипа. Мы дадим ему другой фон и расположим его по центру:

.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;
}

При наведении, все свернутые промежутки возвратятся обратно, на свое естественное положение, и мы увеличим значение непрозрачности до 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>

Мы будем использовать lettering.js, чтобы преобразовать все слова в промежутки:

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

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

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

Для промежутков добавим свойство display: block:

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

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

.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;	
}

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

 

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)