Obrázek na pozadí odstavce
Toto řešení ukazuje, jak zlepšit vzhled odstavců na Vašich stránkách. Ukazuje jak vytvořit zvýraznění prvního slova v odstavci obrázkem na pozadí nebo možnost jak například vylepšit citace. Jedná se o jednoduché řešení.
Zde si můžete prohlédnout výsledek.
Toto řešení publikovala Kathy Marks. Bližší popis najdete v článku CSS and Images: A Beginner’s Cheat Sheet..
CSS
.bublina
{
background: url(bublina.gif) no-repeat top left;
padding: 8px 0 0 6px;
color: #9b7b0c;
}
.uvozovky-nahore
{
background-image: url(uvozovky.gif);
background-repeat: no-repeat;
background-position: top left;
text-indent: 0.8cm;
color:#a9174a;
}
.uvozovky-dole
{
background-image: url(uvozovky.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
XHTML
<html>
<body>
<p class=“bublina“>
Lorem ipsum dolor sit amet, consectetuer…
</p>
<p class=“uvozovky-nahore“>
Vivamus id nisl eu dui aliquet…
</p>
<div class=“uvozovky-nahore“>
<div class=“uvozovky-dole“>
Vivamus id nisl eu dui aliquet…
</div>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Zabezpečení e-mailů: Jak můžete chránit vaši firemní komunikaci
13. prosince 2023 -
Webový správce souborů Filestash – dojmy a recenze
29. července 2024 -
Regulace digitálních služeb: Co přináší nové nařízení DSA?
20. února 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024
Nejnovější
-
Co je to transformer v umělé inteligenci (AI)
10. června 2025 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
20 let Ubuntu: Cesta od revoluce k digitální každodennosti
30. května 2025 -
Google Chrome nyní mění kompromitovaná hesla – jak to funguje?
28. května 2025