CSS: Artikelgestaltung 2

Mittwoch 1. April 2020 von Torsten

Die Boxen wurden bereits mit runden Ecken, Schatten und Farbverläufen versehen. Jetzt ist der Text an der Reihe. In diesem Artikel wird also per CSS in der Version 3 die Textgestaltung vorgenommen…

Schatten für den Artikeltext:

Ein Text-Schatten wird mit folgendem Stylesheet realisiert…:

  • text-shadow: 5px 3px 0px #FF0000;

Die einzelnen Werte können natürlich an die persönlichen Wünsche und Vorstellungen angepasst werden. Dieses Beispiel erzeugt einen roten Schatten…

Overflow per CSS:

Einem HTML Element (etwa p) wird eine Klasse zugewiesen und diese wird dann gestaltet.

<p class=“test1″>This is some long text that will not fit in the box</p>

In der CSS-Datei kann jetzt der Overflow so gestaltet werden:

p.test1 {

white-space: nowrap;

width: 300px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}

Die zweite Variante von text-overflow neben “clip” ist “ellipsis”.

p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

Spaltensatz per CSS:

Spaltensatz mit CSS3 geht auch. Der Spaltenumbruch kann aber nicht selber festgelegt werden. Das Resultat auf der Webseite ist also mehr Zufall.

Die Spaltenfunktion braucht übrigens noch die Browser-Präfixe:

p.spalte {

column-count: 3;

column-gap: 40px;

column-rule: 3px outset red;

-moz-column-count: 3;

-moz-column-gap: 40px;

-moz-column-gap: 40px;

-moz-column-rule: 3px outset red;

}

Es braucht hier also die -moz-Präfixe. Für andere Webbrowser braucht es dann natürlich die entsprechenden anderen Präfixe. Für Chrome und Safari sind das die webkit-Präfixe…

Dieser Beitrag wurde erstellt am Mittwoch 1. April 2020 um 08:00 und abgelegt unter Allgemein. Kommentare zu diesen Eintrag im RSS 2.0 Feed. Sie können zum Ende springen und ein Kommentar hinterlassen. Pings sind im Augenblick nicht erlaubt.

Kommentar schreiben