Design To XHTML

Този път ще покажа нещо съвсем елементарно – как се прави голяма първа буква на параграф, нещо което по-често се ползва в печатните медии, но понякога може да ви свърши работа и в web.

Ще ползвам 2 параграфа за да видите 2-та варианта, които могат да се направят.

Ето html-a:

<p class="demo1">Сложете тук дълъг текст за да видите ефекта</p>
<p class="demo2">Сложете тук дълъг текст за да видите ефекта</p>

Първият параграф  с клас demo1 ще бъде  с голяма първа буква, но останалият текст няма да я заобикаля, а ще стои в долната част на буквата.

Вторият параграф с клас demo2 също ще е с голяма първа буква, но край нея ще са разположени и няколко реда от параграфа.

Ползва се псевдо елемента :first-letter, който указва че правим стил за само за първата буква на текста

.demo1:first-letter{
	font-size: 40px;
}

.demo2:first-letter{
	font-size: 40px;
	float: left;
	padding: 0 10px 0 0;
}

Вижте и демото