Innholdsfortegnelse:
Video: ZEITGEIST : MOVING FORWARD 時代の精神 日本語字幕 CC版 2024
CSS3, den nyeste utgaven av Cascading Style Sheets, introduserer fremskritt innen designhåndtering. Av disse er noen nye evner som definerer fargegradier, grader av gjennomsiktighet og til og med refleksjoner definitivt verdt å sjekke ut!
Tidligere, hvis du ville ha en fargegradient, måtte du utforme bitmapbilder for formålet. Nå kan CSS fylle beholdere med lineære og radiale gradienter som gir en jevn overgang fra en farge til en annen, eller fra en farge til flere farger. Du kan også kontrollere hvordan gradienten fyller beholderen.
Mest interessant er det faktum at du nå kan bruke CSS-gradienter som bilde masker som inneholder alfa-kanal gjennomsiktighet. Ved å definere bildet du bruker som en maske - og tilknytte bildet med et element eller et annet bilde som en del av definisjonen - kan du få det elementet til å forsvinne gradvis i utseende og avsløre hvilken bakgrunn som helst skjult under. Denne funksjonen tillater noen interessante lagdelte effekter i webdesign.
For å lage en refleksjon (hvor bildet ser ut til å være speilet av overflaten nedenfor) ved hjelp av bare CSS, må du bruke en kombinasjon av transformasjonsinnstillinger og containere, men nettoeffekten er likevel en refleksjon effekt. I hovedsak lager du to containere - en for hovedbildet og en for refleksjonen. Ved å bruke overføringseffekter til refleksjonskontaineren som først setter bildet opp og ned, så squash sin høyde og deretter legge til en gjennomsiktig maske, ender du med en overbevisende refleksjon som vist i den følgende figuren. Skjønnheten er at med denne teknikken har du en vanlig grafikk med muligheten til å inkludere en refleksjon - en refleksjon som er dynamisk konfigurerbar - alt uten bruk av Photoshop.
CSS-skyggeeffekter
Det er nå mulig å bruke CSS til å legge til drop shadows til elementer - en annen veldig kul effekt. Før CSS3 var semi-transparent skygger bare mulig med bitmap-bilde, spesielt ved hjelp av PNG-formatet som støtter gjennomsiktighet.
Bare ved å justere fargene og mengden offset og uskarphet, kan du skape svært forskjellige effekter. Legg merke til at i tilfelle av bokseskyggen (det tredje bildet i den følgende figuren) er det nødvendig å ha to kodelinjer umiddelbart etter - en for WebKit og en for Moz. Disse er for å støtte henholdsvis Safari og Firefox nettlesere.
Avrundede hjørner
Følgende figur viser et eksempel på den nye CSS3-grenseverdien i handling. Ved å definere en verdi for denne egenskapen - sjekk ut de to siste linjene i CSS-koden, der verdien er satt til 10 piksler - du kontrollerer hvor stor hjørnekurven vises. Før innføring av grensen-radiusegenskapen, var det mulig med runde hjørneeffekter bare ved bruk av bitmap-grafikk.
Animasjonseffekter
Bruk CSS3, nå kan du bruke flere kule 2D- og 3D-animasjonseffekter ved hjelp av transformasjonsegenskapen. Denne egenskapen inneholder en rekke funksjoner som skala, rotere, skjevhet og perspektiv som du kan definere og kombinere for å påvirke animasjonen på ulike måter. Du kan til og med definere overgangseffekter for å kontrollere hvordan objektet forvandler, og hvor lenge det varer.
Overgangseffekter kan også brukes på normale koblinger. For eksempel, hvis du vanligvis ruller over en lenke for å se et høydepunkt, fremhever det alt på en gang. Ved å bruke egenskapene kalt overgangseiendom og overgangstid, kan du få høydepunktet til å falle sakte inn - og angi hvor mange sekunder det tar å gjøre det.
Når det gjelder 3D-effekter, hvis du noen gang har sett iPhone Weather-programmet som ser ut til å "vende" for at du kan konfigurere byene dine, opplever du CSS3-effekter i aksjon. Ved å bruke perspektivegenskapen og angi verdier for ulike transformasjonsfunksjoner som perspektiv, rotasjon, skjevhet og skala, kan du bli veldig kreativ med brukergrensesnittets presentasjon.
