Begynnerhåndbok til CSS3
Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie.
Helt siden kunngjøringen i 2005 har utviklingen av nivå 3 av Cascading Style Sheet eller bedre kjent som CSS3 blitt nøye overvåket og overvåket av mange designere og utviklere. Vi alle er glade for å få våre hender på de nye funksjonene til CSS3 - tekstskyggene, grenser med bilder, opasitet, flere bakgrunner, etc, for bare å nevne noen.
Fra og med i dag, er ikke alle väljare av CSS3 fullt støttet enda. Men det betyr ikke at vi ikke kan ha det gøy å teste nye CSS3 ting. Dette innlegget er dedikert til alle designere og utviklere som allerede er kjent med CSS 2.1 og ønsker å få hendene skitne på CSS3.0.
Det er en samling av nyttige CSS3-leser, prøvekoder, tips, opplæringsprogrammer, luringsark og mer. Du er velkommen til å bruke dem i prosjektene dine, bare sørg for at det faller grasiøst på uforenlige nettlesere.
Komme i gang med CSS3
Introduksjon til CSS3
En (veikart) offisiell introduksjon til CSS og CSS3. Dette dokumentet gir deg en helhetlig ide om utviklingen av CSS3.
CSS3: Ta design til neste nivåFordeler med CSS3, med forklaringer og eksempler på CSS3 egenskaper og selektorer.
Flere triks med CSS3Webmonkey bringer deg gjennom flere grunnleggende triks i CSS3, inkludert avrundede grenser, grenser, slipp skygger, bilde triks og mer.
Intervju: Seks spørsmål med Eric Meyer på CSS3Folk på Six Revision intervjuet Eric Meyer med verdifull innsikt og svar på CSS3.
CSS3: Progressiv forbedringHvordan du kan bruke graceful (eller progressive) forbedringsteknikker for å utnytte CSS3-funksjoner i nettlesere som støtter dem, samtidig som du sikrer at koden din fortsatt vil gi en tilfredsstillende brukeropplevelse i eldre nettlesere som ennå ikke støtter disse funksjonene.
CSS3: Bakgrunn og grenserAvrundede grenser (grense-radius)
En veiledning for å skape avrundet grense med CSS3s border-radius
.
Slik bruker du bilder i grenser med border-image
.
Detaljert forklaring med eksempler på nye CSS3-egenskaper som: background-clip
, background-origin
, background-attachment
, box-shadow
, box-decoration-break
, border-radius
og border-image
.
Letterpress Effect
Opprett enkel letterpress-effekt med CSS3.
Seks tekst effekter med tekstskyggeTekst effekter inkluderer: vintage / retro, neon, innsett, anaglyphic, brann og brettspill.
Vakker typografiHvordan ta grunnleggende oppslag og forvandle den til en attraktiv og vakker typografisk design gjennom ren CSS3.
TekstrotasjonBruker en image sprite og et dryss av CSS for å få ting plassert riktig.
OversiktstekstSlik legger du til en disposisjon, eller strekk, til teksten din ved hjelp av CSS3- text-stroke
.
Interaktiv tekstmaskeringseffekt ved hjelp av text-shadow
CSS-egenskapen.
Ditch Javascript og opprett nudge-effekt helt med CSS3.
CSS Valg StylingEndre tekstvalg styling med CSS3.
CSS3: MenyFlere kolonner innhold
Bruk CSS3 til å lage et sett med kolonner på nettstedet ditt uten å måtte tilordne individuelle lag og (eller) avsnitt for hver kolonne.
Sexy Tooltips med bare CSSSlik bruker du den utviklende CSS-standarden, kan du forbedre noen flotte verktøy for kryssbrowser.
Flere verktøytips:- Ren CSS3 verktøytip
- Verktøytips med CSS3.
Nedtrekksmenyen
Slik oppretter du en Apple.com-liknende rullegardinmeny på flere nivåer ved hjelp av border-radius
, box-shadow
og text-shadow
.
Klikk på en fane, skjul alle panelene, vis den som svarer til kategorien som nettopp klikket på - alt med CSS.
3D-bånd med CSS3Lag flotte 3D-bånd med bare CSS3.
CSS3: Drop skyggeDrop skygge i bildet
Vis flere teknikker og noen av de mulige opptredener for å slippe skygger uten å bruke bilder.
Glød-faner med bokseskyggeHvordan lage intuitive og vakre faner i CSS3 uten bilde.
CSS3: KnapperOpplæring: Små knapper
Slik oppretter du vakre kryssbrowser-kompatible CSS3-knapper som degraderer grasiøst.
SnakkeboblerUlike former for talebobleffekt opprettet med CSS 2.1 og forbedret med CSS3.
Github samme knapperSamling av knapper som viser hva som er mulig ved hjelp av CSS3, samtidig som du opprettholder det enkleste mulige oppslaget.
Spinning, Fading Ikoner med CSS3 og MooToolsHvordan bruke CSS3 og MooTools til å lage dymaniske roterende elementer.
BildeoverleggPraktisk bruk av CSS3 grensebildeegenskapen.
Mer
- CSS3 + Mootools. Et eksempel på eksperimentering i mootools. Dette legger til CSS3 egenskaper i kjernen MooTools rammeverk.
- Eksploderende logo med CSS3 og MooTools eller jQuery. Ta statisk bilde og gjør det til en animert, eksploderende effekt på musen over.
- Kraften til HTML 5 og CSS 3. HTML 5 og CSS 3 blir raskt stadig mer populært, Perishable Press er her for å forklare hvordan og hvorfor.
- Spinning Stråler med CSS3 Animasjoner og JavaScript Eksempel. Enkel og subtile ray spinning effekt på baksiden av et bilde.
- CSS3 Polaroid Fotogalleri. Hvordan lage en kule, seriøs stabel Polaroid-bilder med ren CSS-styling.
- HTML 5 og CSS 3: Teknikkene du vil bruke snart. Et gjennomslag på å bygge en blogg fra grunnen opp med HTML5 og CSS3.
Cheatsheets & References
CSS3 Cheat Sheet (PDF)
Utskriftsvennlig cheatsheet med fullstendig liste over alle egenskaper, valgtyper og tillater verdier i gjeldende CSS3-spesifikasjon fra W3C.
CSS Support i Opera 9.5
Komplett liste over de støttede CSS-valgene i Opera 0.5.
Fonter tilgjengelig for @ font-face EmbeddingOmfattende liste over skrifter som for øyeblikket er lisensiert for @font-face
embedding.
En veiledning og referanse til CSS3 selectors og dens mønstre.
Kryssbrowser CSS3 Rule GeneratorCSS3 regler du kan kopiere og lime inn på ditt eget stilark.
CSS3 Click Chart
Få CSS3-stiler som boksstørrelse, kantlinje, tekstskygge og mer i et klikk.
CSS innhold og nettleser kompatibilitetKomplett liste over velgertabeller av både CSS og CSS3 med deklarasjon for nettleserkompatibilitetskontroll.
Facebook for å rulle ut "Mid-roll" -annonser snart og vil dele sin inntekt med utgivere
Facebooks videotjeneste er klar til å ta neste skritt, ettersom industrikilder har fortalt at Recode at sosialtjenester vil begynne å teste et nytt "mid-roll" -annonsformat for videoer lagt ut på Facebook .Utførelsesvis vil Facebooks "mid-roll" -annonsformat tillate at videoutgivere kan sette inn annonser i sine videoklipp som er minst 90 sekunder lange . De
9 Indie markedsplasser for å selge designene dine
I disse dager er det lettere enn noensinne å dele dine kreasjoner med verden . Det er mange selskaper der ute som gjør det til sitt oppdrag for å hjelpe deg med å selge digitale produkter av noe slag, inkludert musikk, videoer, bøker og design til publikum. De fleste av dem vil sørge for at dine premiumprodukter får så mange produktvisninger som mulig, men i retur tar de et stort stykke av inntektssirkelen.I dag s