Egyperces: CSS - object-fit
Elég sokat gondolkodtam rajta, hogy mikor mondjuk csinálok egy képgalériát, vagy csak simán egy webshop termék oldalát, meg tudom-e oldani valahogy, hogy a programnak ne kelljen 1000 különböző képet létrehoznia.
Volt egy oldal, ahol a grafikai tervek miatt 16 különböző méretarányú képet kellett használni. Tehát írtam egy php scriptet, ami mindig legenerálja - ha nem létezik - a megfelelő méretű képet. Ezzel eddig nincs is gond, mert a képek a méretezés miatt csak néhány KB helyet foglalnak, de azért sok kicsi sokra megy.
Most találtam rá nemrég a CSS egyik szolgáltatására az object-fitre.
Teljes bejegyzés
Egyperces: CSS mértékegységek
Már írtam hosszabban néhány relatív mértékegységről, mint például a vh és vw használatáról vagy a rem-ről.
Sokan bele sem gondolunk szerintem, hogy hány különböző méretezési lehetőség van a CSS-ben. Én is a napokban futottam bele egy érdekes oldalba, ahol összeszedték és vizuálisan ábrázolták is mindegyiket.
A CSS Ruler névre keresztelt oldalon megtaláljuk ábrázolva az összes relatív, abszolút és látótérhez százalékos mértékben számolt értékeket és akár játszhatunk is vele:
Teljes bejegyzés
Font méretezés "rem"-mel
Elég heves viták folynak napjainkban is a megfelelő fontméret egységek kiválasztásában. Sajnos rengeteg előnye és hátránya is van a különböző technikáknak és nem ez az egyetlen felmerülő kérdés velük kapcsolatban.
Két fő technikát használunk/használtunk a CSS3 megjelenéséig.
- Font méretezés pixelben
- Font méretezés em-mel
Mielőtt bármibe belekezdenénk vegyük sorra, mik a rég bevált módszerek.
Teljes bejegyzés
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ó.
Teljes bejegyzés
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ó.
Teljes bejegyzés
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.
Teljes bejegyzés