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

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

Címkék:  , , ,

5 comments to CSS3 példák, trükkök

  • Batman  írta:

    Huh, ez igazán hasznos. Köszönöm!

  • Szegedi István  írta:

    Szívesen Batman, igyekszem jó dolgokat írni.

  • mote  írta:

    sziaa
    nagyon jo a cikk.lenne egy kérdésem a sharing is caring! sáv a blogon belül talható vagy van hozzá valami script? ha tudnál segiteni benne az emailemre elküldenéd?
    Köszi
    András

  • Szegedi István  írta:

    Szia.
    Az egy kiegészítő, keress rá neten. Egyébként sexy bookmarks a modul neve.

  • mote  írta:

    köszi szépen!!!

Szólj hozzá!

A következő html tagek használata engedélyezett: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>