50 + Awesome CSS3-teknikker for bedre design
CSS3 får fart, til tross for at standarden ikke engang er ferdiggjort.
Det er hundrevis av opplæringsprogrammer der ute for å undervise designere hvordan man bruker det, men dessverre dekker mange av dem samme grunnlag.
Og noen av veiledningene lærer designere å gjøre ting som de kanskje ikke synes å være nyttige, selv om teknikkene vanligvis kan tilpasses for å passe et prosjekt perfekt.
Nedenfor er mer enn femti fantastiske CSS3 opplæringsprogrammer. Mange er strengt CSS og HTML-basert, mens andre også inneholder JavaScript.
Hvis du har en favoritt teknikk eller opplæring som ikke er inkludert nedenfor, vennligst del det i kommentarene!
Bruke CSS3 For Imageless Illustration
Ulike nye metoder i CSS3 tillater en rekke svært komplekse grafikk som skal opprettes ved hjelp av ren CSS og ingen bilder. Her er en håndfull av de beste eksemplene der ute.
Ren CSS iPhone Illustrasjon
En blanding av grenser, transformasjoner og gradienter for å lage et animert bilde av en iPhone.
Opprette Opera Browser Logo i CSS3
En ren illustrasjon av Opera-logoen gjengitt ved hjelp av CSS3-teknikker.
Vårt solsystem med CSS3
En glatt utseende av solsystemet med animasjonseffekter ..
Analog klokkeffekt
Lag en kul analog klokke med bare CSS3 og jquery.
Skyggeeksperimenter
Denne opplæringen viser hvordan du bruker CSS-skygger til å skape en rekke effekter, inkludert en mørk side av månen, et skygget periodisk bord og til og med en psykedelisk "kjærlighetsdrikke".
Opprette Polaroid stil bilder med bare CSS
Denne opplæringen bruker både CSS2 og CSS3 effekter for å legge til Polaroid styling til en enkel liste med bilder.
CSS3 Tekst, layout og fargeeffekter
CSS3 kan brukes til mange forskjellige fancy animasjoner og grafikk, men det er også flott for layout, tekst og fargeeffekter du tidligere har hatt til Photoshop for.
Bruke CSS3 kolonner
Koding av en ren CSS3-modul med flere kolonner.
Generell CSS3 Implemenation
En oversikt over fordelene med CSS3.
Styling Lenker med CSS3
Fire forskjellige måter å utforme ulike typer koblinger med CSS3
CSS3 Vertikal Accordion
Gradienter og overganger gjør denne trekkspillmenyen som nedbryter til en bestilt liste på eldre nettlesere.
Super Awesome CSS3 Knapper
Farget, gradient knapper med drop-shadow som fungerer på lyse eller mørke bakgrunner og ikke krever bilder!
Photoshop-stilknapper med CSS3
En side-by-side sammenligning av hvordan du lager CSS3 knapper uten bilder og med Photoshop.
CSS Gradient Text Effect
Instruksjoner for å lage en unik tekst-effekt ved å bruke et teksturarkort til tekst. Du kan bruke gradienter eller mønstre til å virkelig lage tekstpopp.
Noen CSS3-alternativer til JavaScript-effekter
7 måter å erstatte vanlige JavaScript-effekter med CSS3 for å få nettstedet ditt klart for fremtiden.
Embossed CSS3 Text Effect
Oppretter en preget tekst-effekt uten Photoshop-nettleserhack.
Forstå CSS3-fargeverdier
Alt om de nye fargevalgene som er tilgjengelige med CSS3.
Opprette rike effekter med CSS3
CSS Overganger og Transformer kan kombineres for å gjøre en rekke effekter.
Lag en CSS3 Bokeh-effekt
Muligheten til å bruke gradienter og gjennomsiktighet med CSS3 gjør denne klassiske effekten mulig.
CSS3 kolonner
En god videoopplæring om konseptet med å bruke CSS3-kolonner for layout.
Fancy Lister med CSS3
Kule punktlistestil ved hjelp av CSS3 for å lage fancy merketrykk.
Veldig Slick Imageless Infoboxes med CSS3
Teknikkene som ble gjort mulig av CSS3, gjør disse boksene virkelig pop.
Snakkebobler
Border-radius og transformere pseudo-elementer gjør disse figurene mulige.
Flash-Style Image Transition Effects
En smart måte å bruke CSS animasjonseffekten på.
Å gjenopprette Tumblrs oppdateringsskjerm med CSS3
En CSS3 design effekt som degraderer godt for eldre nettlesere.
Subtile CSS3-typografi som du ville sverge ble laget i Photoshop
Denne 13-minutters videoopplæringen vil vise deg hvordan du lager en vakker, subtil 3D-typografisk effekt helt med CSS3.
Tekstrotasjon med CSS
Her er en litt eldre teknikk som viser hvordan du oppretter kryssbrowser-kompatibel tekst rotert for å justere med en vertikal akse.
Lag en Letterpress-effekt med CSS Text-Shadow
Denne linjens25 opplæringen vil vise deg hvordan du bruker tekstskygger for å skape en letterpress-stil-effekt på nettstedets tekst.
Awesome CSS3 Lightbox Galleri med jQuery
Denne koden oppretter et Polaroid-stilbilde med et dra og slipp-delingsalternativ.
Awesome overlegg
Denne opplæringen fra Zurb viser hvordan du lager bildeoverlegg ved hjelp av CSS3-grenseegenskaper som deretter kan brukes til å vise tilleggsinformasjon om et bilde når du svinger på.
Awesome Inline Form Etiketter
Denne opplæringen viser hvordan du lager inlineformetiketter som ikke forsvinner når de besøkende begynner å skrive.
CSS3 3D-effekter
Animert CSS3 Cube
En unik 3D-animert terning med 3D-transformer utformet med CSS. Kuben kan roteres med piltastene for å vise informasjonen som vises på hvert ansikt.
CSS3 3D-bånd
Gi litt dybde til designet ved å bruke disse enkle CSS3-CD-båndene.
Animert 3D Plakat Scroller
Viser filmplakater med bildetekster ved hjelp av en forbløffende 3D-perspektiv-effekt i CSS3.
3D CSS3 Coke Can
Å dra en rullebjelke gjør at denne virtuelle Coke kan rulle frem og tilbake.
CSS-skygger
Kreativt styling skygger ved å løsne dem fra elementet.
CSS3 Animasjon
En animert overføring av Twitter's Fail Whale med CSS3
En veldig elegant bruker av CSS3 som overraskende degraderer noe godt i eldre nettlesere.
Parallax Starfield Bakgrunn
Stjerner flytter fra venstre til høyre bak innholdet ditt med dette klassiske romreiserutseendet.
Viser og gjemmer innhold med CSS3
Utvide og kontraherende skuffer og menytrær uten javascript.
En flytende Følg Tab med CSS3
Sett navigasjons- eller kontaktikonene dine i rekkevidde med denne nyttige metoden.
CSS3 Drop-in Modal Windows
Et par vanlige modale vinduer generert ved hjelp av CSS3 effekter og transformasjoner.
Spinners bruker bare CSS3
Opprett lastings animasjoner med bare CSS3 og ingen animerte gifs!
Viser sosiale ikoner ved hjelp av CSS3
En kul fading effekt for å vise dine sosiale ikoner ved hjelp av ren CSS3.
CSS3 Tegneserie Animasjon
Oppretter en hel flash-animasjon med bare CSS3 og jquery.
Et animert landskap ved hjelp av CSS3
Fjell og skyer og vann som alle er animert med CSS3.
Hyggelig animert skrollbildebilde
CSS3-overganger lar deg gjøre fantastiske ting med teksttekster. Her er et eksempel.
En elastisk miniatyrmeny
En serie bilder som ekspanderer og trekkes inn når de svinger over.
Stablede, dynamiske indekskort
En fantastisk animasjonseffekt som kan brukes på en rekke motiver.
Et fargerikt klokke med CSS & jQuery
Denne opplæringen viser hvordan du lager en virkelig fantastisk fargerik klokke som bruker CSS og jQuery, som består av tre separate lastestilkretser som viser timer, minutter og sekunder.
Ren CSS3 At-At Walker
Dette er et imponerende eksempel som bruker CSS3 (ingen JavaScript, ingen Flash) for å lage en animert At-At Walker fra Star Wars. Den eneste ulempen er at den for tiden bare er synlig i Webkit-nettlesere (Safari og Chrome).
Opprett en jQuery Content Slider ved hjelp av ren CSS
Lær å lage en ren glidebryter med CSS jQuery-stil med denne opplæringen.
CSS3 Dropdown-menyen
Denne veiledningen fra WebDesignerWall viser hvordan du oppretter en kryssbrowser-kompatibel CSS3-rullegardinmeny som også fungerer i nettlesere som ikke støtter CSS3 (men med begrenset styling).
Skrevet utelukkende for WDD av Cameron Chapman .
Hvis du kjenner til andre høyverdige CSS3 opplæringsprogrammer som ikke var dekket ovenfor, og du vil dele, vennligst gjør det i kommentarene!