CSS Grundlagen Tipps Bausteine Farben Links
CSS - steht für Cascading Style Sheet
und ist eine unabhängige Formatierungssprache.
Der Standard CSS, bringt sehr viele Vorteile mit sich. Der HTML-Umfang wird
nicht mehr ausgebaut, sondern es lässt sich auch die Dateigröße der HTML-Dokumente drastisch verringern.
✔ Außerdem lässt sich das Erscheinungsbild einer oder mehrere Seiten, mit einer externen CSS-Datei, in Sekundenschnelle ändern. CSS ermöglicht es zudem Stylesheets für unterschiedliche Medien zu erstellen, wie etwa den Ausdruck der Seite oder die Darstellung in einem mobilen Endgerät.
![[Bildschirmfoto / Grafik]
CSS im Einsatz [Bildschirmfoto / Grafik]
CSS im Einsatz](img/erstellung_css.png)
✔ Mit CSS haben Sie ungeahnte Möglichkeiten, die normal nie zu realisieren wären. CSS bietet nicht nur vielerlei Gestaltungsmöglichkeiten, auch die Handhabung der Seiten wird verbessert. Änderungen und Variationen lassen sich einfacher durchführen.
➥ Um nun die CSS-Anweisungen richtig einsetzen zu können finden sich dazu zahlreiche Dokumentationen im Web. Das bekannte deutsche selfHTML , das englischsprachige w3schools.com und das Mozilla Developer Network.
• In der Linkliste finden Sie weitere Links zum Thema CSS.
Abonniere meinen RSS-Feed
um über aktuelle Seiten benachrichtigt zu werden.
Grundlagen
- Externe Seitenformatierung mit CSS Tutorial ✶✶✶✶
- Ein kompletter Webauftritt lässt sich so, optisch mit wenigen Klicks und Einträgen verändern.
- Textgestaltung mit CSS Tutorial ✶✶✶✶
- Mit CSS ist ein Text schnell formatiert. Eine Anleitung zur Textgestaltung mit CSS und mit vielen Beispielen dazu.

- Fehler im HTML- und CSS-Quelltext erkennen und validieren ✶✶✶✶
- Leider werden Fehler in HTML oder CSS oft nicht im Browser angezeigt. Die Browser überbügeln viele Fehler d.h. die Browser sind auf den Kompatibilitätsmodus „Quirks” eingestellt. Und dieser lässt fast jede Sünde des Webmasters durch.
- CSS Hyperlinks Tipp ✶✶✶✶
- Hier finden Sie viele Beispiele wie Sie Hyperlinks, mit Hilfe von CSS verändern können.

- Mauszeiger
- Auch der Mauszeiger kann verändert werden. Der Code kann auf alle Elemente, egal ob Tabellen, Links, Grafiken, Textblöcke oder eine ganze Seite angewendet werden.

- Umrechnungstabelle für CSS-Schriftgrößen
Tipps
Hier finden Sie nützliche und interessante CSS-Beispiele. Diese müssen eventuell den eigenen Wünschen angepasst werden, dazu sind allerdings Kenntnisse in CSS notwendig!
- CSS-Sprites einfach erstellen ✶✶✶✶
- CSS-Sprites werden dort benutzt, wo es um feste grafische Bestandteile geht. In der Navigation und bei sonstigen wiederkehrenden Seitenbestandteilen wie Logos, Linien, RSS-Icons und so weiter.
- Das Hintergrundbild richtig in Position setzen Tutorial ✶✶✶✶
- Oft möchte man das Hintergrundbild an eine bestimmte Position ausrichten oder eine Hintergrundfarbe / Farbverlauf hinzufügen, wie so etwas gemacht wird zeigt dieser Artikel.

- Seiten druckfrisch gestalten ✶✶✶✶
- Mancher Besucher einer Website möchte eine bestimmte Seite ausdrucken, auf dem Papier stören dann Elemente wie Werbung, Navigationsleisten, großflächige Design-Elemente oder andere Elemente. Wie Sie diese vor dem drucken "wegzaubern" erfahren Sie hier.

- Responsives Design ✶✶✶✶
- Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.
- Bilder mit Hover-Effekt Tipp ✶✶✶✶
- Mit CSS können Sie einem transparenten Bild (GIF oder PNG-Format) eine andere Hintergrundfarbe geben. Fährt man mit dem Mauszeiger über das Bild, so ändert sich die Hintergrundfarbe zum Beispiel: von Schwarz in Gelb.

- Rahmen für Bilder und Text erstellen Tutorial ✶✶✶✶
- Die CSS-
border
Eigenschaft legt den kompletten Rahmen eines Elementes fest.
Fehlt ein Rahmen an einem Bild oder um einen Text? So schnell und einfach fügen Sie einen hinzu.

- Bilder Zoom-Funktion mit CSS ✶✶✶✶
- Es muss nicht immer JavaScript sein wenn man Bilder mit einer Zoom-Funktion ausstatten möchte, CSS bietet diese Möglichkeit auch.

- Zebra-Tabelle mit CSS
- Tabellen und andere HTML-Elemente zweifarbig darstellen.

- CSS-Counter: Nummerierungen für HTML-Elemente ✶✶✶✶
- Mit dem CSS-Counter lassen sich beliebige HTML-Elemente nummerieren.
- CSS Blend-Mode ✶✶✶✶
- Ist ein Mischmodus um zwei Ebenen (Hintergrundbild und Hintergrundfarbe) anhand von Farbformeln visuell miteinander zu verschmelzen.

- Radio-Buttons und Checkboxen per CSS gestalten ✶✶✶✶
- Radiobuttons und Checkboxen beliebig gestalten. Damit eröffnen sich neue Möglichkeiten für die Gestaltung, ohne dass dazu Tricks notwendig wären.

- Blinkender Hintergrund ✶✶✶✶
- Möchte man auf seiner Website, auf etwas aufmerksam machen, so kann dieser blinkende Text-Hintergrund eingesetzt werden.
- Silbentrennung in Webseiten ✶✶✶✶
- Die automatische Silbentrennung in CSS3 macht es möglich, ein paar kleine Zusätze eingetragen und schon werden die Silben automatisch getrennt.


CSS-Bausteine (Alphabetische Sortierung) Alle Anzeigen
-
A
- Abschnitt festsetzen
- Animationen mit Keyframes
- Animierte Box mit Keyframes
- Aufzählungslisten einfärben B
- Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)
- Bild mit Impuls
- Bild vergrößern mit dem „Checkbox Hack”
- Bilder in einem Formular auswählen
- Blinkende Inhalte mit Keyframes
- Button Glas-Effekte C
- Container horizontal drehen
- Container mit
Eselsohren
- Container vertikal drehen
- CSS-Variablen D
- Datum als Kalenderblatt darstellen
- Diagonaler Streifen-Effekt Neu
- DiscoLights - Box-Shadow Animation E
- Eingabefelder und Buttons formatieren
- Elemente ab einer bestimmten Fensterbreite ausblenden
- Externe URL des Hyperlinks sichtbar machen F
- Farbige Scrollleiste
- Fehleingaben in Formularen mit CSS hervorheben G
- Glühende Neon Buchstaben Neu H
- Hintergrundbild absolut positionieren
- Hintergrundbild mit Zoom Funktion
- HTML-Elemente als Tabelle formatieren K
- Kalender Symbol neben dem Datepicker
- Kompass-Animation Neu L
- Ladeanimation ohne Bild-Grafik Neu
- Leuchtende blaue Eingabefelder
- Lightbox
- Link farbig unterstreichen
- Link zum Seitenanfang setzen M
- Markieren von Text verhindern
- Markierte Checkbox farbig hervorheben
- Mit import mehrere CSS-Dateien zusammenfassen
- Mit ::selection markierten Text hervorheben
- Modal-Fenster mit HTML5 und CSS N
- Navigation mit :target auf und zumachen
- Nur gefüllte Tabellenzellen hervorheben P
- Parallax Scrolling-Effekt
- Pflichtfeld hervorheben
- Pop-up-Bucheffekt Neu
- Position Sticky in einer HTML Tabelle R
- Regenbogen Text S
- Sternebewertung T
- Tabellenzeilen bei :hover hervorheben
- Tabellenzeilen einfärben
- Tastenkombinationen darstellen
- Text mit gestreiftem Hintergrund
- Texteingabe nur in Großbuchstaben
- Tooltip per CSS anzeigen
- Transparenter Farbverlauf U
- Uhrzeitanzeige mal anders! V
- Vertikale Schrift
- Vertikaler Text mit horizontalen Buchstaben
- Verwendung von Datenattributen (data-*) W
- Wasserzeicheneffekt - Hintergrundbild fixieren
- Wertigkeiten verändern mit der !important-Regel



Farben
Farblehre - Gestalten mit Farbe ✶✶✶✶ - Dieser kleine Exkurs in die allgemeine Farblehre erscheint sinnvoll, da zu einer gut gestalteten Webseite nicht nur die Beherrschung von HTML-Tags gehört, sondern auch die Kenntnis einiger Gestaltungsmittel, um eine beabsichtigte Wirkung bewusst zu erzielen.

Farben und ihre Wirkung - Farben wecken unterschiedliche Assoziationen.
Haupt- und Grundfarben - Die 3 Hauptfarben, Browser Standard-Farben und die 16 Grundfarben.
Farbnamen, Hexadezimal, Dezimal, Prozent und Negativ ✶✶✶✶
Farbfamilie,
Erweiterte Farbnamen,
Farben sortiert
Beispiele für Farbkombinationen - Unleserliche Farbkombinationen, Farbkombinationen mit schwarzer Textfarbe und Farbkombinationen mit weißer Textfarbe.
Helle Farben, Weiche Farben, Weiche Farben und Regenbogen Farben
Farbkennwörter - Diese Farben zeigen Ihre PC-Farbeinstellung an.
- Farbverlauf mit CSS Tipp
- Mit der CSS3 Eigenschaft Gradient mit seinen Ausrichtungen (linear, radial, conic) gibt es endlich die Möglichkeit, Farbverläufe bei der Umsetzung nicht mehr nur mittels Grafiken in die CSS-Dateien einbinden zu müssen.

- Farbverlauf Generator
- Für das Design einer Webseite ist die Farbwahl ausschlaggebend. Abhängig vom Thema der Homepage oder vom Logo verwenden Sie Farben am besten in Farbabstufungen. Dieser Generator erstellt einen Farbverlauf mit den von Ihnen eingegebenen Farbwerten.

Block-Schatten Generator /
Text-Schatten Generator
Einfaches erstellen von CSS-Schatten.
Schatten sind eine gute Möglichkeit einzelne Elemente aus dem Fluss der Website speziell hervorzuheben oder um
einfach einen dreidimensionalen Effekt zu erhalten.

- Backdrop-Filter
- Mit der CSS-Eigenschaft für Hintergrundfilter (Backdrop-Filter) können Sie grafische Effekte wie Unschärfe oder Farbverschiebung auf den Bereich hinter einem Element anwenden.

Links zum Thema CSS
- cssgradient.io
- SS Gradient — Generator, Maker, and Background
- mediaevent.de
- CSS, HTML und Javascript mit {stil}
- bjoernsworld.de
- CSS-Tutorial.
- css3.info
- CSS3. Info - alles, was Sie jemals über CSS3 wissen müssen. (englisch)
- thestyleworks.de
- Demos mit CSS.
- cleancss.com
- CSS Formatierer und Optimierer (englisch).
- css-wiki.com
- Dokumentation der CSS - Eigenschaften.
- css-tricks.com
- CSS-Tricks - Blog
» Alle Links mit Bewertungen anzeigen
Zeitansage Formulare Wasserzeichen Kalenderwoche Quelltext Zeitbalken Canvas MySQL Sprachumschaltung AES Bausteine Berechnungen Tooltip ASCII CSS-Counter Zeitfunktionen Seitenformatierung Formular befüllen Mehrfachauswahl Mausrad Authentifizierung Dateibrowser Lokaler Webserver Kommentar-Box Audio-Player