‘CSS3 gallery’ címkét tartalmazó cikkek
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 »