Hvordan du kan endre størrelsen på elementer og lage gradienter med CSS3 - dummies

Du kan bokstavelig talt gjøre hundrevis av triks på nettstedet ditt med CSS3. Blant de viktigste triksene er å endre størrelsen på elementene på nettsiden din og skape gradienter for bakgrunnen din.

Slik endrer du størrelsen på elementer med CSS3

Du har uten tvil hørt om å endre størrelse på et nettleservindu. Med CSS3 kan du nå gi besøkende muligheten til å endre størrelsen på en hvilken som helst tag eller et tekstarea-element ved å bruke størrelsen på nytt. Størrelsesverdien kan settes til ingen, både, horisontal eller vertikal, og den er vanligvis sammenkoblet med overfyllingsegenskapen som er satt til automatisk.

I det følgende eksemplet kan en 300px bred beholder bli endret både horisontalt og vertikalt, og overflødig innhold reflekteres automatisk for å passe til beholderens skiftende dimensjoner, og legger til rullestenger når det er aktuelt:

div {width: 300px; endre størrelse: begge deler; overflow: auto;}

Hvordan lage gradienter med CSS3

Tidligere, da designere ønsket en gradientbakgrunn for et element, ville de lage en grafikk og deretter gjenta den langs X- eller Y-aksen til fyll ut plassen. Ved hjelp av CSS3 kan du opprette dine egne raskere lastingsgradienter.

Tro det eller ikke, du kan opprette gradienteffekten ved hjelp av bakgrunnsbildeegenskapen parret med verdier for gradienttype, posisjon, fargestopp og fargevalg. Selv om syntaksen for CSS er litt forskjellig for webKit enn Mozilla, er resultatene identiske:

. gradient {/ * Safari og Chrome * / bakgrunnsbilde: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0, # 74B4DB), fargestopp (1, # F7ECCA)); / * Firefox * / bakgrunnsbilde: -moz-lineær-gradient (senterbunn, # 74B4DB 0pt, # F7ECCA 100%); høyde: 200px;}

I tillegg til teknikken som vises her, kan du også lage mer komplekse gradienteffekter ved å bruke gratis online gradientredaktør på ColorZilla-nettstedet.

For å finne ut mer om disse ti teknikkene og arbeide med CSS3 generelt, besøk CSS3. info og W3C.