Balken einfügen

JessicaOnline

Hallo,

eine kleine Frage, wie würdet ihr diese Grafik mit CSS umsetzten oder viel HTML zu nutzen?

[Blockierte Grafik: http://www.bilder-upload.eu/upload/00b9d5-1472900184.png]

HTML

<div class="description">
 <ul>
  <li>Aufzählung 1</li>
  <li>Aufzählung 2</li>
  <li>Aufzählung 3</li>
 </ul>
</div>

Soweit so gut. Jetzt ist die Frage soll ich für den Balken rechts ein weiteres DIV / Span einfügen oder kann ich dieses irgendwie anderes lösen?

MrMurphy

Hallo

Solche Hintergründe können nur mit CSS als Hintergrundgrafik mit linear-radient eingefügt werden. In deinem Beispiel zum Beispiel mittels

Code

ul {
         background-image: linear-gradient(
            90deg, 
            hsla(198, 83%, 63%, 1), 
            hsla(198, 83%, 63%, 1) 80%, 
            hsla(197, 82%, 87%, 1) 80%,
            hsla(197, 82%, 87%, 1) 93.5%,
            hsla(198, 83%, 63%, 1) 93.5%, 
            hsla(198, 83%, 63%, 1) 
            );
      }

Alles anzeigen

Natürlich müssen auch andere CSS-Angaben angepasst werden. Ich habe mal eine Beispieldatei online gestellt:

Hintergrundgrafik mit linear-gradient

Informationen findest du zum Beispiel unter

http://www.mediaevent.de/css/gradient.html

und einige Beispiele für die Möglichkeiten unter

http://lea.verou.me/css3patterns/

Gruss

MrMurphy

JessicaOnline

Hallo MrMurphy,

wow, vielen vielen Dank für deine Hilfe. Sieht genau so aus wie auf meiner Vorlage.

EDIT: Noch eine Frage, warum verwendet du hsla und kein RGB oder RGBA?

MrMurphy

Hallo

Ich habe noch zwei Links zur Info eingefügt.

Zitat

warum verwendet du hsla und kein RGB oder RGBA

Das ist etwas Geschmackssache. hsla ist am aktuellesten und wird langfristig wohl die Führungsrolle übernehmen. Als Nachteil wird es aber noch von manchen alten Browsern und Formaten nicht unterstützt. Ich bevorzuge grundsätzlich Farben mit Alpha-Kanal (also entweder hsla oder rgba) oder für die schnelle schlicht direkte Farbnamen.

Gruss

MrMurphy

JessicaOnline

Hallo,

hab eine Seite gefunden: http://www.rapidtables.com/convert/color/rgb-to-hsl.htm wo ich die RGB Werte in HSL Werte umwandeln kann. Leider kann dieses Sublume Text nicht automatisch bzw. per Autovervollständigung, daher der etwas umständlicher Weg über die WebSeite.

Also von dieser Seite http://lea.verou.me/css3patterns/ bin ich sehr begeistert. Vielen Dank für den Link. Wahnsinn was man alles nur mit CSS machen kann.

Jetzt mitmachen!