CSS3 példák, trükkök

Aki újdonságokat szeretne látni és tanulni, annak különösen ajánlom a következő cikket. A CSS (Cascading Style Sheets) vagyis az általunk használt és szeretett stílusleíró nyelv harmadik generációjának a CSS3-nak mutatjuk meg néhány trükkjét.

A jövő a CSS3 megoldásait fogja ötvözni weben a HTML5 és a Javascript függvénytárak ötleteivel. Ezért is fontos, hogy előre fele tekintsünk és már kezdjük megismerni a következő generációs CSS trükköket, szabályokat.

A CSS Wizardry honlapján található néhány CSS3 példa.

CSS Wizardry

• Az első példában a megszokott paragrafust hasábokra tudjuk bontani, ilyen esetekben korábban táblázatot, vagy div-eket használtunk.
• A második példa már látványosabb és emellett hasznos is. Sokan voltak már úgy, hogy a sorokat cellákat szeretné kiemelni, amikor a kurzor fölé kerül, most a CSS3-ban egyszerűen megvalósítható némi designnal vegyítve.
• A harmadik példa azt hiszem magáért beszél. Ha egyszerűbb árnyékot szeretnénk egy divnek, vagy képnek adni, akkor nem kell a photoshopban rajzolgatni és kivágni a képeket, itt a CSS3 megoldása a Box Shadow és ha még ez sem elég, forgassuk el a képeket és az egyszerű képekből látványos design kerekedik.

Egy jó tanács a végére, ha ezeket az új CSS3 megoldásokat szeretnénk használni, tisztában kell lennünk azzal, hogy nem minden böngésző támogatja. A leggyakrabban használt Internet Explorer szinte alig ismeri fel a CSS3 szabályait, viszont a Mozilla Firefox, Opera és a Google Chrome legújabb verziói már a legtöbb szabályt meg tudja valósítani.

CSS Wizardry