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
-
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 -
Windows App: Pracujte odkudkoliv, kdykoliv
3. listopadu 2024 -
Rychlost serveru: Klíč k lepšímu umístění ve vyhledávačích
7. června 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024