blog archiv fotoblog tvorba www o mně ke stažení vzkazy temp

Div se zakulacenými rohy

Mibrt | 12.7.2008 | 3290 x zobrazeno | 8 komentářů

Na diskusních forech se poslední dobou vyskytují čím dál častěji dotazy, jak co nejlépe nastavit u div zaoblené rohy. Tato fičůrka se určitě dá vytvořit více způsoby, ale dnes si probereme snad tu nejjednodušší a nejuniverzálněší možnost.

Co budeme potřebovat:

6x div
4x obrázek zakulaceného rožku

Připravíme si 4 obrázky, které budou sloužit jako rožky pro náš výtvor. Kvůli kompatibility s IE6, který nepodporuje smile alfa kanál u obrázku .png, nebudou naše rožky s průhledným pozadím, proto jako pozadí rožků zvolíme pozadí stránky, což bude v našem případě bílá barva.

HTML struktura

Nyní si napíšeme kod, jak to bude vypadat v našem html dokumentu.


<div class="obdelnik">

<div class="vrch"><div></div></div>

<div class="stred">obsah našeho čtverečku může být jakkoliv veliký, čtvereček se nám bude roztahovat a nemusíme jej dál editovat</div>

<div class="spodek"><div></div></div>

</div>

CSS

No a nyní té změti divů dodáme pomocí CSS život a řekneme jim, jak se mají chovat:


.obdelnik {

width: 200px;

background-color: #CCDDE2;

margin: 20px;

padding: 0px;

}


.vrch , .spodek , .vrch div , .spodek div {

margin: 0px;

padding: 0px;

background-repeat: no-repeat;

width: 100%;

height: 9px;

font-size: 1px; /// kvůli IE6 je třeba nízkým divům nastavit malé písmo

}


.vrch div , .spodek div {

background-position: right top;

}


.vrch , spodek {

background-position: left top;

}


.stred {

color: #000000;

padding: 10px;

margin: 0px;

}


.vrch {background-image: url(1.png);}

.vrch div {background-image: url(2.png);}

.spodek {background-image: url(3.png);}

.spodek div {background-image: url(4.png);}

Závěrem

Tady tento postup je kompatibilní s IE6, IE7, Firefoxem, Operou a určitě i v dalších browserech. Výsledek si můžete zobrazit zde. Pokud máte k postupu dotazy nebo návrhy, tak se nebojte vyjádřit v komentářích. cur

Komentáře

Chci odebírat RSS komentářů

Ove

tento čtenář není moc aktivní

12:17 - 13.07.08

Pěkné pěkné, je dobré znát další způsob.

Flavicius

tento čtenář není moc aktivní

22:19 - 13.07.08

Jen tak mimochodem, pokud zapisuješ v CSS nulovou hodnotu, nepiš za ni již jednotky, je to k ničemu a prostě se to nedělá. Vím, že to funguje, ale je to chyba.

Dash

tento čtenář není moc aktivní

21:38 - 21.07.08

Kdyby jsis ty obrázky udělal v GIFu, mohl by jsi použít průhledné pozadí (ale k alfa kanálu to má daleko). Jinak já už na PNG přešel, celkem dlouho je MSIE7 v doporučených aktualizacích a tudíž ho mají "všichni".

mibrt

autor blogu

22:08 - 21.07.08

[Dash]: musím s tebou souhlasit, taky tady u sebe na blogu jsou jen .png, na ie6 v tomhle na svých osobních projektech kašlu, jen lísteček na novinky v hlavičce mám hacknutý na .gif pro ie6. Jinak k tomu gifu: 256 barev mnohdy nestačí a výsledek je ozubený s ne moc dobrými efekty.

i-lopik

tento čtenář není moc aktivní

12:28 - 19.05.09

Co myslítee přesně tím "zakulacene rohy"? To jako udělat obdelník se zaklucenými rohy a pak rozstříhat na čtyři rohy?

mibrt

autor blogu

13:42 - 19.05.09

#814 i-lopik: přečíst článek

_ch4ng3d

tento čtenář není moc aktivní

15:13 - 11.09.09

Pokud jde jenom o růžky, tam bych se toho gifu nebál, málokdy člověk potřebuje růžek s víc jak 256 barvami. A pokud jde o PNG a IE6, velmi rád používám tuhle legraci:
http://labs.unitinteractive.com/unitpngfix.php
která javascriptem zprovozní průhlednost i v IE6

mibrt

autor blogu

10:16 - 12.09.09

#917 _ch4ng3d: Na png jsem si vytvořil vlastní řešení, které mi vyřeší png fix jak pro bg tak pro img, ale většinou to nenasazuju. Kdo má IE6 je sám proti sobě a optimalizaci volím dle cílového zaměření webu, ostatně jak to zaznělo i na konferenci Front-End Design Conference 09