Kulatý roh stránky
Pomocí tohoto řešení můžeme zarovnat text podle různě zakřiveného – například kulatého – okraje.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Eric Meyer. Bližší popis najdete v článku Curvelicious
CSS
div#hlavni
{
position: relative;
border: solid black 4px;
background: lightblue;
padding: 0 20px;
text-align: justify;
min-height: 290px;
_height: 290px; /* IE */
}
div#bg
{
background: url(’91-1.gif‘) 0 0 no-repeat;
width: 290px;
height: 285px;
position: absolute;
left: -4px;
top: -5px;
}
div.empty
{
background: transparent;
height: 1em;
float: left;
clear: left;
margin: 0;
}
.e1
{
width: 240px;
}
.e2
{
width: 180px;
}
.e3
{
width: 130px;
}
.e4
{
width: 90px;
}
.e5
{
width: 70px;
}
.e6
{
width: 50px;
}
.e7
{
width: 35px;
}
.e8
{
width: 25px;
}
.e9
{
width: 15px;
}
.e10
{
width: 10px;
}
.e11
{
width: 8px;
}
.e12
{
width: 6px;
}
.e13
{
width: 2px;
}
XHTML
<html>
<body>
<div id=“hlavni“>
<div id=“bg“></div>
<div class=“empty e1″></div>
<div class=“empty e2″></div>
<div class=“empty e3″></div>
<div class=“empty e4″></div>
<div class=“empty e5″></div>
<div class=“empty e6″></div>
<div class=“empty e7″></div>
<div class=“empty e8″></div>
<div class=“empty e9″></div>
<div class=“empty e10″></div>
<div class=“empty e11″></div>
<div class=“empty e12″></div>
<div class=“empty e13″></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus orci nisi, fringilla sed, volutpat ac, …</p>
<p>Aenean quis dolor. Praesent pharetra vestibulum ligula. Curabitur dapibus massa ut libero blandit condimentum…</p>
<p>Proin porttitor leo quis purus. Ut ante. Aliquam laoreet egestas turpis. Vivamus nunc nulla, ultrices sit amet,…</p>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Jak se chránit před podvody na internetu – část 2
14. října 2024 -
Certifikáty Entrust ztratí důvěru Google Chrome
8. července 2024 -
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024
Nejnovější
-
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
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
Tereza
Pro 29, 2011 v 15:54Velmi pěkné. Děkuji za nápad :).