Kezdő útmutató a CSS3-hoz

Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.

A 2005-ös bejelentés óta a tervezők és a fejlesztők szorosan figyelik és figyelik a Cascading Style Sheet 3-as szintjének fejlesztését, vagy a CSS3 néven ismert nevét. Mindannyian izgatottak vagyunk, hogy megkapjuk a CSS3 új funkcióit - a szöveg árnyékát, a képeket határoló határokat, opacitást, több hátteret, stb..

A mai napig nem minden CSS3 szelektor teljesen támogatott. De ez nem jelenti azt, hogy nem tudunk új CSS3 dolgokat tesztelni. Ez a hozzászólás minden olyan tervezőnek és fejlesztőnek szentelt, aki már ismeri a CSS 2.1-et és szeretné, hogy a CSS3.0-on szennyezett legyen a keze..

Ez hasznos CSS3 olvasmányok, mintakódok, tippek, oktatóanyagok, csaló lapok és így tovább. Nyugodtan használd őket a projektjeidben, csak győződj meg róla, hogy kecsesen illeszkedik a kompatibilis böngészőkhöz.

A CSS3 használatának megkezdése

Bevezetés a CSS3-ba

A CSS és a CSS3 (útiterv) hivatalos bemutatása. Ez a dokumentum átfogó képet ad a CSS3 fejlesztéséről.

CSS3: Tervezzen a következő szintre

A CSS3 előnyei a CSS3 tulajdonságok és szelektorok magyarázataival és példáival.

Számos trükkö a CSS3-mal

A Webmonkey számos alapvető trükköt hoz létre a CSS3-ban, beleértve a lekerekített szegélyeket, a határokat, az árnyékokat, a kép trükköket és még sok más.

Interjú: Hat kérdés Eric Meyerrel a CSS3-ról

A Six Revision-i emberek interjút készítettek Eric Meyer-nek értékes betekintéssel és válaszokkal a CSS3-ról.

CSS3: Progresszív fejlesztés

Hogyan használhatja a kecses (vagy progresszív) javítási technikákat a CSS3 funkciók használatára az őket támogató böngészőkben, miközben biztosítja, hogy a kódja továbbra is kielégítő felhasználói élményt nyújtson olyan régebbi böngészőkben, amelyek még nem támogatják ezeket a funkciókat.

CSS3: Háttér és határok

Lekerekített határok (Határ-sugár)

Útmutató a CSS3-asok lekerekített határának létrehozásához border-radius ingatlan.

Lekerekített határok a képpel (Border-képek)

Hogyan használjuk a határokon lévő képeket border-image ingatlan.

CSS3 határok, hátterek és dobozok

Részletes magyarázat az új CSS3 tulajdonságokkal, mint például: background-klip, background-eredetű, háttér-attachment, box-shadow, box-dekoráció-break, border-radius és border-image.

CSS3: Szöveg

Magasnyomó hatás

Egyszerű Magasnyomó hatás létrehozása a CSS3 segítségével.

Hat szöveghatás szöveges árnyék használatával

A szöveghatások közé tartozik: vintage / retro, neon, inset, anaglyphic, tűz és társasjáték.

Gyönyörű tipográfia

Hogyan készítsünk alapszintű jelölést, és a tiszta CSS3 segítségével vonzó és szép tipográfiai formává alakítsuk át.

Szövegfordítás

Használ egy kép sprite-ot és egy CSS-et, hogy a dolgokat jobbra helyezzék.

Vázlat szöveg

Hogyan lehet felvázolni egy körvonalat vagy stroke-ot a szöveghez a CSS3 segítségével text-stroke- ingatlan.

Szöveg maszkoló hatás

Interaktív szöveges maszkoló hatás a text-shadow CSS tulajdonság.

Kapcsolja ki az animációt a CSS3-mal

Ditch Javascript és a CSS3-val teljes mértékben hozza létre a hatást.

CSS kiválasztási stílus

Szövegválasztási stílus módosítása a CSS3 segítségével.

CSS3: Menü

Több oszlopos tartalom

A CSS3 használatával oszlopokat hozhat létre a webhelyén anélkül, hogy minden egyes oszlophoz hozzá kellene rendelnie az egyes rétegeket és (vagy) bekezdéseket.

Szexi eszköztippek a Just CSS segítségével

A fejlődő CSS szabvány használatával javíthatunk néhány szép böngésző-böngésző eszköztippet.

További tippek:

Tiszta CSS3 eszköztipp
CSS3 eszköztippek.

Legördülő menü

Hogyan hozhatunk létre Apple.com-on egyforma többszintű legördülő menüt a border-radius, box-shadow, és text-shadow.

CSS3-Csak Tabbed Area

Kattintson egy lapra, elrejti az összes panelt, mutassa meg azt a lapot, amelyikre csak kattintott - mind a CSS-el.

3D szalagok CSS3-mal

Hozzon létre szép CSS3-as 3D-s szalagokat.

CSS3: Csepp árnyék

Csepp árnyék a képen

Mutasson be több technikát és néhány lehetséges megjelenést az árnyékok eldobásához a képek használata nélkül.

Glow fülek Box Shadow-val

Hogyan készítsünk intuitív és gyönyörű füleket a CSS3-ban kép nélkül.

CSS3: Gombok

Oktató: Szép gombok

Hogyan készítsünk szép, böngészővel kompatibilis CSS3 gombokat, amelyek kíméletesen lebomlanak.

Beszédbuborékok

A CSS 2.1-vel létrehozott és a CSS3-val továbbfejlesztett beszédbuborék-hatás különböző formái.

Github egyaránt gombok

A CSS3 segítségével lehetséges gombok gyűjteménye, ugyanakkor a lehető legegyszerűbb jelölés.

Spinning, Fading Icons a CSS3 és a MooTools segítségével

Hogyan használjuk a CSS3 és a MooTools-t a dymanikus, forgó elemek létrehozásához.

Kép átfedés

A CSS3 határkép-tulajdonság gyakorlati alkalmazása.

Több

CSS3 + Mootools. Példa a motorools kísérletezésére. Ez hozzáadja a CSS3 tulajdonságait a MooTools keret alapvető munkájához.
Robbanó logó a CSS3 és a MooTools vagy a jQuery használatával. Vegyünk statikus képet, és animált, robbanó hatást gyakoroljon az egérre.
A HTML 5 és CSS 3. teljesítménye A HTML 5 és a CSS 3 egyre népszerűbbé válik, a Perishable Press itt elmagyarázza, hogyan és miért.
Spinning sugarak CSS3 animációkkal és JavaScript példával. Egyszerű és finom ray spinning hatás a kép hátulján.
CSS3 Polaroid fotógaléria. Hogyan készítsünk hűvös, polaroid fotókat, tiszta CSS stílussal.
HTML 5 és CSS 3: A hamarosan használt technikák. A HTML5-ös és a CSS3-as blogból készült blog létrehozása.