CSS3 Gradienten

Gradienter är några av de bästa effekterna du lägga till på informative webbsidor, då dem inte distraherar. Du kan lägga till gradienter i Safari, Chrome, och FireFox; detta täcker då drygt halva antalet av totala besökare på vissa sidor.

Här är ett bildexempel från FireFox där “CSS3 Gradienter” används:

Syntaxen för “CSS3 Linear Gradients” är olika hos FireFox och Safari/Chrome webbläsarna.
   FireFox linjära gradienter:
-moz-linear-gradient(<point> || <angle>, color-stops)
   Safari, Chrome linjära gradienter
-webkit-gradient(linear, <point>, color-stops )

* Punk teller vinkel: Denna används för att definiera startpunkten av gradienten. Värdet kan vara en procent (%), i pixlar, eller “vänster”, “mitten”, eller “höger” för horisontell och “topp”, "mitten", eller “batten” för vertikal positionering. Om en horisontell eller vertikal position inte är specificerad, används “center” eller 50 % som standardvärde. I FireFox är vinkelvärden också accepterade som exempelvis 45deg.
* färgstopp: Färger som gradienten bör övergå till och från. Om fler än två färger specificeras utan några explicit stoppvärde för varje färg, kommer gradienten att övergå från en till nästa tills sista färgen.
      - I FireFox, följer varje färgstopp följande syntax: [ | ]. Om en procent (0 till 100 %) eller längdvärde (0 till 1.0) definieras efter färgnamn, kommer föregående färg att blekna in till den stoppfärg vid den stoppunkten. Om inget värde finns, kommer färgen att gradvis blekna ut från startfärgen till stoppfärgen.
      - I Safari, följer varje färgstopp följande syntax: color-stop(värde, färg). Stoppvärde är antingen en procent (0 till 100 %) eller längdvärde (0 till 1.0) eller from(färg) och to(färg). De två senare är förkortade funktioner lika till color-stop(0, färg) och color-stop(1.0, färg).

Följande kod har genererats för “CSS3 Gradient” i CSS3Menu:
background-image: -moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));
background-image: -webkit-gradient(linear,50% 0%,50% 100%, from(rgba(255,255,255,0.38)), to(rgba(255,255,255,0.16)));

“CSS Gradienter” stöds i FF3.6+, Opera 10.50, Safari 2+ och Google Chrome.

Se även:
CSS3 Runda hörn, CSS3 Skugga, CSS3 Animationer, CS3 Textskugga, CSS3 Gradientfärger, CSS3 Övergång

Nedladdning

• Kostenlose Version herunterladen
  für Windows & Mac
• Kommerzielle Version herunterladen
  für Windows & Mac - $59

CSS3 Gradientfärger på objekt och bakgrunder med CSS3 Menu

Helfärgstoner försvinner gradvis från webben då de börjar bli gammeldags i internetanvändarnas ögon. Medan världskända nätresursen såsom Wikipedia med deras minimala designstil fortfarande kan använda det, så måste övriga webbsidor slåss för deras besökares uppmärksamhet med alla tillåtna medel.