Kreis mit Farbverlauf nach Transparenz zeichnen mit CSS3
Einen Kreis können wir mit der CSS3 Eigenschaft border-radius zeichnen, wobei der Radius genau die Hälfte der Größe des Elements sein muss. Die Größe des Kreises ist wiederum durch Höhe und Breite des Elements und den entsprechenden border-radius definiert.
Einen Farbverlauf in dem Kreis ermöglicht uns die Kombination von background-image mit radial-gradient(circle farthest-corner at center, Farbe des Kreises 0%, transparente Farbe des Kreises 100%).
Die Transparenz kriegen wir durch eine Farbangabe in RGBA hin, wobei der Farbkanal Alpha von 1 auf 0 geht.
CSS3 rockt.