Slik bruker du CSS3-bildeffekter - dummier

CSS3 lar deg bruke noen interessante spesialeffekter til HTML5-sidene dine. Disse effektene kan brukes på ethvert element, men de brukes generelt til bilder og overskrifter. Vær oppmerksom på at disse fremdeles anses som eksperimentelle, så implementeringen av nettleseren varierer.

Gjennomsiktighet

CSS3 har fullstendig støtte for justerbar opasitet. Dette gjenspeiles på flere måter. For det første har ethvert element et attributt som kan settes fra 0 (helt gjennomsiktig) til1 (helt ugjennomsiktig).

Her er en div med delvis gjennomsiktighet lagt på et bilde.

Den komplette koden for denne siden er lett å følge:

opacity. html kropp {bakgrunnsbilde: url ("apoyo. jpg"); bakgrunnsrepetisjon: ingen gjentak;} h1 {farge: rgba (0, 0, 0, 3);} #box {posisjon: absolutt; topp: 350px; venstre: 100px; høyde: 100px; bredde: 100px; grense: 1px solid rød; bakgrunnsfarge: hvit; opasitet:. 3;}

Opacity Demo

Alle koden er vanlige HTML- og CSS2-ting, bortsett fra det siste attributtet. Opasitetsattributtet tar en enkelt flytpunktsverdi mellom 0 og 1. Null (0) er helt gjennomsiktig og en (1) er helt ugjennomsiktig.

Merk at eksemplet bruker den andre hovedformen for gjennomsiktighet støttet av CSS - overskriften bruker RGBA-modellen for å legge til alfa-gjennomsiktighet i en farge. Generelt bruker alpha når du vil legge til delvis gjennomsiktighet i en enkelt farge. Opacity kan brukes til et helt element, til og med noe komplisert som et bilde eller en video.

Alle de nyeste nettleserversjonene støtter opacity uten å kreve leverandørspesifikke prefikser. Eldre nettlesere viser bare elementet som helt ugjennomsiktig, slik at alt under et delvis transparent element kan være usynlig for eldre nettlesere.

Refleksjoner

Refleksjon er en annen av de visuelle elementene som legger til litt på en side når det gjøres bra. Selv om det ikke er en formell del av CSS3-spesifikasjonen, er det en lovende teknologi. For øyeblikket støtter bare WebKit-baserte nettlesere (det vil si Safari, iPhone / iPad og Chrome) denne muligheten. Imidlertid viser det et løfte om at noen form for denne muligheten sannsynligvis vil vises i de andre nettleserne på et tidspunkt.

Bruk følgende CSS for å gjøre ethvert element med refleksjonsklassen en fin refleksjon i de støttede nettleserne:

-webkit-box-reflektere: under 2px;

Grunnleggende refleksjoner er ganske enkle:

1. Bruk -webkit-boks-reflekteringsattributtet.

   Dessverre er det ingen generisk versjon, og heller ikke attributtet er duplisert av andre nettlesere.

2. Angi hvor refleksjonen skal plasseres.

   Normalt går refleksjonen under det primære elementet, men det kan også være over, venstre eller høyre.

3. Angi en gapbredde.

   Refleksjonen kan plasseres rett ved siden av det opprinnelige elementet, men ofte ser det bedre ut med et lite gap. Spalten måles normalt i piksler.

Dette gir en veldig fin refleksjon.

Refleksjoner er imidlertid ikke vanligvis piksel-perfekte duplikasjoner. De har en tendens til å falme ut over avstanden. WebKit lar deg legge til en gradient til refleksjon. I dette tilfellet går graden fra helt ugjennomsiktig (hvit) til helt gjennomsiktig (gjennomsiktig).

. reflektere {

-webkit-boks-reflektere: under 2px 
-webkit-lineær-gradient (bunn, hvit, transparent 40%, gjennomsiktig);}

Standarddelen av refleksjonen er akkurat som forrige Eksempel, men det inkluderer en gradient som fader refleksjonen til gjennomsiktighet.

1. Bygg en lineær gradient.

   Graden for refleksjon er nesten lineær. Merk at gradienten ikke er en ny CSS-regel, men bare en parameter i den eksisterende refleksjonsregelen.

2. Gjør gradienten fra bunn til topp.

   Bruk for å indikere gradienten starter øverst, og for å indikere at gradienten starter nederst. Disse verdiene representerer toppen og bunnen av original bildet, ikke refleksjonen (som selvfølgelig vil bli reversert). Vanligvis begynner gradienten din nederst på det opprinnelige bildet (som står øverst på det reflekterte bildet).

3. Begynn med fullstendig opasitet.

   Bunnen av det opprinnelige bildet er toppen av det reflekterte bildet, og toppen av det reflekterte bildet skal være helt ugjennomsiktig. Denne gradienten handler ikke egentlig om farge, men om hvilke deler av refleksjonen som er synlige. Ved å sette den opprinnelige fargen til hvit blir toppen av refleksjonen helt ugjennomsiktig.

4. Fullfør på fullstendig opasitet.

   Øverst på det opprinnelige bildet (bunnen av refleksjonen) skal være helt gjennomsiktig, så slutt gradienten med det spesielle fargesøkeordet gjennomsiktig (som tilsvarer rgba 255, 255, 255, 0).

5. Legg til et fargestopp for å justere fading.

   Legg til et fargestopp for å indikere hvor i refleksjonen du vil at bildet skal begynne å falme.

Merk at det reflekterte bildet ikke beregnes som et eget element for sideoppsett, så tekst og annet innhold vil flyte rett over refleksjonen din.

Refleksjoner brukes ofte på bilder, men de kan brukes til ethvert element, til og med video!

Det er mulig å få en refleksjonseffekt i andre nettlesere med smart bruk av transformasjons- og gradientattributtene. For nå er det sannsynligvis sikreste å reservere denne effekten for situasjoner der du vet at brukeren skal bruke en støttet nettleser eller når den reflekterte effekten ikke er helt nødvendig.