Hvordan å generere bilder ved hjelp av Gradient Image Maker på CSS3 - dummies

Du har allerede sett en rekke andre programmer beskrevet som lager gradientbilder. Det virker som om hvert nettsted, inkludert CSS3, gir en. Dynamic Drive Gradient Image Maker er forskjellig, skjønt: Det oppretter faktisk en bildefil, i stedet for å lage CSS som til slutt skaper et bilde på skjermen.

Forskjellen er viktig. Bruk av et bilde betyr at nettleseren bare trenger å støtte bilder - noe som hver nettleser ut i dag kan gjøre - men når du bruker CSS, må du vite at vertsbrowseren faktisk støtter det nødvendige CSS-nivået. Du får tilgang til Gradient Image Maker ved å klikke på Gradient Image på Verktøy-menyen på hovedsiden.

Gradient Image Maker har et forenklet grensesnitt. Alt du gjør er å velge hvilken gradient du vil opprette (horisontal, vertikal eller diagonal), definer gradientstørrelsen, og velg farger du vil bruke.

Når du velger en farge, kan du enten klikke i et område i fargevalgeren eller du kan skrive heksadesimale koden for fargen du vil bruke. Det er lite fleksibilitet i å bruke dette verktøyet. Det er spesielt designet for å gi en enkel, rask måte å skape en gradient på.

Når du er fornøyd med gradienten, velg et bildeutdataformat. JPEG-formatet genererer vanligvis mindre filer, mens PNG-formatet generelt vil produsere filer av høyere kvalitet. Klikk på Få fullstørrelse bilde, og du ser en annen fane åpen med det gradientbildet du ønsket. Høyreklikk bildet og velg Lagre bilde Som fra hurtigmenyen for å lagre bildet på harddisken.

Det er et triks å bruke bildet som bakgrunn. HTML støtter et bakgrunnsattributt for taggen. Angivelig er dette attributtet utdatert, og du bør ikke stole på at det er tilgjengelig for alltid. Men det fungerer fortsatt i alle nettlesere (og på alle plattformer). Følgende kode bruker bakgrunnsattributtet, og viser en side med gradienten som et bakgrunnsbilde i ønsket størrelse.

Testing a Gradient Image

Noen eksempler på tekst

Denne teknikken har fordelen av ikke å bruke noen form for CSS for å vise bildet, men det er noe risikabelt som fremtidige endringer gjøres for hvordan HTML fungerer i nettlesere. For nå ser det ut til at hver nettleser på planeten fremdeles støtter denne spesielle metoden for å vise et bakgrunnsbilde (når noen ikke vil bruke CSS-metoden). Dette er hva graden ser ut i handling.

Den nåværende måten å bruke bildet på, er å bruke den ved hjelp av CSS. I dette tilfellet bruker du det ved hjelp av bakgrunnsegenskapen for kroppsstilen, som vist her.

Teste en gradient bilde kropp {bakgrunn: url ("Gradient. JPG"); bakgrunnsstørrelse: 80px 80px;}

Teste et gradientbilde


Noen eksempler på tekst
Fordelen med denne tilnærmingen er at du kan kontrollere bakgrunnsstørrelse, opprinnelse og andre funksjoner. Bruke CSS, når det er mulig, øker fleksibiliteten ved å bruke et gradientbilde. Men hvis du skal bruke CSS uansett, betaler det ofte å bruke gradienten selv ved å bruke CSS.

Hovedfordelen ved å bruke et bilde over ren CSS er at du raskt kan bytte ett bilde til en annen, ved hjelp av en rekke teknikker for å endre sidenes utseende uten å skrive noen ny kode.