HTML Fotoeffekter

January 6

Bilder spille en stor rolle i webdesign. Bildene er innlemmet i et web-dokument, brukes som bakgrunn og forbedret for navigasjon. Uten skriptspråk som Javascript eller interaktive programmer som Adobe Flash, dine effekter alternativene er begrenset. Du kan bruke noen enkle stil effekter med bruk HTML og CSS.

HTML og CSS

Hyper Text Markup Language (HTML) er et felles authoring språket som brukes av web-programmerere å lage enkle websider. Det gir strukturen for en webside. Mens HTML er flinke til å skape en wire ramme for din Internett-prosjekt, er det ikke bra for å legge til stil eller effekter. Cascading Style Sheet (CSS) sider supplere HTML og tillate brukere å legge grafisk og stilelementer gjennom et nettsted. Som et eksempel, hvis du ønsker å gjøre alt av header teksten fet på hver side i hele nettstedet ditt, kan du gjøre dette med CSS.

Bilde Opacity

En av de vanligste grafiske effekter er dekkevne. Opacity bestemmer hvor gjennomsiktig et bilde er i dokumentet. Hvis du ønsker å plassere et bakgrunnsbilde på websiden din, men nødvendig for å redusere opacity til å skape en mer se-thru effekt, kan du gjøre dette med CSS. Plasser den riktige CSS-kode i <img> HTML-koden:

I dette eksempelet har du definert opacity på "50", som har redusert bildene synlighet på nettsiden til det halve.

Mus over

Du kan ta opacity effekten ett skritt videre og endre tettheten av et bilde når brukerens markøren passerer over den. Dette er en mus-over effekt. Koden ligner på en enkel opasitet endring, og det er også plassert i HTML <img> -taggen. Dette er en god effekt å bruke for navigasjonsknappene.

<Img style = "opacity: 0.5; filter: alpha (opacity = 50)"

onmouseover = "this.style.opacity = 1; this.filters.alpha.opacity = 100"

onmouseout = "this.style.opacity = 0,5; this.filters.alpha.opacity = 50" />

Du kan se "onmouseover" og "onmouseout" kommandoer. Denne koden vil redusere tettheten av bildet med 50 prosent når siden først lastes, vil øke det til 100 prosent når du beveger musen over bildet og deretter redusere den tilbake til 50 prosent når markøren forlater bildet.

Flyte

Float er en annen enkel HTML og CSS bildeeffekt. Float definerer hvor et bilde vises i en tabell, celle eller et dokument. The Float kommandoen bruker egenskapene til venstre, høyre og sentrum. Du kan bruke denne til enten å plassere et bilde i en tekst eller å lage en serie med riktig monterte bilder i et galleri. Du ville definere dette i HTML <head> -taggen som følger:

<Head>

img

{

float: left;

}

</ Style>

</ Head>

I eksempelet ovenfor, har du oppgitt at du ønsker å ha alle HTML-elementer med <img> -taggen å flyte til venstre i dokumentet.