CSS-Design: Code-Beispiele, Tipps & Tricks

CSS - Cascading Style Sheets

CSS (Cascading Style Sheets) ist eine Sprache zur Gestaltung und Strukturierung der Inhalte von Websites und wird meist in Kombination mit HTML eingesetzt.

Mit CSS kannst du nicht nur einfache Texte und Inhalte deines Webprojekts darstellen und formatieren, sondern auch interaktive Elemente wie zum Beispiel eine Navigationen aufbauen. CSS wird von allen bekannten Browsern unterstützt, aber meist mit Einschränken bei der Darstellung. Daher empfehle ich dir, mit CSS gestaltete Projekte mit den gängigen Browsern in unterschiedlichen Versionen zu testen.

CSS: Code-Beispiele, Tipps & Tricks

Folgende Links sollten dir als Webentwickler den Alltag etwas erleichtern: loremipsum.de, placehold.it, REM-Calculator, CSS Sprite Generator, CSS Menü Maker, csscompressor.com. Ich habe dir hier mal einige CSS-Beispiele zusammengestellt. Damit du diese auch gleich in deinem Projekt umsetzen kannst, habe ich den Code bei „codepen“ abgelegt – somit hast du gleich eine Vorschau parat. Diese Seite werde ich nach und nach mit weiteren Code-Beispielen ergänzen.

CSS: Farbiger Button ohne Grafik

.button {
  display: inline-block;
  margin: 10px 10px 10px 0;
  padding: 15px 30px;
  overflow: hidden;
  cursor: pointer;
  font-size: 16px;
  font-size: 1rem;
  color: #fff;
  text-align: center;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  text-decoration: none;
}

.button:hover {
  color: #fff;
}

.blue-button {
  background: #459CE5;
}

.blue-button:hover {
  background: #008BC0;
}

See the Pen CSS: Farbige Buttons ohne Grafiken by Rolf Bartel (@uzn) on CodePen.0

CSS: Hintergrundbild an Bildschirmgröße anpassen

html { 
  background: url(//placehold.it/1900x1900/3485E2/ffffff?text=Hallo) no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

See the Pen CSS: Hintergrundbild an Bildschirmgröße anpassen by Rolf Bartel (@uzn) on CodePen.0

CSS: Schatten am oberen Rand der Website

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    z-index: 100;
    -webkit-box-shadow: 0px 0px 30px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 30px rgba(0,0,0,.8);
    box-shadow: 0px 0px 30px rgba(0,0,0,.8);
}

See the Pen CSS: Schatten am oberen Rand der Website by Rolf Bartel (@uzn) on CodePen.0

Bild oder DIV mit Schatten

.shadow {
    box-shadow: 3px 4px 5px 1px #000;
    -moz-box-shadow: 3px 4px 5px 1px #000;
    -webkit-box-shadow: 3px 4px 5px 1px #000;
}

.one-side-shadow {
    box-shadow: 0 10px 6px -6px #000;
    -webkit-box-shadow: 0 10px 6px -6px #000;
    -moz-box-shadow: 0 10px 6px -6px #000;
}

.inner-shadow {
    height: 200px;
    width: 200px;
    line-height: 200px;
    background: #3485E2;
    text-align: center;
    color: #fff;
    box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    -webkit-box-shadow: inset 0 0 10px #000;
}

See the Pen CSS: Bild und DIV mit Schatten by Rolf Bartel (@uzn) on CodePen.0

CSS: Mehrere Schatten unterschiedlicher Farbe

p {
    text-shadow: 1px 1px 1px red, 3px 3px 5px orange;
}

See the Pen CSS: Mehrere Schatten unterschiedlicher Farbe by Rolf Bartel (@uzn) on CodePen.0

Die ersten beiden Werte geben die Länge des Schattenversatzes an. Der erste Wert gibt den horizontalen Abstand an und der zweite gibt den vertikalen Abstand des Schattens an. Der dritte Wert gibt den Unschärferadius an und der letzte Wert beschreibt die Farbe des Schattens:

1. Wert = die X-Koordinate
2. Wert = die Y-Koordinate
3. Wert = der Unschärfe-Radius
4. Wert = die Farbe des Schattens

CSS: Bild oder Text horizontal spiegeln

Du kannst Bilder und natürlich auch Text mit CSS horizontan spiegeln. So kannst du nur mit nur einer Grafik, evtl. einem Pfeil, in zwei verschiedene Richtungen zeigen.

img {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: "FlipH";
    filter: FlipH;
}

.flip-text {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: "FlipH";
    filter: FlipH;
    text-align: right;
}

See the Pen CSS: Bild oder Text horizontal spiegeln by Rolf Bartel (@uzn) on CodePen.0

CSS: runde Bilder erstellen oder Ecken abrunden

.rund {
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px
}

.runde-ecken {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px
}

See the Pen CSS: runde Bilder erstellen by Rolf Bartel (@uzn) on CodePen.0

CSS: Parallax-Effekt

.parallax {
    min-height: 300px;
    background-image: url("//placehold.it/1900x300/3485E2/ffffff?text=Parallax-Effekt");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.text {
    height: 600px;
    padding: 20px;
    font-size: 160%;
    background-color: #E86381;
}

See the Pen CSS: Parallax-Effekt by Rolf Bartel (@uzn) on CodePen.0

CSS: Text mit Farbverlauf

html {
    background: #000;
}

p {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
    font-family: Sansita;
    font-size: 2em;
    font-weight: 700;
}

p:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: linear-gradient(45deg, blue, yellow);
    mix-blend-mode: multiply;
}

See the Pen CSS: Text mit Farbverlauf by Rolf Bartel (@uzn) on CodePen.0

CSS: Smart Quotes

q {
    quotes: "“" "”";
}

q:lang(de) {
    quotes: "„" "“";
}

See the Pen CSS: Smart Quotes by Rolf Bartel (@uzn) on CodePen.0