Kategorien-Archive: CSS

CSS für Anfänger: Textmarker für Fliesstext

Abschnitte wie mit einem Textmarker markieren

CSS für Anfänger: Textmarker für Fliesstext

Ich möchte Ihnen heute in meiner Reihe „CSS für Anfänger“ zeigen, wie Sie einen (langen) Fliesstext durch Effekte, die wie Markierungen eines Textmarkers aussehen, optisch aufpeppen bzw. auflockern können.

Diese Texteffekte lassen sich sehr einfach mit HTML und ein wenig CSS realisieren. Sie müssen dazu nur in der HTML-Datei den gewünschten Textbereich mit dem <span>-Tag einschließen und in der CSS-Datei für den <span>-Tag einen Innenabstand (padding) festlegen und eine Hintergrundfarbe (background-color) angeben.

Das HTML-Element <span> ist ein neutrales Element, welches dem Dokument eigentlich nichts hinzufügt. Aber zusammen mit CSS, kann es dazu benutzt werden, um visuelle Besonderheiten an bestimmten Textstellen im Dokument einzufügen! Weiterlesen

CSS für Anfänger: Listen mit grafischen Aufzählungszeichen

CSS-Tricks: Listen mit grafischen Aufzählungszeichen

Little Boxes - Webseiten gestalten mit HTML und CSS

Auf der Webseite von Little Boxes – Webseiten gestalten mit HTML und CSS habe ich ein interessantes Beispiel gefunden, wie Sie mit grafischen Aufzählungszeichen ganz einfach eine ungeordnete Liste (<ul>) optisch aufwerten können.

Das Listen-Beispiel finden Sie in den Übungsdateien von Little Boxes Teil 02. Diese können unter Beispieldateien zu Little Boxes Teil 2 heruntergeladen werden (4,3Mb ZIP-Datei; ca. 100 Beispiele!).

Ich habe die Vorlage als Grundlage für meine Bearbeitung genommen. Dabei wurden von mir sowohl die CSS-Dateien als auch der HTML-Quellcode an meine Variante angepasst. Weiterlesen

7 kostenlose 3-spaltige CSS-Layouts von CSSplay

7 Free CSS 3-Column-Layouts – CSS Layouts von CSSplay

7 kostenlose 3-spaltige CSS-Layouts von CSSplay

Der ‚CSS-Guru‘ Stu Nicholls von CSSplay stellt in seinem Artikel ‚Three Columns – Seven choices‘ 7 der am häufigsten nachgefragten 3-spaltigen CSS-Layouts vor.

Die 7 CSS-Layouts beinhalten keine Grafiken, sondern werden alleine durch den Einsatz von Hintergrund-Farbe (background-color) formatiert.
Die 3 Spalten behalten in allen 7 CSS-Vorlagen immer die gleiche Höhe, ganz egal, wieviel Text/Content auch immer eingefügt wird.

Die vorgestellten Beispiele wurden in folgenden Browsern erfolgreich getestet: IE8, IE9, und in den aktuellen Versionen von Firefox, Opera, Safari und Google Chrome.

Hier gehts zur Webseite: CSSplay
Hier gehts zum Artikel: „3 Spalten – 7 Varianten“

Weiterlesen

EmChartConverter: Pixel in EM umrechnen

Mit Online-Tool von EmChartConverter Pixel in EM umwandeln

EmChartConverter: Pixel in EM umrechnen

Festlegung von Schriftgrößen in CSS

Wenn Sie sich näher mit CSS beschäftigen, werden Sie früher oder später auf das Problem der Festlegung von Schriftgrößen stoßen. Dabei gibt es 3 verschiedene Arten, die Größe einer Schrift einzustellen:

Pixel, EM oder Prozent? Welche Einheit ist am besten geeignet?

Weiterlesen