Звездные войны возвращаются

Первое впечатление, когда я увидел, было: «звездные войны возвращаются». Оказывается, все просто, CSS и никакой магии.

Нравиться. Правда я так и не нашёл где этот эффект гармонично бы лег на дизайн сайта, разве что только если сайт посвящен все тем же «Звездным войнам».

Для реализации этого эффекта нам потребуется два элемента – блок div и span. Вспомним, что span строчный элемент, поэтому мы можем изменить любой контекст внутри него по нашему желанию. Span мы будем использовать, чтобы разбить текст, который мы хотим преобразовать, на строки. А элемент div – будет обрамлять наш текст. С текстом разобрались, но как же нам указать разную величину шрифта для каждой строки? Мы немного схитрим и не будем закрывать тег span после каждой строки, а сделаем так, чтобы каждая строка была как бы вложена в другую. А закрывающий тег от каждой строки поместим в самый конец текста. Главное здесь не обсчитаться в количестве открывающих и закрывающих тегов.

<div id="text">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<span>
	Pellentesque velit lacus,porta vitae, consequat in,<span>
	aliquam condimentum, tortor. Mauris sed est feugiat<span>
	erat lacinia rutrum. Fusce dapibus nonummy nisi.<span>
	Nullam et mi nec arcu tempor pellentesque. Fusce<span>
	diam dui, pharetra at, pellentesque quis, dapibus<span>
	ut, erat. Curabitur venenatis condimentum nisi.<span>
	In posuere. Curabitur accumsan, libero eget<span>
	congue sodales, lacus mi vehicula lorem,<span>
	nec rutrum velit nunc vitae magna. Proin<span>
	et Perspective Text via CSS.
</span></span></span></span></span></span></span></span></span></span>
<div>

Вспомним, что дочерние элементы наследуют свойства родительского элемента, причем каждый последующий вложенный элемент присваивает значение относительно его предыдущего блока, а не самого первого. Ярким примером может быть например такое: когда мы используем вложенные блоки с шириной в процентах, например 70%. Каждый вложенный блок будет иметь ширину 70% относительно предыдущего блока, тем самым самый последний вложенный блок будет самым маленьким.

Думаю, вы уже поняли наши дальнейшие действия. Мы будем проделывать это с текстом в внутри тэгов span.

#text {
	margin : auto;
	width : 50em;
	font-size : 0.8em;
	line-height : 1.3em;
	max-width : 90%;
	text-align : center;
} 

#text span {
	font-size : 1.1em;
	display: block;
	clear: both;
}

Важно уточнить, что размер текста нужно указывать именно в em и обязательно больше чем 1 em. Также нужно помнить о расстоянии между строками (line-height), чтобы строки по мере увеличения шрифта не стали наезжать друг на друга.