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
-
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024 -
Dostali jste k vánocům PC? Využijte jeho AI potenciál!
3. ledna 2025 -
Jak vybrat doménu: Co je dobré vědět?
2. září 2024 -
Umělá inteligence v IT
27. září 2023
Nejnovější
-
Umělá inteligence: Co je to GPT?
12. května 2025 -
VMC rapidně zvýšil open rate e-mailových kampaní ZONERu
9. května 2025 -
Nenechte se zaskočit TLS certifikáty na 47 dní
2. května 2025 -
Zrychlete svůj web s LiteSpeed a CZECHIA.COM
29. dubna 2025