Príručka pre začiatočníkov pre CSS3
Už od oznámenia v roku 2005 bol vývoj úrovne 3 kaskádového štýlu alebo lepšie známy ako CSS3 pozorne sledovaný a sledovaný mnohými dizajnérmi a vývojármi. Všetci sme radi, že sa dostaneme do rúk nových funkcií CSS3 - textové tiene, hranice s obrázkami, nepriehľadnosť, viac pozadia atď..
K dnešnému dňu ešte nie sú plne podporovaní všetci programátori CSS3. Ale to neznamená, že nemôžeme mať radosť skúšať nové veci CSS3. Tento príspevok je venovaný všetkým návrhárom a vývojárom, ktorí sú už oboznámení s CSS 2.1 a chcú znečistiť ruky na CSS3.0.
Je to kompilácia užitočných čítaní CSS3, vzorových kódov, tipov, tutoriálov, podsúborov a ďalších. Neváhajte a použite ich vo svojich projektoch, jednoducho sa uistite, že na nekompatibilných prehliadačoch padne elegantne.
Začíname s CSS3
Úvod do CSS3
Oficiálny úvod do CSS a CSS3. Tento dokument vám poskytuje celkovú predstavu o vývoji CSS3.
CSS3: Prejdite do ďalšej úrovne
Výhody CSS3 s vysvetleniami a príkladmi vlastností a selektorov CSS3.
Niekoľko trikov s CSS3
Webmonkey prináša niekoľko základných trikov v CSS3, vrátane okrúhlych okrajov, hraníc, stínov, obrázkových trikov a ďalších.
Rozhovor: Šesť otázok s Ericom Meyerom na CSS3
Ľudia šiestej revízie si vypočuli Eric Meyer s hodnotnými poznatkami a odpoveďami na CSS3.
CSS3: progresívne vylepšenie
Ako môžete použiť vylepšené (alebo progresívne) techniky na vylepšenie funkcií CSS3 v prehliadačoch, ktoré ich podporujú, a zároveň zabezpečiť, aby váš kód poskytoval uspokojivé používateľské skúsenosti v starších prehliadačoch, ktoré zatiaľ nepodporujú tieto funkcie.
CSS3: Pozadie a hranice
Zaoblené hranice (Border-radius)
Sprievodca vytváraním zaoblenej hranice s CSS3 border-radius vlastnosť.
Zaokrúhlené okraje s obrázkom (Border-obrázky)
Ako používať obrázky v hraniciach s border-image vlastnosť.
Okraje, pozadia a polia CSS3
Podrobné vysvetlenie s príkladmi nových vlastností CSS3, ako napríklad: background-clip, background-origin, background-attachment, box-shadow, box-dekorácie-break, border-radius a border-image.
CSS3: Text
Letterpress Effect
Vytvorte jednoduchý efekt kníhtlačou pomocou CSS3.
Šesť textových efektov pomocou textového tieňa
Textové efekty zahŕňajú: vintage / retro, neon, inset, anaglyphic, fire a board game.
Krásna typografia
Ako urobiť základnú značku a premeniť ju na atraktívny a krásny typografický dizajn pomocou čistého CSS3.
Otáčanie textu
Používa obrazový sprite a posypte CSS, aby ste správne umiestnili veci.
Text načrtnutého textu
Ako pridať obrys alebo tah do textu pomocou CSS3 text-mŕtvica vlastnosť.
Efekt maskovania textu
Interaktívny efekt maskovania textu pomocou text-shadow Vlastnosť CSS.
Link nudging (animácia) s CSS3
Ditch Javascript a vytvoriť efekt šúrania úplne s CSS3.
CSS Selection Styling
Zmena štýlu výberu textu pomocou CSS3.
CSS3: Ponuka
Obsah viacerých stĺpcov
Použitie CSS3 na vytvorenie sady stĺpcov na vašom webe bez nutnosti priradiť jednotlivé vrstvy a (alebo) odseky pre každý stĺpec.
Sexy tipy s Just CSS
Použitie vyvíjajúceho sa štandardu CSS môže zlepšiť niektoré skvelé nápady na prehliadači.
Ďalšie tipy:
- Pure tooltip CSS3
- Nástrojové tipy s CSS3.
Rozbaľovacie menu
Ako vytvoriť roletovú ponuku viacerých úrovní Apple.com pomocou border-radius, box-shadow, a text-shadow.
CSS3 iba oblasť s kartami
Kliknite na kartu, skryte všetky panely, ukážte kartu zodpovedajúcej karte, ktorú ste práve klikli - všetko s CSS.
3D stuhy s CSS3
Vytvorte pekne vyzerajúce 3D stužky len s CSS3.
CSS3: Drop shadow
Umiestnite tieň na obrázok
Predstavte si niekoľko techník a niektoré z možných vystúpení na odtiahnutie tieňov bez použitia obrázkov.
Glow Záložky s Box Shadow
Ako vytvoriť intuitívne a krásne karty v systéme CSS3 bez obrázka.
CSS3: Tlačidlá
Výučba: pekné gombíky
Ako vytvoriť krásne kompatibilné tlačidlá CSS3 kompatibilné s prehliadačom, ktoré sa graciálne zhoršujú.
Spee bubliny
Rôzne formy efektu reči bubliny vytvorené pomocou CSS 2.1 a rozšírené o CSS3.
Github rovnaké tlačidlá
Zhromažďovanie tlačidiel, ktoré ukazujú, čo je možné pomocou CSS3 a súčasne zachovanie najjednoduchšej možnej značky.
Spinning, blednutie ikon s CSS3 a MooTools
Ako používať CSS3 a MooTools na vytvorenie dymanických, rotujúcich prvkov.
Prekrytie obrazu
Praktické využitie vlastnosti hraničného obrázku CSS3.
viac
- CSS3 + Mootools. Príklad experimentovania v mootools. To pridáva vlastnosti CSS3 do rámcovej práce MooTools.
- Exploding Logo s CSS3 a MooTools alebo jQuery. Urobte statický obrázok a urobte ho animovaným, explodujúcim efektom na myš.
- Sila HTML 5 a CSS 3. HTML 5 a CSS 3 rýchlo získavajú popularitu, spoločnosť Perishable Press tu vysvetľuje, prečo a prečo.
- Spinning Rays s animáciami CSS3 a príkladom JavaScript. Jednoduchý a jemný efekt točenia na zadnej strane obrázka.
- CSS3 Polaroid Fotogaléria. Ako vytvoriť chladný vzhľad stack fotografií Polaroid s čistým CSS stylingom.
- HTML 5 a CSS 3: Techniky, ktoré budete čoskoro používať. Návod na vytvorenie blogu od základov s HTML5 a CSS3.
Cheatsheets & Odkazy
CSS3 Cheat Sheet (PDF)
Vytlačiť cheatsheet s kompletným zoznamom všetkých vlastností, typov voličov a umožňuje hodnoty v aktuálnej špecifikácii CSS3 z W3C.
Podpora CSS v Opera 9.5
Kompletný zoznam podporovaných programátorov CSS v aplikácii Opera 0.5.
Fonty dostupné pre vkladanie do formátu @ font-face
Komplexný zoznam písiem, ktoré sú v súčasnosti licencované @ Font-face vkladanie.
CSS 3 selektory - vysvetlené
Sprievodca a odkaz na voliče CSS3 a ich vzory.
Generátor pravidiel CSS3 pre viaceré prehliadače
Pravidlá CSS3, ktoré môžete kopírovať a prilepiť na svoj vlastný štýl.
CSS3 Kliknite na graf
Získajte štýly CSS3, ako je veľkosť okien, polomer okrajov, textový tieň a ďalšie kliknutia.
Kompatibilita s obsahom a prehliadačom CSS
Kompletný zoznam výberových tabuliek CSS a CSS3 s deklaráciou pre kontrolu kompatibility prehliadača.
