HTML CSS Kreisrunden Verlauf erstellen

Razorblade

SNF-Inventarnr. #9356663
Hi!

Ich suche schon seit einer geschlagenen Stunde aber ich bring es nicht zusammen.
Ich will für meine Website zwei "Spots" als Hintergrunddeko haben. Da das mit CSS machbar ist will ich nicht eine extragroße Hintergrundgrafik verwenden, schon allein wegen der Ladezeit der Seite.

Was ich praktisch will ist ein Verlauf mit Mittelpunkt bei z.b. 200px von links und 100px von rechts innerhalb eines div-tags mit rgba(255, 255, 255, .15) zu transparent und einem Radius von ca. 200 px vom Mittelpunkt gemessen.
Was ich gesehen hab ist das machbar aber ich komm mit dem Syntax nicht zurecht.

Dnake im Voraus
RB
 
Was du vorhast, kann so nicht funktionieren.
CSS: Geometrische Figuren mit reinem CSS gestalten | t3n

Die Angaben zu Höhe/Breite/Radius sind fix, die kannst du nicht an sonstigen Rändern festmachen - du musst schon wissen wie breit der Bereich um den Kreis ist. Verschieben mit margin-top/margin-left bzw position
position:absolute;
left:450px; top:350px; width:300px; height:150px;
position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Die Anpassung des CSS vom Inhalt ist nur über komplexes Javascript möglich.

Falls nicht CSS, dann als SVG (skalierbare Vektorgrafik)
SelfSVG - SVG-Grafiken selbst erstellen
SVG Tutorial - SVG-Grafiken in Webdokumenten

HTH
 
Ok, ich hab mich durch die Links durchgearbeitet (und auch noch bei selfhtml vorbeigeschaut) und bin zu einer Lösung gekommen die mich derzeit zufriedenstellt.

Ich hab den Gradient im Photoshop nachgearbeitet und hab so den radial-gradient von weiß zu transparent mit einer ebenendeckkraft von ca. 25% nachgestellt und bin so zu einer vorder- und einer hintergrundfarbe gekommen.

Im HTML-Dokument sieht die Struktur jetzt so aus:
Code:
<div id="site">
<div id="spot"></div>
</div>

In der CSS hab ich die Positionierung so vorgenommen:
Code:
#site {
position: relative;
}

#spot {
position: absolute;
top: 102px;
left: 850px;
width: 400px;
height: 400px;
z-index: -1;
background: -webkit-radial-gradient(circle, rgba(0, 44, 71, .7), #000e1a 60%);
background: -o-radial-gradient(circle, rgba(0, 44, 71, .7), #000e1a 60%);
background: -moz-radial-gradient(circle, rgba(0, 44, 71, .7), #000e1a 60%);
background: radial-gradient(circle, rgba(0, 44, 71, .7), #000e1a 60%);
}

Im Attachment ist ein Screenshot.

Der CSS-Gradient ist (einigermaßend) passend zu den Overlay-Gradienten des Banners positioniert sodass es aussieht als würden zwei Spots auf die Seite von oben scheinen...

Ich denke, das sollte so funktionieren...
 

Anhänge

  • gradient.jpg
    gradient.jpg
    239,2 KB · Aufrufe: 355
Oben