Video: Intro to Psychology: Crash Course Psychology #1 2024
For enkelhet kan CSS3-modulene skilles inn i ti kategorier: grenser, bakgrunner, skrifter, teksteffekter, flere kolonner, overganger, 2D overganger, 3D overganger, animasjoner og brukergrensesnitt. Ta en kort titt på hver modul for å se hva den kan gjøre.
Borders: Grensesnittmodulen utvider mulighetene til kantlinjekategorien ved å legge til alternativer for å angi kantlinjens radius for å lage buede hjørner, bokseskyggen for å legge til dropshadows og grensebildet for å bruke grafikk til stilgrenser heller enn å bruke en enkelt farge per kant.
Bakgrunn: Det er for øyeblikket tre nye tillegg til bakgrunnskategorien med CSS3. Bakgrunnsstørrelsen er spesielt nyttig for å skape skalerbar grafikk. Bakgrunnsopprinnelsen gir tre steder å plassere bakgrunnsbilder i forhold til boksemodellen, og bakgrunnsbakgrunnen gjør at bakgrunnsfarger kan klippes til innholdet i en boks i stedet for kantene til en boks. eske.
I tillegg tillater CSS3 deg nå å bruke flere bakgrunnsbilder til enhver beholder.
Skrifter: I stedet for å bli sittende fast ved hjelp av websikre skrifttyper for alle designene, kan du i den nye @ font-face-eiendommen velge og bruke hvilken som helst font som er hostet på webserveren din. Hva skjer er a. ttf (True Type Fonts) eller. Otf (OpenType Fonts) fontfil blir automatisk lastet ned til brukerens enhet hvis og når skrifttypen ikke blir oppdaget.
Du har kanskje allerede sett en lignende funksjon i bruk med nettsteder som bruker Google-skrifter og Typekit-skrifter. Denne stilregelen utvider den muligheten ved å tillate deg å bruke dine egne systemfonter. Vær imidlertid sikker på ikke å bryte noen opphavsrettslover ved å angi opphavsrettsbeskyttede skrifttyper!
Teksteffekter: Det er faktisk 11 nye egenskaper i denne modulen, men ikke alle har stor nettleserstøtte. Egenskapene som for øyeblikket har støtte, er rettferdiggjør, overløp, skygge, ordbrudd og ordlås.
Flere kolonner: Uten å måtte bruke ekstra beholdere eller flyter, kan du nå opprette flere tekstkolonner med de ti forskjellige flere kolonneegenskapene. Selv om de fleste jobber nå, trenger noen fremdeles nettleserespesifikke prefiks. Likevel er de fortsatt ganske darn ryddige. For best resultat, sett kolonneantalet og gapbredden.
Overganger: Hold på hatten din, du kan nå lage bevegelse på siden uten animerte gifs, Flash eller JavaScript! Overganger kommer i tre smaker, vanlig, 2D og 3D. Med den vanlige overgangen kan du endre en eller flere egenskaper av et element, for eksempel å endre bredden på et objekt i løpet av et spesifisert antall sekunder, kombinert med: svingerpseudoklassen.
2D Overganger: Objektene i denne modulen lar deg manipulere 2D-egenskapene til et element. Bruk dem separat eller kombinert for å flytte, skala, skrå, snurre, strekke og vri elementer langs et horisontalt eller vertikalt plan. For eksempel kan du gjøre en boks vokse og spinne mens du flytter fra venstre til høyre.
3D-overganger: Som om 2D-overganger ikke var kule nok, vent til du ser hva 3D-overgangene gjør! Ved å bruke en metode som forvandler objektet langs X- og / eller Y-aksen, kan du gjøre at objekter dine ser ut til å rotere i 3D-plass, noe som gir seerne en sjanse til å se den reverserte "baksiden" av en gjenstand.
Selv om nettleserstøtten er begrenset til mer avanserte transformasjoner, vil du til slutt kunne rotere, skalere og flytte sammen blant annet X, Y og Z-aksene. Bare kraftig.
Animasjoner: Ok, hva skjer når du legger alle disse nye transformasjonsteknikkene sammen? CSS3 animasjoner, baby - den typen som kan erstatte animerte GIF, Flash, og til og med noen JavaScript. Alt magien skjer ved å binde den nye @keyframes-eiendommen til en väljare ved å bruke animasjonsegenskapen med et spesifisert navn og varighet.
Du kan for eksempel endre posisjonen og bakgrunnsfargen til et objekt slik at objektet ser ut som morphing gjennom plass, og du kan da inkludere koden for å gjøre omvendt rekkefølge for animasjonen og fortsette å løpe uendelig.
Brukergrensesnitt: Med disse nye egenskapene kan du legge til egenskaper til forskjellige objekter som konverterer dem til interaktive elementer for besøkende på nettstedet. For eksempel kan du endre størrelsen på lag og textarea skjemafelter, påkalle flippen og piltastene på et tastatur, og opprette en offset-oversikt som strekker seg utenfor kantkanten.
Nå som du har oversikt over de nye modulene, kan du finne ut mer om hva de kan gjøre. Du kan for eksempel lage skygger på former og tekst, bruke bakgrunnsgradienteffekter, og flytte objekter dine herfra til der.
