CSS Grundlagen Tipps Bausteine Farben

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.

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 ✶✶✶✶
Ein kompletter Webauftritt lässt sich so, optisch mit wenigen Klicks und Einträgen verändern.
Textgestaltung mit CSS ✶✶✶
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 ✶✶✶✶
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 ✶✶✶
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.
Das Hintergrundbild richtig in Position setzen
Bilder mit Hover-Effekt ✶✶✶✶
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.
Bilder mit Hover-Effekt
Rahmen für Bilder und Text erstellen ✶✶✶
Fehlt ein Rahmen an einem Bild oder um einen Text? So schnell fügen Sie einen mit CSS hinzu.
Rahmen für Bilder und Text erstellen
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.
Bilder Zoom-Funktion mit CSS
Zebra-Tabelle mit CSS
Tabellen und andere HTML-Elemente zweifarbig darstellen.
Zebra-Tabelle mit CSS
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.
CSS Blend-Mode
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.
Radio-Buttons und Checkboxen per CSS gestalten
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.
3-D Tasteneffekte mit CSS
Mit etwas CSS-Code bekommt man hervorragende Tasteneffekte.

CSS-Bausteine (Alphabetische Sortierung)

A  B  C  D  E  F  H  K  L  M  N  P  S  T  U  V  W 
    A
  1. Abschnitt festsetzen
  2. Animierte Box mit Keyframes
  3. Aufzählungslisten einfärben
  4. B
  5. Bild vergrößern mit dem „Checkbox Hack”
  6. Blinkende Inhalte mit Keyframes
  7. C
  8. Container horizontal drehen
  9. Container vertikal drehen
  10. CSS-Variablen
  11. D
  12. DiscoLights - Box-Shadow Animation
  13. E
  14. Eingabefelder und Buttons formatieren
  15. F
  16. Fehleingaben in Formularen mit CSS hervorheben
  17. H
  18. Hintergrundbild absolut positionieren
  19. Hintergrundbild mit Zoom Funktion
  20. HTML-Elemente als Tabelle formatieren
  21. K
  22. Kalender Symbol neben dem Datepicker
  23. L
  24. Leuchtende blaue Eingabefelder
  25. Link farbig unterstreichen
  26. Link zum Seitenanfang setzen
  27. M
  28. Markieren von Text verhindern
  29. Markierte Checkbox farbig hervorheben
  30. Mit import mehrere CSS-Dateien zusammenfassen
  31. Mit ::selection markierten Text hervorheben
  32. Modal-Fenster mit HTML5 und CSS
  33. N
  34. Nur gefüllte Tabellenzellen hervorheben
  35. P
  36. Pflichtfeld hervorheben
  37. Position Sticky in einer HTML Tabelle
  38. S
  39. Sternebewertung
  40. T
  41. Tabellenzeilen einfärben
  42. Text mit gestreiftem Hintergrund
  43. Texteingabe nur in Großbuchstaben
  44. Tooltip per CSS anzeigen
  45. Transparenter Farbverlauf
  46. U
  47. Uhrzeitanzeige mal anders!
  48. V
  49. Vertikale Schrift
  50. W
  51. Wasserzeicheneffekt - Hintergrundbild fixieren
  52. Wertigkeiten verändern mit der !important-Regel
Sternebewertung

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

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 ✶✶✶✶ - Mit der CSS3 Eigenschaft Gradient mit seinen Ausrichtungen (linear, radial) 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 mit CSS

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.

Block-Schatten Generator / Text-Schatten Generator
Diese Schlagwörter könnten Sie interessieren:
Seitenformatierung PHP-Fehlermeldungen RSS Feed Wecker Mauszeiger Floodsperre JSON Sitemaps-Protokoll SQLite Dynamische Seiten Hover-Effekt Lokaler Webserver Datenschutz-Hinweis Sicherheit localStorage Berechnungen Zeichnen Webseitenschutz Kommentar-Box Audio-Player