Lekerekített, árnyékolt keretek

**holdenx** · 2010-03-20, 19:23

Sziasztok!

Szeretném, ha az oldalamon több, körben árnyékolt és lekerekített sarkú kis dobozokban lennének a különböző szövegtartalmak.
Hogyan tudnám ezt egyszerűen és szépen megcsinálni?

Köszi!

Hasonló témák:

Lekerekített sarkú div-ek

**h0wReYa** · 2010-03-20, 19:27

Keresel egy oldalt, ahol hasonló megoldást alkalmaznak, megnézed a css fileban, h milyen megoldással érik ezt el, és magadévá teszed a módszert.

Általában:
1, felső rész(div) aminek háttere a lekerekített rész
2, köztes tartalom ismétlődő rész, kétoldali árnyék képe repeat-y-al
3, alsó rész háttere megintcsak lekerekített

Árnyék nélkül: moz border radiussal

**apro** · 2010-03-20, 19:48

Nézd meg ezt a videót, és választ kapsz a kérdéseidre

http://doctype.tv/borders

**Geri** · 2010-03-20, 19:50

apro eredeti hozzászólása

Nézd meg ezt a videót, és választ kapsz a kérdéseidre

http://doctype.tv/borders

csak ez nem működék a legújabb böngészők kivételével sehol. szóval erre nem érdemes még alapozni.

**Sapipeti** · 2010-03-20, 20:20

Én annó úgy csináltam ilyet, hogy fogtam egy táblázatot:

Kép Kép Kép
Kép Szöveg Kép
Kép Kép Kép

A képek pedig kis árnyékolt-lekerekített dolgok

**WSzP** · 2010-03-21, 03:37

h0wReYa eredeti hozzászólása

Általában:
1, felső rész(div) aminek háttere a lekerekített rész
2, köztes tartalom ismétlődő rész, kétoldali árnyék képe repeat-y-al
3, alsó rész háttere megintcsak lekerekített

Ha a szélesség állandó akkor ez a megoldás.

Ha nem, akkor a fenti általánosítva, csak éppen kell négy div egymásba rakva a négy sarok miatt.

Ha meg tiszta CSS-t szeretnél, akkor ott a border-radius a kerekítéshez és a box-shadow az árnyékhoz. Ha nem csak a legmodernebb böngészőkön akarod futtatni, akkor le kell kezelni a többit is. Például:

HTML kód:

 -moz-box-shadow:2px 2px 3px #8e8fb2;-webkit-box-shadow:2px 2px 3px #8e8fb2;box-shadow:2px 2px 3px #8e8fb2

Nyilván IE6, 7 de még 8 alatt se fog ez muzsikálni. De 9-es alatt már van border-radius, és hamarosan lesz box-shadow is (de még nincs). Szóval 2010-re Microsofték is rájöttek, hogy nem ártana támogatni azokat a dolgokat, amiket a legtöbb fejlesztő amúgy is csak öt év múlva fog használni. Hogy aztán majd lehessen szidni az IE9-est, hogy milyen bugosan kezeli.

**MAG** · 2010-03-21, 08:44

Itt van párféle megoldás összegyűjtve:
hxxp://www.devwebpro.com/25-rounded-corners-techniques-with-css/

A kerekített box választását befolyásolják különböző tényezők, pl hogy szélességben is dinamikus kell hogy legyen vagy keret szükséges?