50 + Awesome CSS3 teknikker til bedre design
CSS3 får fart, på trods af at standarden ikke engang er færdiggjort.
Der er hundredvis af tutorials derude for at undervise designere, hvordan man bruger det, men desværre dækker mange af dem samme grund.
Og nogle af tutorialsne lærer designere at gøre ting, som de måske ikke synes at være nyttige, selvom teknikkerne som regel kan tilpasses til et projekt perfekt.
Nedenfor er mere end halvtreds awesome CSS3 tutorials. Mange er strengt CSS og HTML-baserede, mens andre også indeholder JavaScript.
Hvis du har en favorit teknik eller selvstudium, der ikke er medtaget nedenfor, kan du dele det i kommentarerne!
Brug CSS3 til uovertruffen illustration
Forskellige nye metoder i CSS3 gør det muligt at oprette en række meget komplekse grafik ved hjælp af ren CSS og ingen billeder. Her er en håndfuld af de bedste eksempler derude.
Ren CSS iPhone Illustration
En blanding af grænser, transformer og gradienter for at lave et animeret billede af en iPhone.
Oprettelse af Opera Browser Logo i CSS3
En ren illustration af Opera-logoet udført ved hjælp af CSS3-teknikker.
Vores solsystem med CSS3
En smidig udseende af solsystemet med animationseffekter ..
Analog klokkeffekt
Opret et køligt analogt ur med kun CSS3 og jquery.
Skyggeeksperimenter
Denne vejledning viser, hvordan man bruger CSS-skygger til at skabe forskellige effekter, herunder en mørk side af månen grafisk, et skyggefuldt periodisk bord og endda en psykedelisk "kærlighedsdrikke".
Oprettelse af Polaroid Style Images med Just CSS
Denne vejledning bruger både CSS2 og CSS3 effekter til at tilføje Polaroid styling til en simpel liste over billeder.
CSS3-tekst, layout og farveeffekter
CSS3 kan bruges til mange forskellige fantasifulde animationer og grafik, men det er også fantastisk til layout, tekst og farve effekter, du måske tidligere har brugt til Photoshop.
Udnytte CSS3 kolonner
Kodning af et rent CSS3-modul med flere kolonner.
Generel CSS3 Implemenation
En oversigt over fordelene ved CSS3.
Styling Links med CSS3
Fire forskellige måder at style forskellige typer af links med CSS3
CSS3 Vertikal Accordion
Gradienter og overgange gør denne accordeon-menu, der nedbryder til en ordnet liste på ældre browsere.
Super awesome CSS3 knapper
Farvede, gradient knapper med drop-shadow, der arbejder på lyse eller mørke baggrunde og ikke kræver billeder!
Photoshop Style Buttons med CSS3
En side-by-side sammenligning af hvordan man opretter CSS3 knapper uden billeder og med Photoshop.
Css Gradient Text Effect
Instruktioner til at lave en unik tekst effekt ved at anvende et teksturkort til tekst. Du kan bruge gradienter eller mønstre til virkelig at lave tekstpop.
Nogle CSS3-alternativer til JavaScript-effekter
7 måder at erstatte almindeligt brugte JavaScript-effekter med CSS3 for at få dit websted klar til fremtiden.
Embossed CSS3 Text Effect
Oprettelse af en præget teksteffekt uden Photoshop browser hacks.
Forstå CSS3 Farveværdier
Alt om de nye farver, der er tilgængelige med CSS3.
Oprettelse af rige effekter med CSS3
CSS Overgange og Transformer kan kombineres for at gøre en række forskellige effekter.
Gør en CSS3 Bokeh-effekt
Evnen til at bruge gradienter og gennemsigtighed med CSS3 gør denne klassiske effekt mulig.
CSS3 kolonner
En god video tutorial om begrebet at bruge CSS3 kolonner til layout.
Fancy lister med CSS3
Cool punktliste-liste stil ved hjælp af CSS3 for at gøre fancy checkmarks.
Meget Slick Imageless Infoboxes med CSS3
De teknikker, der gøres mulige ved CSS3, gør disse bokse til virkelig pop.
Talebobler
Border-radius og transformer pseudo-elementer gør disse former mulige.
Flash-Style Image Transition Effects
En smart måde at bruge CSS animation effekt på.
Genskab af Tumblrs opdateringsskærm med CSS3
En CSS3 design effekt, der nedbrydes godt for ældre browsere.
Subtile CSS3 typografi, som du ville sværge, blev lavet i Photoshop
Denne 13-minutters video-øvelse viser dig, hvordan du opretter en smuk, subtil 3D-typografisk effekt udelukkende med CSS3.
Tekstrotation med CSS
Her er en lidt ældre teknik, der viser, hvordan man opretter tværbrowser-kompatibel tekst roteret for at justere sig med en lodret akse.
Opret en Letterpress Effect med CSS Text-Shadow
Denne Line25-vejledning viser dig, hvordan du bruger tekstskygger til at skabe en bogtryks-stil-effekt på dit websites tekst.
Awesome CSS3 Lightbox Galleri med jQuery
Denne kode opretter et billedgalleri i Polaroid-stil med en træk-og-slip-delingsfunktion.
Awesome Overlays
Denne vejledning fra Zurb viser, hvordan du opretter billedoverlejringer ved hjælp af CSS3-grænsegenskaber, som derefter kan bruges til at vise yderligere oplysninger om et billede, når du svinger på.
Awesome Inline Form Etiketter
Denne vejledning viser dig, hvordan du opretter inlineformetiketter, der ikke forsvinder, når dine besøgende begynder at skrive.
CSS3 3D-effekter
Animeret CSS3 Cube
En unik 3D-animeret terning med 3D-transformer, der er stylet med CSS. Kuben kan roteres med piletasterne for at vise de oplysninger, der vises på hvert ansigt.
CSS3 3D-bånd
Giv din dybde dybde ved at bruge disse enkle CSS3 CD-bånd.
Animeret 3D Plakat Scroller
Viser film plakater med billedtekster ved hjælp af en forbløffende 3D perspektiv effekt i CSS3.
3D CSS3 Coke Can
Ved at trække en rullebjælke gør denne virtuelle Coke kan rulle frem og tilbage.
CSS-skygger
Kreativt styling skygger ved at løsne dem fra elementet.
CSS3 Animation
En animeret udgivelse af kvidens fejlhale med CSS3
En meget elegant bruger af CSS3, der overraskende nedbryder noget godt i ældre browsere.
Parallax Starfield Baggrund
Stjerner flytter fra venstre til højre bag dit indhold med dette klassiske rumrejser.
Viser og skjuler indhold med CSS3
Udvidelse og kontraherende bakker og menutræer uden javascript.
En Flydende Følg Tab med CSS3
Sæt din navigations- eller kontaktikon i nem rækkevidde med denne nyttige metode.
CSS3 Drop-in Modal Windows
Et par fælles modale vinduer genereret ved hjælp af CSS3 effekter og transformer.
Spinners bruger kun CSS3
Oprettelse af indlæsnings animationer med kun CSS3 og ingen animerede GIF'er!
Viser sociale ikoner ved hjælp af CSS3
En svag falende virkning for at vise dine sociale ikoner ved hjælp af ren CSS3.
CSS3 Tegnefilm Animation
Oprettelse af en hel flash-animation med kun CSS3 og jquery.
Et animeret landskab ved hjælp af CSS3
Bjerge og skyer og vand alle animerede med CSS3.
Nice Animerede Scrolling Billedtekster
CSS3 Overgange giver dig mulighed for at lave nogle fantastiske ting med teksttekster. Her er et eksempel.
En elastisk miniaturemenu
En serie af billeder, der udvider og trækker sig ind, når du svinger over.
Stackede, dynamiske indekskort
En fantastisk animation effekt, der kunne anvendes til en række designs.
Et farverigt ur med CSS & jQuery
Denne vejledning viser, hvordan du opretter et virkelig fantastisk farverigt ur ved hjælp af CSS og jQuery, der består af tre separate læssestilcirkler, der viser timer, minutter og sekunder.
Ren CSS3 At-At Walker
Dette er et imponerende eksempel, der bruger CSS3 (ingen JavaScript, ingen Flash) til at skabe en animeret At-At Walker fra Star Wars. Den eneste ulempe er, at den i øjeblikket kun kan ses i Webkit-browsere (Safari og Chrome).
Opret en jQuery-indholdskyder ved hjælp af ren CSS
Lær at oprette en ren CSS jQuery-stil skyder med denne vejledning.
CSS3 Dropdown Menu
Denne vejledning fra WebDesignerWall viser, hvordan du opretter en browser-kompatibel CSS3-rullemenu, der også fungerer i browsere, der ikke understøtter CSS3 (selvom der er begrænset styling).
Skrevet udelukkende til WDD af Cameron Chapman .
Hvis du kender til andre CSS3-undervisningsmaterialer af høj kvalitet, som ikke var dækket ovenfor, og du gerne vil dele, så gør du det i kommentarerne!