L

Tejüveg (frosted glass) effekt SVG-vel

A napokban elég sokat olvastam a különböző css effektekről. Sokszor van, hogy a grafikus speciális effekteket pakol egy-egy képre és ezeket meg kellene próbálni a lehető legélethűbb módon visszaadni. Ilyen effekt a mai tejüveg effekt vagy angolul a frosted glass effect.

GIMP alatt készítettem egy mintát, hogy körülbelül milyennek kellene lennie a a végső képünknek.

Nekünk innen az 5 pixelnyi külső keret fog kelleni. Ez is egy olyan effekt, amit legtöbbször a kép túlvágásával érünk el, így ha módosul a háttér, változtatunk a környezeten, akkor a képet ismét körbe kell vágni, és ráadásul pngben kell elmentenünk, ami az átlátszóság miatt jóval nagyobb méretű lesz.

Tehát, most el kell dönteni, hogy mit használunk. Első körben teljesen CSS alapokon akartam megcsinálni blur filterrel és CSS maskkal, de a böngésző támogatottságunk még mindig nem teljes. Canvast is használhatnánk, de ahhoz javascript szükséges. Így marad az SVG, aminek a böngésző támogatottsága is jó.

Szöveg textúrák CSS maszkolással

Vannak olyan helyzetek, amikor egy szöveg baromi jól illeszkedik az oldal designhoz, ha speciális effektek vannak rajta. Ha ezeket az effekteket lehagyjuk, akkor elveszíti az oldal a különleges kinézetét. Ilyenkor természetesen elkezdjük a designból képként kivágni a szövegeket. Ugye mondanom sem kell, hogy ez miért nem jó megoldás.

Első negatívum, hogy minden apró módosításkor, ismét át kell küldeni a grafikusnak, ő áttervezi, visszaküldi, kivágod, felteszed a szerverre. Semmi jó nincs ebben.

Második negatívum, hogy a png alapból jóval több helyet foglal el, mint a sima szöveges információ. Tegyük fel van 10 darab 30 KiloByte-os szöveged, már ott jársz, hogy 300 kiló csak egyetlen oldalon a képek mérete. Ne is beszéljünk arról, hogy ezeket mindet egyesével lekéri a böngésződ a szerverről. Rengeteg plusz idő és ráadásul rengeteg plusz információ.

CSS: Több elem sötétítése hover-re

Elég nehéz értelmes címet adni neki :) tehát amiről szó van. Van egy több boxból álló menü, slide vagy bármilyen panelünk. A feladat, hogy alap esetben minden box legyen világos, ha rávisszük az egeret, az aktuális box világos marad, a többi besötétedik.

A megoldást nemrég még simán jQuery-ben oldottam volna meg, de kicsit filózva rájöttem, hogy CSS segítségével is megoldható a probléma.

Mit is kell végig gondolni? Mi történik? Van egy nagy div, benne több kisebb div.

Leoamros

X

Üdv! Ha még személyesen nem ismerjük egymást, Smajda László vagyok, de szólíts csak egyszerűen Laccának vagy Leoamrosnak. Olyan netbúvároknak osztom az észt, akik szárnyaikat próbálgatják a PHP, MySQL, JavaScript világában, és elakadnak valamelyik folyamat során. Főleg a saját tapasztalatokat írom le, ettől függetlenül kérdezhetsz bátran, lehetőségeimhez mérten válaszolok.

Kategóriák
Címkék
Social Media
Eszközök