Online ressurser for å generere CSS3 gradienter - dummies

Evnen til å generere komplekse gradientblandinger er en av de virkelig dramatiske forbedringene i CSS3. Frem til adventen av CSS3, benyttet designere på flislagte bildefiler for å lage teksturerte bakgrunner bak sider og designelementer (som tagger). Disse bildefilene reduserte sidene og så klebrig når de sakte lastet ned på sider en bruker hadde åpnet.

Det er den gode nyheten.

Ulempen er at å definere syntaksen for en enkel lineær gradient er et problem fordi forskjellige nettlesere har forskjellig syntaks for å definere selv disse enkle gradienter. Og når det gjelder å definere diagonale eller radiale gradienter, blir forskjellene mellom nettlesersyntaxen enda tydeligere.

Bare for å gi en følelse av dette, undersøk CSS som kreves for å produsere bakgrunnsbildet i figuren nedenfor:

bakgrunn: -moz-radial-gradient (senter, ellipsdeksel, rgba 228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * FF3. 6 + * / bakgrunn: -webkit-gradient (radial, midtpunkt, 0px, midtpunkt, 100%, fargestopp (0%, rgba (228, 245, 252, 1)), fargestopp (50% rgba (159, 216, 239, 1)), fargestopp (100%, rgba (42, 176, 237, 1)), fargestopp (51%; / * Chrome, Safari4 + * / bakgrunn: -webkit-radial-gradient (senter, ellipsdeksel, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * Chrome10 +, Safari5. 1+ * / bakgrunn: -O-radial-gradient (senter, ellipsdeksel, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * Opera 12+ * / bakgrunn: -ms-radial-gradient (senter, ellipsdeksel, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * IE10 + * / bakgrunn: radialgradient (ellipse ved senter, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba (159, 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * W3C * /

Så hva er en dårlig designer å gjøre? Heldigvis finnes det flere virkelig nyttige CSS-gradientgeneratorer på nettet. Her er tre av de beste:

ColorZillas Ultimate CSS Gradient Generator

Sannsynligvis den kraftigste av CSS3 gradientgeneratorene, gir Ultimate CSS Gradient Generator designere gradienter med glidere som vil føle seg komfortable for alle som har definert en gradient i Illustrator, CorelDraw eller andre tegneprogrammer, vist her:

Den Ultimate CSS Gradient Generator gir også muligheter for å generere SVG bilder som vil bli gjenkjent i Internet Explorer 9 (som har begrenset støtte for CSS3 gradienter).

CSS3 Gradient Generator

CSS3 Gradient Generator, opprettet av Damian Galarza, har noen få funksjoner enn Ultimate CSS Gradient Generator, men et veldig rent, tilgjengelig grensesnitt gjør det enkelt å lage grunnleggende lineære og diagonale blandinger, mens ser på CSS-koden vises på skjermen.

Denne ressursen er spesielt nyttig for å skape gradientbakgrunn for knapper, siden forhåndsvisningsvinduet er en fin, ren forhåndskonfigurert knappstørrelsesfirkant.

CSS Gradient Background Maker

Noen dudes i en garasje oppe nær Seattle satte opp en brukervennlig og kraftig CSS3-gradientgenerator de kaller CSS Gradient Background Maker. De har en alternativ oppstart som de kaller Microsoft, og gradienter du genererer her, fungerer i - ja, Internet Explorer (versjon 10 og senere), men også alle andre nåværende browsere.

CSS Gradient Background Maker kan være den raskeste måten å lage gradienter av gjengen som det kommer med over et dusin forhåndsinnstillinger.

Hvordan CSS3 Gradient Generators Work

Alle tre CSS3-gradientgeneratorene som er oppført her, og andre, lager også biter av CSS3-kode som designere kan kopiere og lime inn i CSS-filer. De generatorer gir ikke mye hjelp til hvordan de gjør det - de forventer at du skal kunne håndtere definere CSS3-bakgrunn for elementer og klasse- og div-selektorer i en CSS-fil.

Men prosessen er ikke for vanskelig. For eksempel, hvis du oppretter en klassestil og navngir den. bakgrunn, kan du kopiere og lime inn en gradientstil i den velgeren som vist her:

. bakgrunn {/ * IE10 Forbrukerforhåndsvisning * / bakgrunnsbilde: -ms-radial-gradient (senter, sirkel nærmest side, #FFFFFF 0%, # 00A3EF 100%); / * Mozilla Firefox * / bakgrunnsbilde: -moz-radial-gradient (senter, sirkel nærmest side, #FFFFFF 0%, # 00A3EF 100%); / * Opera * / bakgrunnsbilde: -O-radial-gradient (senter, sirkel nærmest side, #FFFFFF 0%, # 00A3EF 100%); / * Webkit (Safari / Chrome 10) * / bakgrunnsbilde: -webkit-gradient (radial, senter senter, 0, senter senter, 140, fargestopp (0, #FFFFFF), fargestopp (1, # 00A3EF)); / * Webkit (Chrome 11+) * / bakgrunnsbilde: -webkit-radial-gradient (senter, sirkel nærmest side, #FFFFFF 0%, # 00A3EF 100%); / * W3C Markup, IE10 Release Preview * / bakgrunnsbilde: Radial-gradient (sirkel nærmest i midten, #FFFFFF 0%, # 00A3EF 100%);}

Og så kan du bruke bakgrunnen til noen element i HTML-filen din. Her brukes bakgrunnen til en tag:

(innhold her)