Endre Opacity av farger i Web Design

October 26  by Eliza

I mange år har webdesignere brukt åpenhet i nettsteder ved å lagre bilder i enten PNG eller GIF-format og lage en farge gjennomsiktig. Selv om denne metoden er ikke ideelt, har det fungert som en måte å gjøre bildene tilsynelatende "flyte" på en side og til lag ett bilde over en annen ved å plassere et bilde på en side over et bakgrunnsbilde.

Takk til CSS 3, kan du nå lage transparent bakgrunn og med angi ulike nivåer av gjennomsiktighet for å skape mer subtile design effekter for sider som vises på iPhone og iPad. Du kan bruke opacity eiendom med RGBA farger for å lage avanserte åpenhet funksjoner i motiver, slik som gjennomsiktig rullegardin navigasjon liste vist i denne figuren.

Endre tettheten av bakgrunnen bak nedtrekkslisten lar bildet bak det vises gjennom og skaper en mer subtil designeffekt.

Endre Opacity av farger i Web Design

I det eksempel som er vist, ble bakgrunnen i menyen laget en gjennomsiktig grå snarere enn den faste grå brukes i samme utforming som vises i denne figur.

Endre Opacity av farger i Web Design

Opacity innstillinger i CSS 3 gir en stor grad av fleksibilitet med mulighet til å bruke en RGBA farge og for å angi hvor mye åpenhet.