| Autor | Zpráva | ||
|---|---|---|---|
| slovakCZ Profil |
#1 · Zasláno: 2. 4. 2010, 12:34:11
Dobrý den, jak vyřešit kulaté rohy u obrázku?
mám na webu nějaký obrázek, např test.jpg a rád bych, aby měl kulaté rohy, ale nechci jej upravovat v grafickém editoru. Zkoušel jsem něco takového:
<div class="round">
<div class="r-t-l">
<div class="r-t-r">
<div class="r-b-l">
<div class="r-b-r">
<img src="common/images/content/1.gif" alt="titulek" />
</div>
</div>
</div>
</div>
</div>
jde o to ze: r-t-r je nejaky div, ktery ma v pozadi nastaveny takovyto obrazek (ten maly ctverecek): http://i42.tinypic.com/sxn1fn.gif Takoveto ctverecky tam jsou 4. Vzdy maji pulku pruhledne pozadi a pulku bile (jelikoz web ma bile opzadi).. takze by to melo tvorit efekt kulateho rohu... nastava ovsem problem v tom, ze obrazek (<img>) se mi vykresli nad tyto divy a tim padem efekt zaobleni je skryty pod obrazkem. (takze jakoby tam vubec nebyly) lze tedy nejakym zpusobem tyto 4divy pro kulate rohy nastavit tak, aby se ve finale vykreslily nad obrazkem? CSS snad neni nutne dodavat, jelikoz r-t-r, r-t-l.... maji nastavene pouze: background:ulr(cesta k ctevercku rohu.png) top left no-repeat; (top left vzdy zakezi na tom, jaky roh se ma vykreslit.. nekdy je bottom right apod.) Dekuji za rady ;) |
||
| Railbot Profil |
#2 · Zasláno: 2. 4. 2010, 12:38:17
Absolutní pozicování? V případě pevně daných rozměrů asi to nejjednodušší.
|
||
| slovakCZ Profil |
samozrejme... problem je v tom, ze bych tento zpusob chtel pouzit na vsekere prvky, ktere maji mit kulate rohy.. je to velmi efektni a funguje to v tomto pripade:
(tedy kdyz misto obrazku mam nejaky div s tridou box a tride box nastavim pozadi... kulate rohy se vytvori najednicku. Tride round pote nastavim sirku dejme tomu 200px.) <div class="round">
<div class="r-t-l">
<div class="r-t-r">
<div class="r-b-l">
<div class="r-b-r">
<div class="box">text</div>
</div>
</div>
</div>
</div>
</div>
problem je tedy v tom, ze ne vzdy znam pevne rozmery.. konkretne u techto obrazku je neznam vubec.. obrazyk se pomoci ajaxu budou nasictat a rotovat po X sekundach a kazdy muze mit jiny rozmer... tim padel odpada absolutni pozicovani. napadly me 2 reseni jak tuto situaci resit.. ovsem nejsou moc efektni a vyresi jen tuto jednu situaci.. pro dalsi problemy bych musel stylovat znovu --> vetsi CSS, zbytecna prace navic atd.... Jde mi tedy opravud o nejake univerzalni reseni =o/ Moderátor Chamurappi: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
|
||
| Railbot Profil |
#4 · Zasláno: 2. 4. 2010, 12:46:56 · Upravil/a: Railbot
V tom případě je zbytečné znovu vynalézat kolo. Na internetu lze nalézt několik univerzálních řešení, třeba pomocí nějakého z JS frameworků.
|
||
| Plaváček Profil |
#5 · Zasláno: 2. 4. 2010, 12:47:27 · Upravil/a: Plaváček
slovakCZ:
A co se porozhlédnout po možnostech, které nabízí Javascript? Třeba Nifty Corners? http://www.html.it/articoli/nifty/index.html P.S. aha, ale nevím, jestli to umí obrázky. No, to si zjistíš sám. |
||
| slovakCZ Profil |
#6 · Zasláno: 2. 4. 2010, 12:48:26
podle me bude stacit nastavit pro:
.round img nejakou vlastnost, ktera zajisti, aby se nezobrazoval obrazek takto vysoko (neco ve smyslu z-index)... jelikoz z tohoto problemu jsem pochopil, ze text nebo obrazek maji ve vykreslovani vetsi prednost a vzdy se vykresli vyse (kdyz si to predstavime ve vrstvach). Tim padem nejaky div, ktery ma nastaveny background, se nemuze dostat pred tento obrazek a vzdy je posazen az za nej.. Takze je potreba nastavit neco ve smyslu: background-z-index > .round .img (samozrejme obrazne receno) // omlouvám se za diakritku |
||
| slovakCZ Profil |
#7 · Zasláno: 2. 4. 2010, 12:51:40
Railbot, Plaváček:
Právě, že klient si přeje naprostou nezávislost na JS. V případě, že nepůjde ajaxové načítání obrázků, jsou k dispozici šipky, které provedou redirect ve stylu: mujweb.cz?next-img=1, takže web je opravdu přístupný pro všechny uživatele. Klient si vyloženě přeje zachovat grafiku i při vypnutém JS, což by při Vašich návrzích řešení samozřejmě nefungovalo. Zkušeností mám dost, je mi jasné, že ne vždy se dá situace vyřešit (zde to možná bude ten případ a hold, když někdo vypne JS, tak neuvidí kulaté rohy u obrázků..) ale právě proto se ptám Vás, jelikož řešení pomocí JS mne napadlo již také. |
||
| Plaváček Profil |
#8 · Zasláno: 2. 4. 2010, 12:55:06
slovakCZ:
Neuvidím-li jako běžný uživatel z jakéhokoliv důvodu kulaté rohy u obrázků, nestane se vůbec nic. Páchat kodérské harakiri kvůli nepodstatnému grafickému detailu je zbytečnou ztrátou času. |
||
| slovakCZ Profil |
#9 · Zasláno: 2. 4. 2010, 12:59:30
Plaváček:
Z vlastní zkušenosti jistě víš, že né každý klient rozumí jazyku HTML a stylům CSS. Vidí v tom velmi jednoduchou věc a při vysvětlování, že to je opravdu zbytečné si nedá říct. Každopádně díky za rady, pokusím se ještě něco dohledat na internetu.. Ale psát zvlášť kód pro každý elemeent s kulatými rohy opravdu nebudu :) |
||
| Plaváček Profil |
#10 · Zasláno: 2. 4. 2010, 13:16:19
slovakCZ:
Pokud budou mít obrázky stejnou velikost (nebo řekněme třeba jenom tři různé velikosti), je řešení relativně snadné. Pokud ale dopředu rozměry obrázků neznáš, máš trochu problém. |
||
| slovakCZ Profil |
#11 · Zasláno: 2. 4. 2010, 13:22:22
Plaváček:
Výše jsem psal, že rozměry neznám. V tom je ten problém :) no nic, pokusím se to vyřešit javascriptem, třeba to půjde. |
||
| slovakCZ Profil |
#12 · Zasláno: 2. 4. 2010, 13:42:26
tak jsem to ve finále vyřešil takto:
<div class="round">
<div class="r-t-l"><img src="common/images/layout/background/r-t-l.png" widht="4" height="4" alt="ilustrační obrázek" /></div>
<div class="r-t-r"><img src="common/images/layout/background/r-t-r.png" widht="4" height="4" alt="ilustrační obrázek" /></div>
<img src="common/images/content/1.gif" alt="titulek" />
<div class="clr"> </div>
<div class="r-b-l"><img src="common/images/layout/background/r-b-l.png" widht="4" height="4" alt="ilustrační obrázek" /></div>
<div class="r-b-r"><img src="common/images/layout/background/r-b-r.png" widht="4" height="4" alt="ilustrační obrázek" /></div>
</div>
Jediný problém je ten, že je nutnost nastavit divu s tř. round pevnou šířku. JS se tedy nevyhnu, musím nějakým způsobem zjistit šířku img tagu a poté aktualizovat šířku .round.... nic moc efektivní řešení teda =o/ ale lepší asi nenajdu |
||
| joe Profil |
#13 · Zasláno: 3. 4. 2010, 03:05:25 · Upravil/a: joe
Prosím? Co to tady píšete téměř všichni za nesmysly?
Jde to a velmi jednoduše. Šířku není třeba zadávat. Tvoje řešení opravdu efektivní není a to z následujících důvodů: 1. Obrázky tvořící design by měly být definovány pomocí CSS. 2. Na takovou věc jako jsou rohy stačí mít jen jeden obrázek a měnit jeho pozici. EFEKTIVNÍ ŘEŠENÍ (otestováno v IE6, Opera, Safari, Chrome, Firefox)
<style>
.container { display: inline-block; position: relative; _display: inline; _zoom: 1; }
.corner { position: absolute; width: 10px; height: 10px; line-height: 0; font: 0; background: blue; }
/*container .corner { _display: none; }*/
</style>
<div class="container">
<img src="1.jpg" id="obr">
<div class="corner" style="left: 0; top: 0;"></div>
<div class="corner" style="right: 0; top: 0;"></div>
<div class="corner" style="left: 0; bottom: 0;"></div>
<div class="corner" style="right: 0; bottom: 0;"></div>
</div>
<br><br><br><br>
<button onclick="document.getElementById('obr').src = '2.jpg'"></button>
Plaváček Jaký problém? |
||
| Plaváček Profil |
#14 · Zasláno: 3. 4. 2010, 06:30:31
joe:
„Jaký problém?“ Problém, který jsi právě pěkně názorně předvedl. Fakt, že drtivou většinu HTML kódu budou tvořit prázdné a prakticky zbytečné elementy. Než tohle řešení, raději bych použil nějaký šikovný grafický program, který samotným obrázkům umí dávkově udělat zaoblené rohy a mám vyřešeno. |
||
| joe Profil |
#15 · Zasláno: 3. 4. 2010, 08:12:50
Plaváček:
To ale není problém, to je řešení. A podle mě daleko lepší, než mršit obrázky kulatýma rohama a uložit jako JPG, kde se rohy ještě více rozmažou a obrázek ztratí na kvalitě. A divil bych se, pokud by neexistoval program, který by uměl dát rohy do libovolně velkého obrázku a uložit. Nemyslím si, že by to bylo něco těžkého na programování... |
||
|
Časová prodleva: 3 dny
|
|||
| zutra Profil |
#16 · Zasláno: 6. 4. 2010, 13:35:56
Jestli těch obrázků není nepřiměřeně moc, já bych si na to udělal makro ve photoshopu, jednou už jsem tak něco řešil a bylo to raz dva :)
|
||
|
Časová prodleva: 14 let
|
|||
0