Ghidul începătorului pentru CSS3
De la anunțarea din 2005, dezvoltarea nivelului 3 al foii de stil cascadă sau mai bine cunoscut sub numele de CSS3 a fost monitorizată îndeaproape și monitorizată de mulți designeri și dezvoltatori. Suntem incantati sa ne punem mainile pe noile caracteristici ale CSS3 - umbrele de text, marginea cu imagini, opacitate, fundaluri multiple etc., pentru a numi doar cateva.
Începând cu ziua de azi, nu toți selectorii de CSS3 sunt pe deplin suportați. Dar asta nu înseamnă că nu putem să ne distrăm de testarea unor noi materiale CSS3. Acest post este dedicat tuturor designerilor și dezvoltatorilor care sunt deja familiarizați cu CSS 2.1 și doresc să vă murdărească mâinile pe CSS3.0.
Este o compilație de citiri CSS3 utile, coduri de probă, sfaturi, tutoriale, cheat-sheets și multe altele. Simțiți-vă liber să le utilizați în proiectele dvs., doar asigurați-vă că acestea se încadrează grațios pe browserele incompatibile.
Noțiuni de bază cu CSS3
Introducere în CSS3
O introducere oficială în CSS și CSS3. Acest document vă oferă o idee generală asupra dezvoltării CSS3.
CSS3: Luați design la nivelul următor
Avantajele CSS3, cu explicații și exemple de proprietăți și selectori CSS3.
Mai multe trucuri cu CSS3
Webmonkey vă aduce prin mai multe trucuri de bază în CSS3, inclusiv granițe rotunjite, granițe, umbre, picturi de imagine și multe altele.
Interviu: Șase întrebări cu Eric Meyer despre CSS3
Oamenii de la Six Revision au intervievat pe Eric Meyer cu informații și răspunsuri valoroase despre CSS3.
CSS3: Îmbunătățirea progresivă
Cum puteți utiliza tehnicile de îmbunătățire grațioasă (sau progresivă) pentru a utiliza funcțiile CSS3 în browserele care le suportă, asigurându-vă în același timp că codul dvs. va oferi în continuare o experiență satisfăcătoare pentru utilizatorii de browsere mai vechi care nu acceptă încă aceste funcții.
CSS3: Background și Borders
Granițe rotunjite (Border-radius)
Un ghid pentru crearea frontierei rotunjite cu CSS3 border-radius proprietate.
Granițe rotunjite cu imagine (frontiera-imagini)
Cum se utilizează imaginile la frontiere cu border-image proprietate.
Câmpuri, fundaluri și casete CSS3
Explicație detaliată cu exemple de proprietăți noi CSS3 cum ar fi: fundal clip, fundal origine, background-attachment, box-shadow, box-decorare-break, border-radius și border-image.
CSS3: Text
Efectul Letterpress
Creați un efect de imprimare simplu cu CSS3.
Șase efecte de text care utilizează umbra textului
Efectele de text includ: vintage / retro, neon, inset, anaglific, foc și joc de masă.
Tipografie frumoasă
Cum să luați marcajul de bază și să îl transformați într-un design tipografic atrăgător și frumos prin CSS3 pură.
Rotația textului
Utilizează o imagine sprite și un sprinkle de CSS pentru a face lucrurile poziționate corect.
Textul conturului
Cum de a adăuga o schiță sau un accident vascular cerebral la text folosind CSS3 text-accident vascular cerebral proprietate.
Efectul de mascare a textului
Interactiv efect de mascare text folosind text-shadow Proprietatea CSS.
Legarea nudging (animație) cu CSS3
Ditch Javascript și creați efect de nudge în întregime cu CSS3.
CSS de selectare a stilului
Schimbați stilul de selectare a textului cu CSS3.
CSS3: Meniu
Conținut cu mai multe coloane
Folosind CSS3 pentru a crea un set de coloane pe site-ul dvs. fără a trebui să alocați straturi individuale și (sau) paragrafe pentru fiecare coloană.
Instrumente sexy cu Just CSS
Cum se utilizează standardul CSS în evoluție poate îmbunătăți unele sfaturi minunate ale browserului.
Mai multe sfaturi:
- Pure tooltip CSS3
- Sfaturi practice cu CSS3.
Meniu derulant
Cum se creează un meniu derulant pe mai multe niveluri de pe Apple.com border-radius, box-shadow, și text-shadow.
Numai în zona de file cu caractere CSS3
Faceți clic pe o filă, ascundeți toate panourile, arătați unul corespunzător filei pe care ați făcut clic pe - toate cu CSS.
Panglici 3D cu CSS3
Creați panglici 3D frumoase, cu doar CSS3.
CSS3: Drop shadow
Aruncați umbra în imagine
Prezentați mai multe tehnici și unele dintre aparițiile posibile pentru căderea umbrelor fără a utiliza imagini.
Glow Tabs cu Shadow Box
Cum se creează filele intuitive și frumoase în CSS3 fără imagini.
CSS3: Butoane
Tutorial: Butoane destul
Cum se creează frumoase butoane CSS3 compatibile cu browserul încrucișat care se degradează cu grație.
Cuvinte de vorbire
Diferite forme de efect de bule de vorbire create cu CSS 2.1 și îmbunătățite cu CSS3.
Github, deopotrivă butoane
Colecție de butoane care arată ce este posibil folosind CSS3, menținând, de asemenea, cea mai simplă marcare posibilă.
Spinning, Fading Icons cu CSS3 și MooTools
Cum se utilizează CSS3 și MooTools pentru a crea elemente dymanice, rotative.
Suprapunere imagine
Aplicarea practică a proprietății imaginii de frontieră CSS3.
Mai Mult
- CSS3 + Mootools. Un exemplu de experimentare în mootools. Aceasta adaugă proprietățile CSS3 în lucrul de bază MooTools.
- Exploding Logo cu CSS3 și MooTools sau jQuery. Luați imagini statice și faceți-le un efect animat, exploding pe mouse-ul peste.
- Puterea HTML 5 & CSS 3. HTML 5 și CSS 3 câștigă rapid popularitate, Perishable Press este aici pentru a explica cum și de ce.
- Razele de spinare cu animații CSS3 și exemplu JavaScript. Simplu și subtil efect de filare în partea din spate a unei imagini.
- Galeria foto CSS3 Polaroid. Cum se construiește o stivă cool de fotografii Polaroid cu stil CSS pur.
- HTML 5 și CSS 3: Tehnicile pe care le veți folosi în curând. O privire de ansamblu asupra construirii unui blog de la început cu HTML5 și CSS3.
Trucuri și referințe
CSS3 Cheat Sheet (PDF)
Hârtie de tipărire tipăribilă cu o listă completă a tuturor proprietăților, a tipurilor de selector și permite valorile din actuala specificație CSS3 din W3C.
Suport CSS în Opera 9.5
Lista completă a selectorilor CSS acceptate în Opera 0.5.
Fonturi disponibile pentru încorporarea @ font-face
Listă cuprinzătoare de fonturi cărora li se acordă licență în prezent @ Font-face încorporarea.
Selectorii CSS 3 - Explicați
Un ghid și referință la selectorii CSS3 și modelele sale.
Generator de reguli CSS3 pentru browser-ul
Regulile CSS3 pe care le puteți copia și insera pe propriul foaie de stil.
CSS3 Faceți clic pe Diagrama
Obțineți stiluri CSS3 cum ar fi dimensiunea cutiei, raza marginii, umbra textului și multe altele în cadrul unui clic.
Conținutul CSS și compatibilitatea browserului
Lista completă a tabelelor selector din CSS și CSS3 cu declarație pentru verificarea compatibilității browserului.
