A ‘HTML5 & CSS3 Image Gallery’ kategória archívuma
Az elmúlt időben több e-mailt is kaptam, amiben kéritek, hogy nézzünk példát egy manapság népszerű képi effekt használatára, de flash nélkül. Ha nem bánjátok én egy manapság divatos, de tutorialok-ban nem szereplő effektet választottam, ez nem más, mint az előtte – utána képi effektus (before after image effect).
Ehhez nem kell semmi más, csak a népszerű jQuery. A szükséges plugin-t leszedhetitek innen. Vagy a weboldalamról zip-ben tömörítve.
A kiindulóállapotom, hogy van két képem, ami azonos méretű és tartalmilag összefüggnek. Ezeket szeretném valahogy egymásra pakolni és egy kis vezérlővel állíthatóvá tenni, hogy melyikből mit lássak. Szerencsére a plugin használatával gyakorlatilag nullára csökkenthető a kódolás. Tovább olvasom »
Mivel többen jeleztétek, hogy több galéria is lehetne az oldalon, úgy gondoltam egy másik számomra érdekes galéria modult mutatnék be nektek. Ez nem más, mint a polaroid technikára hajazó megjelenítés. A példában ismét a HTML5, valamint főként a CSS3-ra fogunk építkezni JavaScript nélkül. Itt is külön mutatnám be nektek a HTML5 és a CSS3 részt. A demókat érdemes Firefox-ban vagy Chrome-ban megtekinteni, mert ugyan az IE egy szuper böngésző, de nem 100%-ig támogatja a CSS3-at. A kódból kiemelném a box-shadow és a transform: rotate elemeket.
Nézzük is meg ezeknek a paraméterezését, hogy is működnek.
- box-shadow – Szerintem az egyik legjobb újdonság, mert kép felhasználás nélkül tudunk árnyékolást készíteni vele. Használata:
box-shadow: horizontális árnyék, vertikális árnyék, homályosítás rgba(szín, átlátszóság) A galériánkban aktívan fogjuk használni. - transform: rotate (deg) – Elforgatás, szintén nagyon hasznos a képgalériák készítéséhez.
Polaroid galéria demo
Ez a cikk főként a CSS3 -ról fog szólni, arról, hogyan tudjuk kihagyni a JavaScript-et (JS) a kódjainkból és tisztán CSS3-al megvalósítani az áhított galéria effekteket. A példában nézzünk, egy manapság népszerű Slider effektet pusztán CSS3-al, JS nélkül.
CSS3 slider preview
A HTML5 része meglehetősen egyszerű lesz, hiszen a nagy részét a CSS3 dolgozza fel. Méghozzá úgy, hogy csináltam egy div-et aminek az id-ja images, ide kerülnek a képek, és egy button-t ami pedig a gombokért felel. A container a megjelenítés finomítását fogja szolgálni. Minden diát elláttam egy számmal, hogy tudjuk vezérelni a képek megjelenését, ezeket egy a tag-ba tettem. Lássuk a HTML5 kódunkat: Tovább olvasom »