Begyndervejledning til CSS3
Siden siden i 2005 blev udviklingen af niveau 3 af Cascading Style Sheet eller bedre kendt som CSS3 nøje overvåget og overvåget af mange designere og udviklere. Vi er alle glade for at få vores hænder på de nye funktioner i CSS3 - tekstskyggerne, grænser med billeder, uigennemsigtighed, flere baggrunde osv. For blot at nævne nogle få.
I dag er ikke alle vælgere af CSS3 fuldt understøttet endnu. Men det betyder ikke, at vi ikke kan have det sjovt at teste nye CSS3 ting. Dette indlæg er dedikeret til alle designere og udviklere, der allerede er bekendt med CSS 2.1 og ønsker at få dine hænder beskidte på CSS3.0.
Det er en samling af nyttige CSS3 læser, prøvekoder, tips, tutorials, snydeark og mere. Du er velkommen til at bruge dem i dine projekter, bare sørg for, at det falder yndefuldt på uforenelige browsere.
Kom godt i gang med CSS3
Introduktion til CSS3
En (køreplan) officiel introduktion til CSS og CSS3. Dette dokument giver dig en overordnet ide om udviklingen af CSS3.
CSS3: Tag design til næste niveau
Fordele ved CSS3 med forklaringer og eksempler på CSS3 egenskaber og selektorer.
Flere tricks med CSS3
Webmonkey bringer dig gennem flere grundlæggende tricks i CSS3, herunder afrundede grænser, grænser, drop shadows, billedtricks og mere.
Interview: Seks spørgsmål med Eric Meyer på CSS3
Folk på Six Revision interviewede Eric Meyer med værdifulde indsigter og svar på CSS3.
CSS3: Progressiv forbedring
Hvordan kan du bruge yndefulde (eller progressive) forbedringsteknikker til at gøre brug af CSS3-funktioner i browsere, der understøtter dem, samtidig med at din kode stadig giver en tilfredsstillende brugeroplevelse i ældre browsere, der endnu ikke understøtter disse funktioner.
CSS3: Baggrund og grænser
Afrundede grænser (Border-radius)
En guide til at skabe afrundet grænse med CSS3s border-radius ejendom.
Afrundede grænser med billede (grænsekontrol-billeder)
Sådan bruger du billeder i grænser med border-billede ejendom.
CSS3 grænser, baggrunde og kasser
Detaljeret forklaring med eksempler på nye CSS3 egenskaber som: background-clip, baggrund-oprindelse, background-attachment, box-shadow, box-dekoration-break, border-radius og border-billede.
CSS3: Tekst
Letterpress Effect
Opret simpel brevpresseffekt med CSS3.
Seks tekst effekter med tekstskygge
Teksteffekter omfatter: vintage / retro, neon, input, anaglyphic, brand og brætspil.
Smuk typografi
Sådan tager du grundlæggende markering og omdanner det til et attraktivt og smukt typografisk design gennem ren CSS3.
Tekstrotation
Bruger et billedsprit og et sprinkle af CSS for at få tingene placeret rigtigt.
Skitse Tekst
Sådan tilføjes en oversigt eller strejke til din tekst ved hjælp af CSS3 tekst-takts ejendom.
Tekstmaskeringseffekt
Interaktiv tekstmaskeringseffekt ved hjælp af tekst-skygge CSS ejendom.
Link nudging (animation) med CSS3
Ditch Javascript og oprette nudge-effekt udelukkende med CSS3.
CSS Selection Styling
Skift tekstvalg styling med CSS3.
CSS3: Menu
Indhold af flere kolonner
Brug CSS3 til at oprette et sæt kolonner på din hjemmeside uden at skulle tildele individuelle lag og (eller) afsnit for hver kolonne.
Sexy Tooltips med bare CSS
Hvordan du bruger den udviklede CSS-standard kan forbedre nogle dejlige værktøjstip til tværbrowser.
Flere værktøjstips:
- Ren CSS3 værktøjstip
- Værktøjstips med CSS3.
Drop down menu
Sådan oprettes en drop-down menu på flere forskellige niveauer i Apple.com ved hjælp af border-radius, box-shadow, og tekst-skygge.
CSS3-kun tabbed område
Klik på en fane, skjul alle panelerne, vis den der svarer til fanen, der er klikket på - alt sammen med CSS.
3D-bånd med CSS3
Lav flotte 3D-bånd med kun CSS3.
CSS3: Drop skygge
Drop skygge i billede
Vis flere teknikker og nogle af de mulige muligheder for at droppe skygger uden at bruge billeder.
Glød faner med Box Shadow
Sådan oprettes intuitive og smukke faner i CSS3 uden billede.
CSS3: Knapper
Tutorial: Smukke knapper
Sådan oprettes smukke CSS3-knapper, der er kompatible med browseren, og som nedbrydes yndefuldt.
Talebobler
Forskellige former for talebobleeffekt skabt med CSS 2.1 og forbedret med CSS3.
Github samme knapper
Indsamling af knapper, der viser, hvad der er muligt ved hjælp af CSS3, samtidig med at man opretholder den enkleste mulige markering.
Spinning, Fading ikoner med CSS3 og MooTools
Sådan bruger du CSS3 og MooTools til at skabe dymaniske, roterende elementer.
Billedoverlay
Praktisk anvendelse af CSS3-billedegenskaben.
Mere
- CSS3 + Mootools. Et eksempel på eksperimentering i mootools. Dette tilføjer CSS3 egenskaber til kernen MooTools ramme arbejde.
- Eksploderende Logo med CSS3 og MooTools eller jQuery. Tag statisk billede og gør det til en animeret eksploderende effekt på musen over.
- Kraften i HTML 5 og CSS 3. HTML 5 og CSS 3 er hurtigt ved at blive mere populære. Forgængelig Press er her for at forklare hvordan og hvorfor.
- Spinning Stråler med CSS3 Animationer og JavaScript Eksempel. Enkel og subtile strålespindende effekt bag på et billede.
- CSS3 Polaroid Fotogalleri. Sådan opbygger du en kold udseende stak Polaroid-fotos med ren CSS-styling.
- HTML 5 og CSS 3: De teknikker du snart vil bruge. Et gennemslag på at bygge en blog fra jorden op med HTML5 og CSS3.
Cheatsheets & References
CSS3 Cheat Sheet (PDF)
Printable cheatsheet med komplet liste over alle egenskaber, vælgertyper og tillader værdier i den nuværende CSS3-specifikation fra W3C.
CSS Support i Opera 9.5
Komplet liste over de understøttede CSS-selektorer i Opera 0.5.
Skrifttyper til rådighed for @ font-face Embedding
Omfattende liste over skrifttyper, der for øjeblikket er licenseret til @ Font-face indlejring.
CSS 3 Selectors - Forklaret
En vejledning og reference til CSS3 selektorer og dets mønstre.
Cross-browser CSS3 Rule Generator
CSS3 regler du kan kopiere og indsætte i dit eget stylesheet.
CSS3 Click Chart
Få CSS3-stilarter som boks størrelse, kantradius, tekstskygge og mere inden for et klik.
CSS indhold og browser kompatibilitet
Komplet liste over selektortabeller af både CSS og CSS3 med angivelse af browser-kompatibilitetskontrol.
