css mit Adi Prinz

box-shadow

Die box-shadow-Eigenschaft beinhaltet zwei bis vier Längenangaben (keine Prozentwerte) für den horizontalen und vertikalen Abstand (offset), den optionalen Weichzeichner (blur), den optionalen Vergrößerungsfaktor (spread) und eine optionale Farbe (color). Wird keine Farbe angegeben, verwendet der Browser den Wert von currentColor.

Syntaxbeschreibung von box-shadow

• horizontal offset: Längenangabe für die horizontale Verschiebung (positive oder negative Werte)
• vertical offset: Längenangabe für die vertikale Verschiebung (positive oder negative Werte)
• blur: Längenangabe für Weichzeichner - Optional
• spread: Längenangabe für Schattengröße (positive oder negative Werte) - Optional
• color: Farbangabe - Optional
• inset: Schatteneffekt nach innen- Optional
• none: kein Schatten (Standardwert)

#element {
  padding: 20px;
  background-color: white;
  color: #222;
  margin: 50px auto 100px;
  height: 200px;
  width: 200px;
  border: 10px solid black;
  box-shadow: 1em 1em 1em purple;
}

Box Shadow Spread
W3Schools Play It

Mit box-shadow können auch mehrere Schatteneffekte erzeugt werden. Als Trennzeichen wird das Komma verwendet.

  box-shadow: 1em 1em 1em purple, inset 10px 10px;

opacity

Transparenz bei Farbangaben kann auch mit dem Alphakanal realisiert werden.

img {
  opacity: 0.6;
}
div {
  border: #060 thick solid;
  background-color: rgb(255 0 0 / 20%);
}

Mögliche Werte von filter

• none: kein Effekt (Standardwert)
• blur(): Längenangabe für Weichzeichner (Pixel)
• brightness(): Prozentangabe für Helligkeit
• contrast(): Prozentangabe für Kontrast
• drop-shadow(h-shadow v-shadow blur color): Schatteneffekt entlang der sichtbaren Form; ohne spread-Wert
• grayscale(): Prozentangabe für Graustufe
• hue-rotate(): Gradangabe (0-360deg) für Drehungseffekt
• invert(): Prozentangabe für Umkehrung
• opacity(): Prozentangabe für Transparenz
• saturate(): Prozentangabe für Sättigung
• sepia(): Prozentangabe für Konvertierung in Sepiafarben
• url(): für komplexere SVG-Filter

Filter-Beispiel als Graustufenbild

#myImg {
  filter: grayscale(100%);
}

Ich habe hier einen Link für Beispiele von filter.

w3schools.com

backdrop-filter

Mit backdrop-filter werden Effekte auf den Bereich hinter einem teilweise transparenten Element angewendet. Damit der Effekt sichtbar wird, benötigt das Element in der Regel einen transparenten oder halbtransparenten Hintergrund.

.glass {
  background-color: rgb(255 255 255 / 25%);
  backdrop-filter: blur(10px);
}

calc()

calc() führt Berechnungen aus und kann dabei unterschiedliche kompatible Einheiten verbinden. Um + und - müssen Leerzeichen stehen.

.main {
  width: calc(100% - 2rem);
}
    

min() und max()

min() verwendet den kleinsten und max() den größten der übergebenen berechneten Werte. Die Namen beschreiben also die Auswahl des Wertes, nicht automatisch eine Mindest- oder Höchstbreite.

.box {
  width: min(100%, 40rem);
  min-height: max(12rem, 30vh);
}
    

clamp()

clamp(Mindestwert, bevorzugter Wert, Höchstwert) begrenzt den bevorzugten Wert auf den angegebenen Bereich.

h1 {
  font-size: clamp(2rem, 1rem + 4vw, 5rem);
}

.box {
  width: clamp(200px, 50%, 500px);
}
    

Weitere Mathematikfunktionen

CSS unterstützt inzwischen weitere mathematische Funktionen. Dazu gehören unter anderem Rundungsfunktionen wie round(), mod() und rem() sowie trigonometrische, exponentielle und Quadratwurzelfunktionen. Für grundlegende responsive Layouts bleiben calc(), min(), max() und clamp() meist die wichtigsten Funktionen.