Kulatý roh stránky
19. 04. 2006 | Redakce Interval.cz | Pro CSS | Komentáře: 1
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>
Další aktuální články na interval.cz
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
- Pozvánka na konferenci o vyhledávačích zboží 2012
Tematicky související články
- Horizontální menu s náhledem stránky
- Hrátky s okrajem textu
- Obrázek na pozadí odstavce
- Objekt mezi odstavci
- Čtyřsloupcový layout s position: absolute;
Dejte vědět i ostatním o článku
Komentáře ke článku
Datum vložení: 29. Prosinec 2011, 15:54:26
Velmi pěkné. Děkuji za nápad :).
