| Autor | Zpráva | ||
|---|---|---|---|
| slovakCZ Profil |
#1 · Zasláno: 7. 2. 2013, 12:49:03
Ahoj,
měl bych dotaz, se kterým si moc nevím rady. Rád bych udělal nějakému boxu kulaté rohy a nemohu použít CSS3 (z toho důvodu, že box má nejen kulaté rohy, ale je nakreslen tak, že obsahuje ještě jednu vnitřní čáru a takový lehký vnitřní stín.. samozřejmě i to by se dalo v CSS3 elegantně vyřešit, ale musí to fungovat korektně i v IE7 například.. takže CSS3 nepřipadá v úvahu nyní). Kulaté rohy nejsou takový problém, pokud jsem nucen je řešit obrázky, tak se to snažím dělat tak, aby to bylo použitelné i na více místech webu. Takže to řeším nějak takto: CSS: .rounded { background:red; }
.rounded .content { color:#fff; padding: 20px; }
.rounded .tl { background: url(top-left-corner.png) top left no-repeat; }
.rounded .tr { background: url(top-right-corner.png) top right no-repeat; }
.rounded .bl { background: url(bottom-left-corner.png) bottom left no-repeat; }
.rounded .br { background: url(bototm-right-corner.png) bottom right no-repeat; }HTML: <div class="rounded">
<div class="tl">
<div class="tr">
<div class="bl">
<div class="br">
<div class="content">
Nejkay text
</div>
</div>
</div>
</div>
</div>
</div>kde jednotlivé obrázky jsou vždy NEPRŮHLEDNÉ PNG čtvercové soubory s vyříznutým kulatým rohem. Snad to z kódu bude pochopitelné. Výhoda tohoto řešení je na první pohled jasná. Šířka divu s třídou .rounded je dynamická a to je důležité. Rád bych proměnlivou šířku divu s třídou .rounded zachoval, ale problém nastává v případě, kdy je pormněnlivé i pozadí tohoto divu (tím myslím to, že celý box s kulatými rohy je jednou na bílém pozadí, podruhé na modrém a někdy je v pozadí dokonce obrázek nebo přechod). To už použít samozřejmě nemohu, jelikož jednotlivé čtverečky jsou neprůhledné a nebudou na pozadí pasovat. Moc mě nenapadá, jak problém řešit tak, abych zachoval proměnlivou šířku divu a zároveň to bylo použitelné na jakékoliv pozadí.. abych upřesnil jak takový box může vypadat, tak jsem ilustrační obrázek boxu nahrál sem: http://i47.tinypic.com/19sdjq.png jak je vidět, je potřeba vyříznout čtvercové obrázky rohů + horní, dolní, levý, pravý opakující se pruh, jelikož je uvnitř boxu červená linka :o) Napadá někoho, jak toto řešit? Děkuji za tipy. Tom |
||
| habendorf Profil |
#2 · Zasláno: 7. 2. 2013, 12:51:34
slovakCZ:
„obrázky jsou vždy NEPRŮHLEDNÉ PNG čtvercové soubory“ Důvod? |
||
| scheras Profil * |
#3 · Zasláno: 7. 2. 2013, 12:52:10
Proč neudělat ten obrázek jako průhledný gif?
|
||
| habendorf Profil |
#4 · Zasláno: 7. 2. 2013, 12:55:52
Aha, ty tam pak máš nějaké pozadí, které by pod těmi průhlednými rohy bylo vidět, že?
|
||
| slovakCZ Profil |
habendorf:
:) tak.. jde o to, ze v ukazkovem HTML ktere jsem poslal obrazky jsou nepruhledne z toho duvodu, ze prekryvaji cervenou barvu pozadi, ktere ma nastaven div s tridou .rounded.. pokud bych udelal obrazky pruhledne, tak bude prosvitat cervena i v rozich, coz samozrejme nechci, jelikoz cely div s tridou rounded je treba na modrem pozadi... a to je ten kamen urazu.. me se libi tahle metoda zanorenych divu, ale ocividne to nepujde pouzit kdyz budu chtit obrazky rohu pruhledne... budu muset udelat nejspis nejaky horni pruh, kde budou 3 divy.. 1. pro kulaty roh, v 2. divu bude obrazek opakujici se po ose X (drzim se tohoto designu: http://i47.tinypic.com/19sdjq.png) a 3. div bude zas kulaty roh... pod timto "pruhem" budou opet 3 divy.. 1. bude pruh opakujici se na ose Y, druhy bude samotny obsah s jednolitou barvou a 3. div opet obrazek na pozadi opakujici se po ose Y.. no a spodni pruh bude preklopeny vrchni pruh... nic lepsiho me bohuzel nenapada... tak uz jsem to vyresil... jestli by nekoho napadlo neco elegantnejsiho tak budu rad. Ja to vyresil takto: stahnout i s obrazky muzete zde: http:// u l o z t o .cz/xjXoFUT/round-zip (btw. proc je u loz to nevhodne slovo a nejde mi odeslat formular? :)) <html>
<head>
<style>
.wrapper {
width:500px;
padding: 20px;
border: 1px solid #ccc;
margin:auto;
}
/* Kulate rohy */
.rounded {}
.rounded .content { color:#fff; padding: 20px; }
.rounded .rounded-line { height: 10px; position: relative; }
/* Horni pruh */
.rounded .rounded-line.rounded-tr { background: url(tr.png) top right no-repeat; }
.rounded .rounded-line .rounded-tl { background: url(tl.png) top left no-repeat; height:10px; }
.rounded .rounded-line .rounded-t { background: url(t.png) top repeat-x; position: absolute; top:0; left:10px; right:10px; bottom:0; }
/* Dolni pruh */
.rounded .rounded-line.rounded-br { background: url(br.png) bottom right no-repeat; }
.rounded .rounded-line .rounded-bl { background: url(bl.png) bottom left no-repeat; height:10px; }
.rounded .rounded-line .rounded-b { background: url(b.png) top repeat-x; position: absolute; top:0; left:10px; right:10px; bottom:0; }
/* Obsahovy pruh */
.rounded .rounded-content .inner-padding { padding:0 10px; }
.rounded .rounded-content .inner-padding .inner-background { background: #3b610a; padding:10px; }
.rounded .rounded-content.rounded-r { background: url(r.png) top right repeat-y; }
.rounded .rounded-content .rounded-l { background: url(l.png) top left repeat-y; }
</style>
</head>
<body>
<div class="wrapper">
<div class="rounded">
<!-- start Horni pruh -->
<div class="rounded-line rounded-tr">
<div class="rounded-tl">
<div class="rounded-t"></div>
</div>
</div>
<!-- eof Horni pruh -->
<!-- start Obsahovy pruh -->
<div class="rounded-content rounded-r">
<div class="rounded-l">
<div class="inner-padding">
<div class="inner-background">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed neque eu lectus sollicitudin laoreet. Etiam commodo metus at massa placerat ac eleifend lacus vulputate. Morbi ut odio non purus malesuada dignissim. Vivamus at leo sit amet nisi aliquam tristique quis a ante. Duis consectetur venenatis augue ut dapibus. Ut urna nulla, sollicitudin id sodales eu, commodo non tellus. Etiam id metus turpis, ut sollicitudin neque. Nullam ultrices scelerisque mattis. Suspendisse condimentum, metus eu con
</div>
</div>
</div>
</div>
<!-- eof Obsahovy pruh -->
<!-- start Dolni pruh -->
<div class="rounded-line rounded-br">
<div class="rounded-bl">
<div class="rounded-b"></div>
</div>
</div>
<!-- eof Dolni pruh -->
</div>
</div>
</body>
</html> |
||
| habendorf Profil |
#6 · Zasláno: 7. 2. 2013, 16:10:00
Vršek souhlas, na střední část by stačily dva divy (nikoliv vedle sebe, ale v sobě).
To máš ještě dobrý, že ti obsah začíná až pod spodním okrajem horních rohů. Vem si, kdyby měl začínat hned někde nahoře ;o) |
||
| slovakCZ Profil |
#7 · Zasláno: 7. 2. 2013, 17:50:34
habendorf:
V prvni rade dekuji za cas a za ochotu se na kod mrknout. A k tvemu dotazu: Ano v tomto pripade by to slo vyresit jen 2mi divy (v te obsahove casti).. ale i to ma svuj duvod. Pokud bych mel divy jen 2, tak tomu "spodnejsimu" (.rounded-r) musim nastavit jednolitou barvu pozadi a zaroven obrazek na pozadi ktery se opakuje ve smeru Y. Pak tam bude div .rounded-l, ktery nastavi jen obrazek na pozadi vlevo opakujici se po ose Y a zaroven muze nastavovat vnitrni padding pro odsazeni textu a je hotovo. Problem v tomto reseni by ale nastal v pripade, ze bych potreboval jak levy, tak pravy obrazek mit pruhledny (treba kvuli vnejsimu vrzenemu stinu), pak by toto reseni nefungovalo, jelikoz nejspodnejsi div nastavuje i jednolitou barvu pozadi.. z toho duvodu jsem to vyresil takto, kdy prvnimi 2ma divy nastavim obrazky na pozadi po stranach, pak tam je div .inner-padding ktery jen odsadi obsah o 10px (coz je sirka techto obrazku) a az ten posledni div .inner-backgorund nastavi jednolitou barvu boxu.. tim by se mel eliminovat vyse zmineny problem. Pokud nekoho jeste neco napadne tak budu rad :) k tve druhe poznamce: - :) to taky uz znam, je to neprijemne.. ale ne neresitelne :) |
||
| habendorf Profil |
#8 · Zasláno: 7. 2. 2013, 19:16:38
slovakCZ:
„Problem v tomto reseni by ale nastal v pripade, ze bych potreboval jak levy, tak pravy obrazek mit pruhledny (treba kvuli vnejsimu vrzenemu stinu), pak by toto reseni nefungovalo, jelikoz nejspodnejsi div nastavuje i jednolitou barvu pozadi.. z toho duvodu jsem to vyresil takto, kdy prvnimi 2ma divy nastavim obrazky na pozadi po stranach, pak tam je div .inner-padding ktery jen odsadi obsah o 10px (coz je sirka techto obrazku) a az ten posledni div .inner-backgorund nastavi jednolitou barvu boxu.. tim by se mel eliminovat vyse zmineny problem.“ No pokud by tam byla průhlednost (kvůli tomu stínu třeba), tak máš pravdu. I když v určitých případech - ale není to univerzální - by to šlo i tak. Kdyby třeba minimální šířka byla 900 a maximální 1600, šlo by to na dva divy. V každém by se opakoval obrázek třeba 800 široký, barva by na pozadí nebyla. Ale šlo by to jen v případě, že samotná vnitřní barva divu by nebyla poloprůhledná. |
||
|
Časová prodleva: 11 let
|
|||
0