Vodnik za začetnike za CSS3
Že od objave leta 2005 je razvoj 3 stopnje kaskadnega slogovnega lista ali bolj znanega kot CSS3 skrbno spremljali in spremljali mnogi oblikovalci in razvijalci. Vsi smo navdušeni, da smo v rokah novih funkcij CSS3 - besedilne sence, meje s slikami, neprosojnost, več ozadij itd..
Danes še niso v celoti podprti vsi selektorji CSS3. Toda to ne pomeni, da se ne moremo zabavati pri testiranju novih stvari CSS3. Ta objava je namenjena vsem oblikovalcem in razvijalcem, ki že poznajo CSS 2.1 in želijo umazati roke na CSS3.0.
To je zbirka uporabnih CSS3 branja, vzorčnih kod, nasvetov, vadnic, goljufij in še več. Prosto jih lahko uporabite v svojih projektih, samo poskrbite, da bo graciozno padla na nezdružljive brskalnike.
Kako začeti s CSS3
Uvod v CSS3
Uradni uvod v CSS in CSS3. Ta dokument vam ponuja splošno idejo o razvoju CSS3.
CSS3: Prenesite načrtovanje na naslednjo raven
Prednosti CSS3, s pojasnili in primeri lastnosti in selektorjev CSS3.
Več trikov s CSS3
Webmonkey vas popelje skozi nekaj osnovnih trikov v CSS3, vključno z zaokroženimi mejami, robovi, senci, slikovnimi triki in drugimi.
Intervju: Šest vprašanj z Ericom Meyerjem o CSS3
Ljudje v šestih revizijah so intervjuvali Erica Meyerja z dragocenimi vpogledi in odgovori na CSS3.
CSS3: Progressive Enhancement
Kako uporabite elegantne (ali postopne) izboljševalne tehnike za uporabo funkcij CSS3 v brskalnikih, ki jih podpirajo, hkrati pa zagotovite, da bo vaša koda še vedno zagotavljala zadovoljivo uporabniško izkušnjo v starejših brskalnikih, ki še ne podpirajo teh funkcij.
CSS3: Ozadje in meje
Zaokrožene meje (obrobni polmer)
Vodnik za ustvarjanje zaokrožene meje s CSS3 polmer meje nepremičnine.
Zaobljene meje s sliko (slike obrobe)
Kako uporabljati slike v mejah s mejna slika nepremičnine.
CSS3 meje, ozadja in polja
Podrobna razlaga s primeri novih lastnosti CSS3, kot so: ozadje posnetek, izvora ozadja, priloga v ozadju, box-shadow, box-decoration-break, polmer meje in mejna slika.
CSS3: Besedilo
Učinek črk
Z CSS3 ustvarite preprost učinek tiskanja.
Šest besedilnih učinkov, ki uporabljajo besedilno senco
Besedilni učinki vključujejo: vintage / retro, neon, inset, anaglifično, ognjeno in družabno igro.
Lepa tipografija
Kako narediti osnovno označbo in jo preoblikovati v privlačen in lep tipografski dizajn preko čistega CSS3.
Obračanje besedila
Uporablja slikovni sprite in potisnite CSS, da stvari postavijo prav.
Besedilo orisa
Kako dodati besedilo ali obris v besedilo z uporabo CSS3 text-stroke nepremičnine.
Učinek maskiranja besedila
Interaktivni učinek maskiranja besedila z uporabo text-shadow Lastnost CSS.
Ponovno povezovanje (animacija) s CSS3
Izklopite Javascript in v celoti ustvarite učinek nudge z CSS3.
CSS izbor styling
Spremenite styling za izbiro besedila s CSS3.
CSS3: Meni
Vsebina več stolpcev
Uporaba CSS3 za ustvarjanje niza stolpcev na vaši spletni strani, ne da bi morali dodeliti posamezne plasti in (ali) odstavke za vsak stolpec.
Sexy nasveti s samo CSS
Kako uporabljati razvijajoči se standard CSS lahko izboljša nekatere lepe navidezne nasvete.
Več opisov orodij:
- Čisti opis orodja CSS3
- Opisi orodij s CSS3.
Spustni meni
Kako ustvariti Apple.com podoben večstopenjski spustni meni z uporabo polmer meje, box-shadow, in text-shadow.
Področje z zavihki samo za CSS3
Kliknite na zavihek, skrijte vse plošče, pokažite eno, ki ustreza zavihku, ki ste ga pravkar kliknili - vse s CSS.
3D trakovi s CSS3
Ustvarite lepe 3D trakove s samo CSS3.
CSS3: Spusti senco
Spustite senco v sliko
Predstavite več tehnik in nekaj možnih videzov za spuščanje senc brez uporabe slik.
Glow Tabs s senco Box
Kako ustvariti intuitivne in lepe zavihke v CSS3 brez slike.
CSS3: Gumbi
Vadnica: Pretty gumbi
Kako ustvariti lepe gumbe CSS3, ki so skladne z navzkrižnimi brskalniki in ki se elegantno razgradijo.
Govorni mehurčki
Različne oblike učinka mehurčkov govora, ustvarjene s CSS 2.1 in izboljšane s CSS3.
Github podobni gumbi
Zbirka gumbov, ki prikazujejo, kaj je mogoče z uporabo CSS3 in hkrati ohranja najpreprostejšo možno oznako.
Spinning, Fading Ikone s CSS3 in MooTools
Kako uporabiti CSS3 in MooTools za ustvarjanje dinamičnih, rotacijskih elementov.
Prekrivanje slike
Praktična uporaba lastnosti CSS3 border-image.
Več
- CSS3 + Mootools. Primer eksperimentiranja v mootools. To doda lastnosti CSS3 v osnovno delo okvirja MooTools.
- Eksplozivni logotip s CSS3 in MooTools ali jQuery. Vzemite statično sliko in jo ustvarite kot animirani, eksplozivni učinek na miški.
- Moč HTML 5 in CSS 3. HTML 5 in CSS 3 hitro pridobivata na priljubljenosti, Perishable Press je tu, da pojasni, kako in zakaj.
- Predenje s CSS3 animacijami in primeri JavaScripta. Enostaven in subtilen učinek vrtenja na zadnji strani slike.
- Foto galerija CSS3 Polaroid. Kako zgraditi kul izgled polaroidnih fotografij s čisto CSS stylingom.
- HTML 5 in CSS 3: tehnike, ki jih boste kmalu uporabljali. Rešitev za gradnjo spletnega dnevnika, ki temelji na HTML5 in CSS3.
Cheatsheets & Reference
CSS3 goljufija (PDF)
Natisljiv obrazec s popolnim seznamom vseh lastnosti, tipi izbirnikov in vrednostmi v trenutni specifikaciji CSS3 iz W3C.
Podpora CSS v Opera 9.5
Popoln seznam podprtih CSS selektorjev v Opera 0.5.
Pisave so na voljo za @ font-face Embedding
Celovit seznam pisav, ki so trenutno licencirane @ font-face vstavljanje.
CSS 3 selektorji - pojasnjeno
Vodnik in sklic na selektorje CSS3 in njegove vzorce.
Cross-browser CSS3 Generator Pravil
Pravila CSS3 lahko kopirate in prilepite na svoj slogovni slog.
CSS3 Kliknite grafikon
S klikom na tipke CSS3 dobite velikosti polja, radij obrobe, besedilno senco in še več.
CSS vsebina in združljivost brskalnika
Popoln seznam izbirnih tabel CSS in CSS3 z deklaracijo za preverjanje združljivosti brskalnika.
