Glatte CSS-Verläufe

Ich lerne, wie man CSS-Gradienten verwendet.Glatte CSS-Verläufe

Mein Problem ist mit von oben nach unten Gradienten. Sie können nur sehen die "Haltestellen" in der Farbe ändern.

enter image description here

Das ist mein CSS-Code

#header { 
    width:1000px; 
    height:250px; 
    background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
    background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

Gibt es eine Möglichkeit nach unten Steigungen der Anschläge in oben zu glätten? (Dies ist zu meinem Auge, ist nicht sehr sichtbar in von links nach rechts oder von rechts nach links Gradienten)

Quelle

2012-10-31 Isuru

Think's unter css wird Suite Ihr Bedarf.

CSS:

#header { 
    width:1000px; 
    height:250px; 
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37)); 
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%); 
}

http://jsfiddle.net/xPLPH/

Erfahren Sie mehr über Linear Gradients: https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

Quelle

2012-10-31 04:54:11

Dies wird tun. Vielen Dank. :) – Isuru

Dies ist keine Lösung für das genannte Problem mit sichtbaren Farbstopps. Sie schlagen nur vor, keine Farbstopps zwischen den Farbverläufen zu verwenden und sie an die Ränder zu verschieben: zuerst auf 0%, zuletzt auf 100%. Sie können dies sehen, wenn Sie Farbe-Stops wie in Frage Autorcode verschieben: http://jsfiddle.net/zoaporx0/1/ –

Keine Antwort überhaupt. Die Kante ist noch sichtbar. –

Das ist mein Lieblingswerkzeug für Steigungen zu machen. Ich liebe besonders, dass es SASS/SCSS-Syntax ausgibt.

http://www.colorzilla.com/gradient-editor/

Quelle

2012-10-31 04:56:40

Ich kenne dieses Tool, aber ich wollte nur lernen, es über CSS zu tun. Werkzeuge sparen Zeit und alles, aber sie machen keinen Spaß. : D – Isuru

Dies ist durch CSS. Dies wird Ihnen helfen, verschiedene Ansätze tatsächlich zu lernen. –

Antwort

Verwandte Themen