Online-resurser för att generera CSS3-gradienter - dummies

Möjligheten att generera komplexa gradientblandningar är en av de verkligt dramatiska förbättringarna i CSS3. Fram till tillkomsten av CSS3 förlitade sig designare på kaklade bildfiler för att skapa texturerad bakgrund bakom sidor och designelement (som taggar). Dessa bildfiler saktade ned sidor och såg ut tackiga när de sakta hämtades till sidor som en användare hade öppnat.

Det är den goda nyheten.

Nackdelen är att att definiera syntaxen för ens en enkel linjär gradient är ett krångel eftersom olika webbläsare har olika syntax för att definiera även dessa enkla gradienter. Och när det gäller att definiera diagonala eller radiala gradienter blir skillnaderna mellan webbläsarsyntax ännu tydligare.

Bara för att ge en känsla av detta, undersök den CSS som krävs för att skapa bakgrundsbilden i figuren nedan:

bakgrund: -moz-radial-gradient (centrum, ellipsdäck, 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+ * / bakgrund: -webkit-gradient (radial, center center, 0px, center center, 100%, färgstopp (0%, rgba (228, 245, 252, 1)), färgstopp (50% rgba (159, 216, 239, 1)), färgstopp (100%, rgba (42, 176, 237, 1)), färgstopp (51%; / * Chrome, Safari4 + * / bakgrund: -webkit-radial-gradient (centrum, ellipsskydd, 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+ * / bakgrund: -O-radial-gradient (centrum, ellipsskydd, 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+ * / bakgrund: -ms-radial-gradient (centrum, ellipsskydd, rgba (228, 245, 252, 1) 0%, rgba (191, 232, 249, 1) 50%, rgba 216, 239, 1) 51%, rgba (42, 176, 237, 1) 100%); / * IE10 + * / bakgrund: radialgradient (ellipse vid centrum, 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å, vad är en dålig designer att göra? Lyckligtvis finns det flera riktigt användbara CSS-gradientgeneratorer online. Här är tre av de bästa:

ColorZillas Ultimate CSS Gradient Generator

Den Ultimate CSS Gradient Generator är troligen den mest kraftfulla av CSS3-gradientgeneratorerna, och konstruktörer definierar gradienter med reglage som kommer att känna sig bekväma för alla som har definierat en gradient i Illustrator, CorelDraw eller andra ritprogram, visas här:

Den Ultimate CSS Gradient Generator tillhandahåller också alternativ för att generera SVG-bilder som kommer att identifieras i Internet Explorer 9 (som har begränsat stöd för CSS3-gradienter).

CSS3 Gradient Generator

CSS3 Gradient Generator, skapad av Damian Galarza, har några mindre funktioner än Ultimate CSS Gradient Generator, men ett mycket rent, tillgängligt gränssnitt gör det enkelt att skapa grundläggande linjära och diagonala blandningar, medan titta på CSS-kod visas på skärmen.

Denna resurs är speciellt användbar för att skapa gradientbakgrund för knappar eftersom förhandsgranskningsfönstret är en fin, ren förkonfigurerad knappstorlek.

CSS Gradient Background Maker

Några dudes i ett garage nära Seattle sätta upp en lättanvänd och kraftfull CSS3-gradientgenerator som de kallar CSS Gradient Background Maker. De har en alternativ uppstart som de kallar Microsoft, och gradienterna du genererar här fungerar - ja, Internet Explorer (versioner 10 och senare), men också alla andra nuvarande browsers.

CSS Gradient Background Maker kan vara det snabbaste sättet att skapa gradienter av gänget som det kommer med över ett dussin pre-sets.

Hur CSS3 Gradient Generators Work

Alla tre CSS3-gradientgeneratorerna som listas här, och andra, skapar bitar av CSS3-kod som designers kan kopiera och klistra in i CSS-filer. De generatorer ger inte mycket hjälp i hur man gör det - de förväntar sig att du kan klara av att definiera CSS3-bakgrunder för element och klass- och div-selektorer i en CSS-fil.

Men processen är inte för svår. Om du till exempel skapar en klassstil och heter den. bakgrund kan du kopiera och klistra in en gradientstil i den väljaren som visas här:

. bakgrund {/ * IE10 konsumentförhandsgranskning * / bakgrundsbild: -ms-radial-gradient (centrum, cirkel närmaste sida, #FFFFFF 0%, # 00A3EF 100%); / * Mozilla Firefox * / bakgrundsbild: -moz-radial-gradient (centrum, cirkel närmaste sida, #FFFFFF 0%, # 00A3EF 100%); / * Opera * / bakgrundsbild: -O-radial-gradient (center, cirkel närmaste sida, #FFFFFF 0%, # 00A3EF 100%); / * Webkit (Safari / Chrome 10) * / Bakgrundsbild: -webkit-gradient (radial, centercenter, 0, centercenter, 140, färgstopp (0, #FFFFFF), färgstopp (1, # 00A3EF)); / * Webkit (Chrome 11+) * / bakgrundsbild: -webkit-radial-gradient (center, cirkel närmaste sida, #FFFFFF 0%, # 00A3EF 100%); / * W3C Markup, IE10 Release Preview * / Bakgrundsbild: Radial-gradient (Cirkel närmaste sida i mitten, #FFFFFF 0%, # 00A3EF 100%);}

Och sedan kan du tillämpa bakgrunden till någon element i din HTML-fil. Här tillämpas bakgrunden på en tagg: