Kép lekerekítése CSS-ből
Sziasztok
Egy extra igény jelentkezett.
Konkrétan, hogy hogyan lehet megoldani, hogy a feltöltött téglalap alakú képek sarkai lekerekítve jelenjenek meg.
Arra jutottam, hogy ha egy háttér színű lekerekítést csinálnék középen áttetsző színnel png -ben az jó kiindulási alap egy maszkolásra. Hogyan tudnám egymásra tenni a 2 képet úgy hogy ne legyen a háttérbe egyik se és sajnos nem fix helyen vannak a képek. Van valami réteg magasság a Css-ben, amivel előrébb és hátrébb lehetne rakni a képeket??
Válaszokat előre is köszönöm.
SziLaj
■ Egy extra igény jelentkezett.
Konkrétan, hogy hogyan lehet megoldani, hogy a feltöltött téglalap alakú képek sarkai lekerekítve jelenjenek meg.
Arra jutottam, hogy ha egy háttér színű lekerekítést csinálnék középen áttetsző színnel png -ben az jó kiindulási alap egy maszkolásra. Hogyan tudnám egymásra tenni a 2 képet úgy hogy ne legyen a háttérbe egyik se és sajnos nem fix helyen vannak a képek. Van valami réteg magasság a Css-ben, amivel előrébb és hátrébb lehetne rakni a képeket??
Válaszokat előre is köszönöm.
SziLaj
z-index
Firebug + JQuery rounded corners
http://demo.monofactor.com/cleanity/index.html?username=&pass=&submit.x=4&submit.y=10
Firebug-al.
Ha jól látom van egy ilyen:
<script src="js/jquery.corners.min.js" type="text/javascript">
vicc
SzétnyÍló ajtók
A legegyszerűbb megoldás nem-fix képk esetén az úgynevezett "szétnyÍtló ajtók" (sliding doors) megoldás - oké, esetünkben nem biztos, hogy helyes a név, de a technika hasonló.
Ennek az a lényege, hogy a kép fölé pozÍcionálsz 4 db div-et (ha sem a magasság sem a szélesség nem fix a kép esetében), mindegyik háttereként megadod az adott "sarkat", ami ugyebár egy png vagy gif, ami a "kerekÍtést" tartalmazza. Értsd: háttérszÍnnel megegyező kis konkáv alakzat, ami egy négyzet mÍnusz egy negyed körcikk tulajdonképpen :)
Mindegyi div máshol és máshogy elforgatva tartalmazza egy a kis sarkot háttereként (jobb felső, jobb also, bal felő bal alsó).
Kb ennyi. Ha a DIV-ek a kép után következnek a HTML kódban, akkor nincs szükség z-indexre, mert ilyenkor a böngésző a html kód szerint "egymásra pakolja" az esetlegesen átfedő elemeket.
A sliding doors-ról egyébként itt olvashatsz egy jó cikket,igaz, egy "egy dimenziós", tehát csak horizontálisan nyÍlnak az ajtók, de gondolatébresztőnek tökéletes:
http://www.alistapart.com/articles/slidingdoors/
Css.sel
{
-moz-border-radius: 1em;
}
ezzel a paranccsal le lesznek kerekítve.
6 éves
Csak a -moz- prefixet kell