Filter in CSS bieten eine einfache Möglichkeit, visuelle Effekte auf Bilder und andere Elemente anzuwenden, ohne dass dafür Bildbearbeitungssoftware notwendig ist. Diese Effekte werden direkt im CSS definiert und können dynamisch verändert werden. Filter und Bildmanipulationen verbessern das Design und die Benutzerinteraktion und eignen sich besonders für responsive Webseiten, da sie den Stil an verschiedene Bildschirmgrößen anpassen.
CSS-Filter werden mit der filter-Eigenschaft angewendet.
Diese Eigenschaft kann eine oder mehrere Filterfunktionen enthalten, die
nacheinander auf das Element angewendet werden. Filter sind besonders
für Bilder, Videos, und Text geeignet.
img {
filter: grayscale(100%);
}In diesem Beispiel wird das Bild vollständig in Graustufen angezeigt.
blur()Der blur()-Filter fügt dem Element einen Unschärfeeffekt
hinzu. Der Radius in Pixeln (px) bestimmt, wie stark die
Unschärfe ist.
img {
filter: blur(5px);
}Hier wird eine Unschärfe von 5px angewendet.
brightness()Der brightness()-Filter passt die Helligkeit eines
Elements an. Werte über 100% (z. B. brightness(150%))
erhöhen die Helligkeit, Werte unter 100% verringern sie.
img {
filter: brightness(80%);
}In diesem Beispiel wird die Helligkeit des Bildes um 20% reduziert.
contrast()Der contrast()-Filter verändert den Kontrast des
Elements. Ein Wert von 100% entspricht dem Originalkontrast. Höhere
Werte verstärken den Kontrast, während niedrigere Werte ihn
reduzieren.
img {
filter: contrast(120%);
}Das Bild wird mit einem um 20% erhöhten Kontrast angezeigt.
grayscale()Der grayscale()-Filter konvertiert das Element in
Graustufen. Ein Wert von 100% erzeugt ein vollständig graues Bild,
während 0% das Originalbild beibehält.
img {
filter: grayscale(100%);
}Hier wird das Bild in Graustufen umgewandelt.
hue-rotate()Der hue-rotate()-Filter dreht die Farbtöne des Bildes um
den angegebenen Winkel in Grad. Dies erzeugt interessante
Farbeffekte.
img {
filter: hue-rotate(90deg);
}Dieser Filter dreht die Farben des Bildes um 90 Grad und verändert so die Farbpalette.
invert()Der invert()-Filter kehrt die Farben des Elements um.
Ein Wert von 100% invertiert die Farben vollständig, was einem negativen
Effekt entspricht.
img {
filter: invert(100%);
}Das Bild wird hier in Negativfarben dargestellt.
opacity()Der opacity()-Filter passt die Deckkraft des Elements
an. Ein Wert von 100% bedeutet volle Sichtbarkeit, während 0% das
Element vollständig transparent macht.
img {
filter: opacity(50%);
}In diesem Beispiel wird die Deckkraft des Bildes auf 50% reduziert.
saturate()Der saturate()-Filter erhöht oder verringert die
Farbsättigung des Elements. Werte über 100% verstärken die Sättigung,
Werte darunter verringern sie.
img {
filter: saturate(200%);
}Das Bild wird hier doppelt so gesättigt angezeigt.
sepia()Der sepia()-Filter fügt einen Sepiaeffekt hinzu, der das
Bild in warmen Brauntönen erscheinen lässt und so einen Vintage-Look
erzeugt.
img {
filter: sepia(80%);
}Das Bild erhält hier einen Sepia-Ton von 80%.
Filter können kombiniert werden, um komplexe Effekte zu erzeugen. Die Filter werden in der Reihenfolge angewendet, in der sie definiert sind.
img {
filter: grayscale(50%) contrast(120%) brightness(90%);
}In diesem Beispiel wird das Bild zunächst in Graustufen umgewandelt, dann der Kontrast erhöht und schließlich die Helligkeit um 10% reduziert.
Filter sind besonders nützlich, um Bilder an unterschiedliche Bildschirmgrößen anzupassen. Mithilfe von Medienabfragen können die Filter dynamisch geändert werden.
img {
filter: brightness(100%);
}
@media (max-width: 768px) {
img {
filter: brightness(80%) contrast(110%);
}
}In diesem Beispiel wird das Bild auf Bildschirmen unter 768px Breite mit einer geringeren Helligkeit und erhöhtem Kontrast angezeigt.
Filter lassen sich ideal mit CSS-Transitionen kombinieren, um interaktive Effekte zu erstellen, z. B. bei Hover-Effekten auf Bildern oder Buttons.
img {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
img:hover {
filter: grayscale(0%);
}Hier wird das Bild zunächst in Graustufen angezeigt und kehrt beim Hover in seine Originalfarben zurück.
Clip-Path und Masken in CSS bieten Werkzeuge, um Bereiche von Elementen visuell auszublenden oder zu formen. Sie ermöglichen kreative Effekte, indem Teile eines Elements ausgeschnitten oder überlagert werden, um einzigartige Formen und Übergänge zu gestalten. Diese Techniken sind besonders nützlich für das Webdesign und interaktive Animationen.
Die clip-path-Eigenschaft erstellt eine sichtbare
Aussparung in einem Element, indem sie eine Form oder ein Pfad
verwendet, um nur einen bestimmten Teil des Elements anzuzeigen. Der
Rest des Elements wird ausgeblendet.
CSS bietet einige vordefinierte Formen, die mit
clip-path verwendet werden können:
Polygon: Ermöglicht das Erstellen von benutzerdefinierten, mehrseitigen Formen.
.element {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}In diesem Beispiel wird das Element als Dreieck angezeigt, indem
Punkte im Format x y definiert werden (jeweils relativ zum
Container).
Circle: Erzeugt eine kreisförmige Aussparung.
.element {
clip-path: circle(50% at 50% 50%);
}Hier wird ein Kreis mit einem Radius von 50% und dem Mittelpunkt in der Mitte des Elements geclipt.
Ellipse: Erstellt eine elliptische Form.
.element {
clip-path: ellipse(50% 30% at 50% 50%);
}In diesem Fall wird eine Ellipse geclipt, mit einer horizontalen Achse von 50% und einer vertikalen von 30%, zentriert im Element.
Inset: Definiert ein rechteckiges Clip-Pfad und
ähnelt der padding-Eigenschaft.
.element {
clip-path: inset(10% 20% 10% 20%);
}Hier wird ein rechteckiger Bereich geclipt, wobei 10% am oberen und unteren Rand und 20% an den Seiten abgeschnitten wird.
Für komplexere Formen kann clip-path auch mit SVG-Pfaden
arbeiten, was detaillierte und individuelle Designs ermöglicht.
.element {
clip-path: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}In diesem Beispiel wird ein SVG-Pfad verwendet, um eine benutzerdefinierte Form zu erstellen, die das Element maskiert.
CSS-Masken (Masks) ähneln Clip-Path, sind jedoch vielseitiger, da sie sowohl Transparenz als auch Deckkraft nutzen können. Mit Masken lassen sich Bereiche eines Elements basierend auf Helligkeits- oder Alphawerten eines Bildes ausblenden oder anzeigen.
Masken werden mit der mask-image-Eigenschaft definiert,
die ein Bild oder einen Gradienten als Maske verwendet. Der maskierte
Bereich zeigt nur die Teile des Elements, die von der Maske freigegeben
werden.
.element {
mask-image: url('mask.png');
mask-size: cover;
}In diesem Beispiel wird ein Bild (mask.png) als Maske
verwendet. Helle Bereiche der Maske sind sichtbar, dunkle Bereiche
werden ausgeblendet.
Masken lassen sich auch mit CSS-Gradienten erstellen, wodurch sie dynamisch und anpassbar werden.
.element {
mask-image: linear-gradient(to right, transparent, black);
}Hier wird ein Verlauf von transparent zu schwarz angewendet, der das Element schrittweise einblendet.
Zusätzliche Masken-Eigenschaften bieten detaillierte Kontrolle über das Verhalten der Maske:
cover, contain, feste Größen)..element {
mask-image: radial-gradient(circle, black, transparent);
mask-size: 50% 50%;
mask-position: center;
}In diesem Beispiel wird eine radiale Maske auf das Element angewendet und in der Mitte positioniert.
Clip-Path und Masken lassen sich auch kombinieren, um mehrschichtige und beeindruckende Effekte zu erzielen. Beispielsweise kann Clip-Path verwendet werden, um die Form zu bestimmen, und Masken, um Bereiche zu schattieren oder Verläufe hinzuzufügen.
.element {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
mask-image: linear-gradient(to bottom, black, transparent);
}In diesem Beispiel wird das Element in eine Dreiecksform mit Clip-Path zugeschnitten und zusätzlich mit einem Verlauf maskiert, der eine Transparenz zum unteren Rand hin erzeugt.
Shape-Outsides ermöglicht es, Texte um unregelmäßige Formen fließen zu lassen, wodurch sich kreative Layouts und interessante visuelle Effekte erstellen lassen. Diese Technik erlaubt es, Texten nicht nur rechteckig, sondern entlang beliebiger Konturen zu fließen, um Bilder oder andere Elemente ansprechend in Szene zu setzen. Zusammen mit CSS-Textfluss kann der Text auf dynamische Weise um die Form des Elements gelegt werden.
Die shape-outside-Eigenschaft wird verwendet, um die
Form zu definieren, entlang derer der Text fließen soll. Diese
Eigenschaft funktioniert nur mit Elementen, die gefloatet sind
(float: left oder float: right). Das bedeutet,
dass das Element aus dem normalen Dokumentfluss herausgehoben wird und
der Text den Raum um die definierte Form herum einnimmt.
.element {
float: left;
shape-outside: circle(50%);
width: 200px;
height: 200px;
}In diesem Beispiel wird ein kreisförmiger Textfluss erzeugt, der die Form des Elements umrundet.
Mit circle() und ellipse() lassen sich
kreisförmige oder elliptische Textflüsse erzeugen. Diese sind ideal für
runde Bilder oder Grafiken.
.element {
float: left;
shape-outside: circle(50% at 50% 50%);
}Hier wird ein kreisförmiger Textfluss erzeugt, der das Element gleichmäßig umschließt.
Die inset()-Funktion legt einen rechteckigen Bereich
fest, ähnlich wie padding, wobei die Abstände von den
Rändern des Elements definiert werden.
.element {
float: left;
shape-outside: inset(10px 20px 10px 20px);
}Dieser rechteckige Textfluss erzeugt einen gleichmäßigen Abstand zwischen Text und Form.
Mit polygon() lassen sich benutzerdefinierte,
mehrseitige Formen erstellen, die den Text entlang spezifischer Punkte
fließen lassen. Die Punkte werden im Format x y angegeben
und erstellen eine beliebige Kontur.
.element {
float: left;
shape-outside: polygon(0 0, 100% 0, 100% 50%, 0 100%);
}In diesem Beispiel wird ein polygonaler Textfluss erstellt, der das Element in eine trapezförmige Kontur schneidet.
Mit shape-outside: path() können auch komplexere
SVG-Pfade verwendet werden, was besonders für außergewöhnliche Designs
geeignet ist. Die Form wird als SVG-Pfad im CSS angegeben.
.element {
float: left;
shape-outside: path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}In diesem Beispiel wird ein geschwungener SVG-Pfad verwendet, entlang dessen der Text fließt.
shape-margin: Definiert den Abstand
zwischen der Form und dem umliegenden Text. Dies kann nützlich sein, um
Platz zwischen der Form und dem Text zu schaffen.
.element {
float: left;
shape-outside: circle(50%);
shape-margin: 10px;
}Hier wird ein Abstand von 10px zwischen dem Kreis und dem umliegenden Text eingefügt.
shape-image-threshold: Diese
Eigenschaft wird zusammen mit shape-outside verwendet, wenn
eine Form aus einem Bild generiert wird. Der threshold-Wert
legt fest, wie viele Teile des Bildes durch die Form sichtbar sind. Der
Bereich bewegt sich zwischen 0 und 1, wobei 1 bedeutet, dass nur
vollständig sichtbare Bereiche in die Form aufgenommen werden.
.element {
float: left;
shape-outside: url('image.png');
shape-image-threshold: 0.5;
}Hier werden nur Bereiche des Bildes in die Form aufgenommen, die mindestens zu 50% sichtbar sind.
<div class="circle-shape"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec ex sit amet odio ullamcorper auctor.
Donec vitae orci euismod, tempor quam at, pharetra eros.
</p>.circle-shape {
float: left;
width: 150px;
height: 150px;
shape-outside: circle(50%);
clip-path: circle(50%);
margin: 20px;
background-color: #3498db;
}In diesem Beispiel fließt der Text um das kreisförmige Element, das
mit shape-outside erstellt wurde.
path() können einzigartige Formen erstellt werden, die z.
B. entlang eines Logos oder anderer grafischer Formen verlaufen.