Wyróżniony tekst

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-21

szukaj: wyróżniony tekst

Chciałbyś w szczególny sposób uwidocznić czyjś cytat na stronie? Nic prostszego - starczy CSS :-)

Będziemy potrzebować dwóch pojemników:

..
<html>
<head>
<title>Strona</title>
</head>
<body>
<div>
 <p>Być, albo nie być.<br /> Oto jest pytanie!</p>
</div>
</body>
</html>

No i póki co, to jeszcze niczego ciekawego nie ma. Dodajmy więc temu trochę stylów:

div {
 background: transparent url(cytat.gif) bottom left no-repeat;
 width: 30%;
}
div p {
 background: transparent url(cytat.gif) top right no-repeat;
 font: bold italic 2em Arial, sans-serif;
 padding: 0.5em 1em;
 line-height: 2.5em;
 text-align: center;
 width: 100%;
}

Teraz to zaczyna wyglądać naprawdę nie źle. Aby zobaczyć jak to wygląda, skopiuj powyższy kod, a także pobierz plik.

Patryk 'yarpo' Jar

szukaj: wyróżniony tekst

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!