CSS 1 2 Grundlagen Tipps Bausteine 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 (Smartphone, Tablet).

[Bildschirmfoto] CSS im Einsatz

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.
Externe Seitenformatierung mit CSS
Textgestaltung mit CSS Tutorial ✶✶✶
Mit CSS ist ein Text schnell formatiert. Eine Anleitung zur Textgestaltung mit CSS und mit vielen Beispielen dazu.
Textgestaltung mit CSS
CSS Hyperlinks Tipp ✶✶✶
Hier finden Sie viele Beispiele wie Sie Hyperlinks, mit Hilfe von CSS verändern können.
CSS Hyperlinks
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.
Mauszeiger
Umrechnungstabelle für CSS-Schriftgrößen
Quelltext mit Format
Es gibt gute Gründe einen Quelltext zu formatieren und zu kommentieren.
Quelltext mit Format

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 Scroll Snap - Bilder am Layout einrasten Neu ✶✶✶
Mit Hilfe der Scroll Snap-Technik von CSS kann man steuern, dass der Browser an bestimmten Stellen im Layout einrastet, wenn über diese Punkte hinweg gescrollt werden soll.
CSS Scroll Snap - Bilder am Layout einrasten
Tag und Nachtmodus für Webseiten Tutorial ✶✶✶
Wechseln Sie mit CSS und JavaScript zwischen einem dunklen und einem hellen Modus.
Tag und Nachtmodus für Webseiten
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.
CSS-Sprites einfach erstellen
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.
Das Hintergrundbild richtig in Position setzen
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.
Seiten druckfrisch gestalten
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.
Bilder mit Hover-Effekt
Animierte Box mit Keyframes
Ein Hintergrundbild mit CSS und Keyframes animieren.
Animierte Box mit Keyframes
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.
Rahmen für Bilder und Text erstellen
Animierte Sternebewertung für Formulare Tipp ✶✶✶✶
Diese Bewertung kommt ganz ohne JavaScript aus und funktioniert nur mit HTML und CSS. Die Sterne leuchten und drehen sich und werden von allen modernen Browsern dargestellt.
Animierte Sternebewertung für Formulare
Ladeanimation ✶✶✶✶
Eine Ladeanimation ohne Bild-Grafik. Die Farbe, Größe, Geschwindigkeit und die Laufrichtung sind anpassbar.
Ladeanimation

CSS-Bausteine  Alle Anzeigen

A  B  C  D  E  F  G  H  I  K  L  M  N  P  R  S  T  U  V  W 

A

  1. Abschnitt festsetzen
  2. Animationen mit Keyframes
  3. Animierte Box mit Keyframes
  4. Animierte Unterstreichung
  5. Aufzählungslisten einfärben

B

  1. Beschriftungen und Formularfelder gleichmäßig untereinander setzen
  2. Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)
  3. Bild mit Impuls
  4. Bild vergrößern mit dem „Checkbox Hack”
  5. Bilder-Farbrotation mit Gradient
  6. Bilder in einem Formular auswählen
  7. Blinkende Inhalte mit Keyframes
  8. Button Glas-Effekte

C

  1. Checkboxen und Radiobuttons farblich anpassen
  2. Container horizontal drehen
  3. Container mit Eselsohren
  4. Container vertikal drehen
  5. CSS-Variablen

D

  1. Datum als Kalenderblatt darstellen
  2. Diagonaler Streifen-Effekt
  3. Diashow mit Keyframes
  4. Die Schriftgröße je nach Fensterbreite automatisch anpassen
  5. DiscoLights - Box-Shadow Animation
  6. Display-Flex mit Tabellen
  7. Drehende E-Mail - Problem gelöst! Neu

E

  1. Eingabefelder und Buttons formatieren
  2. Elemente ab einer bestimmten Fensterbreite ausblenden
  3. Externe URL des Hyperlinks sichtbar machen

F

  1. Farbige Scrollleiste
  2. Fehleingaben in Formularen farbig hervorheben
  3. Fehleingaben in Formularen mit CSS hervorheben

G

  1. Glühende Neon Buchstaben

H

  1. Hintergrundbild absolut positionieren
  2. Hintergrundbild mit Zoom Funktion
  3. HTML-Elemente als Tabelle formatieren

I

  1. Internes Sprungziel hervorheben Neu

K

  1. Kalender Symbol neben dem Datepicker
  2. Kompass-Animation
  3. Krieg der Sterne

L

  1. Ladeanimation ohne Bild-Grafik
  2. Leuchtende blaue Eingabefelder
  3. Lightbox
  4. Link farbig unterstreichen
  5. Listenelemente einfärben

M

  1. Markieren von Text verhindern
  2. Markierte Checkbox farbig hervorheben
  3. Mit import mehrere CSS-Dateien zusammenfassen
  4. Mit ::selection markierten Text hervorheben
  5. Modal-Fenster mit HTML5 und CSS

N

  1. Nahtlose unendliche Hintergrundbild-Scroll-Animation Neu
  2. Navigation mit :target auf und zumachen
  3. Notizzettel mit Büroklammer
  4. Nur gefüllte Tabellenzellen hervorheben

P

  1. Parallax Scrolling-Effekt
  2. Pflichtfeld hervorheben
  3. Pink-Cube-Animation Neu
  4. Pop-up-Bucheffekt
  5. Position Sticky in einer HTML Tabelle

R

  1. Regenbogen Text

S

  1. Sprechblasen erstellen
  2. Statusmeldung nach 5 Sekunden ausblenden
  3. Sternebewertung

T

  1. Tabellenzeilen bei :hover hervorheben
  2. Tabellenzeilen einfärben
  3. Tastenkombinationen darstellen
  4. Text mit gestreiftem Hintergrund
  5. Textbereich als veränderbare Bildanzeige verwenden
  6. Texteingabe nur in Großbuchstaben
  7. Tooltip per CSS anzeigen
  8. Transparenter Farbverlauf

U

  1. Uhrzeitanzeige mal anders!

V

  1. Verschieben von Hintergründen Neu
  2. Vertikale Schrift
  3. Vertikaler Text mit horizontalen Buchstaben
  4. Verwendung von Datenattributen (data-*)

W

  1. Wasserzeicheneffekt - Hintergrundbild fixieren
  2. Wertigkeiten verändern mit der !important-Regel

Container horizontal drehen
developer.mozilla.org ✶✶✶✶✶
Cascading Style Sheets, meistens als CSS abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in HTML oder XML formatierten Datei (inklusive verschiedener XML-Sprachen wie SVG oder XHTML) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.
css-tricks.com ✶✶✶✶
CSS-Tricks - Blog
mediaevent.de ✶✶✶✶✶
CSS, HTML und JavaScript
bjoernsworld.de ✶✶✶✶
CSS-Tutorial.
css3.info ✶✶✶✶
CSS3. Info - alles, was Sie jemals über CSS3 wissen müssen. (englisch)
thestyleworks.de
Demos mit CSS.
css-wiki.com
Dokumentation der CSS - Eigenschaften.

Alle Links mit Bewertungen anzeigen

CSS - Seite: 1 2