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.

Fordeler med CSS3, med forklaringer og eksempler på CSS3 egenskaper og selektorer.

Webmonkey bringer deg gjennom flere grunnleggende triks i CSS3, inkludert avrundede grenser, grenser, slipp skygger, bilde triks og mer.

Folk på Six Revision intervjuet Eric Meyer med verdifull innsikt og svar på CSS3.

Hvordan 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.

Avrundede 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.

Tekst effekter inkluderer: vintage / retro, neon, innsett, anaglyphic, brann og brettspill.

Hvordan ta grunnleggende oppslag og forvandle den til en attraktiv og vakker typografisk design gjennom ren CSS3.

Bruker en image sprite og et dryss av CSS for å få ting plassert riktig.

Slik 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.

Endre tekstvalg styling med CSS3.

Flere 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.

Slik bruker du den utviklende CSS-standarden, kan du forbedre noen flotte verktøy for kryssbrowser.

- 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.

Lag flotte 3D-bånd med bare CSS3.

Drop skygge i bildet
Vis flere teknikker og noen av de mulige opptredener for å slippe skygger uten å bruke bilder.

Hvordan lage intuitive og vakre faner i CSS3 uten bilde.

Opplæring: Små knapper
Slik oppretter du vakre kryssbrowser-kompatible CSS3-knapper som degraderer grasiøst.

Ulike former for talebobleffekt opprettet med CSS 2.1 og forbedret med CSS3.

Samling av knapper som viser hva som er mulig ved hjelp av CSS3, samtidig som du opprettholder det enkleste mulige oppslaget.

Hvordan bruke CSS3 og MooTools til å lage dymaniske roterende elementer.

Praktisk 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.

Omfattende liste over skrifter som for øyeblikket er lisensiert for @font-face
embedding.

En veiledning og referanse til CSS3 selectors og dens mønstre.

CSS3 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.

Komplett liste over velgertabeller av både CSS og CSS3 med deklarasjon for nettleserkompatibilitetskontroll.


Google I / O 2017 er nå i full sving: Her er hva du trenger å vite
Google I / O 2017 er over oss, og som Keynote synes å indikere, ser Google ut til å ha store planer for både Google Assistant, så vel som dets kunstige intelligenssystemer. Uten ytterligere ado, la oss dykke rett inn i kunngjøringene som ble gjort under I / O Keynote .Google Assistant 2017 kan vise seg å være året for Google Assistant for selskapet som det har annonsert at sin egen digitale assistent vil utvide sin rekkevidde på en svært aggressiv måte. Til å beg

Google Maps vil snart la deg dele realtidsstedet
Å holde oversikt over vennens plassering og forventet ankomsttid er en funksjon som har vært tilgjengelig på visse navigasjonsapper som Waze. Nå kommer disse funksjonene også til Google Maps-appen i nær fremtid.Når funksjonen går live, vil Google Maps-brukere se et alternativ for "Share Location" i appens sidemeny. Ved å