Articles
Einführung in CSS
CSS-Eigenschaften im Zusammenhang mit Filtereffekten

CSS-Eigenschaften im Zusammenhang mit Filtereffekten

Dieser Artikel erklärt CSS-Eigenschaften im Zusammenhang mit Filtereffekten.

Sie können lernen, wie man Eigenschaften wie filter und transform verwendet und schreibt.

YouTube Video

HTML zur Vorschau

css-effect.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(50px, 50px, 50px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156            </section>
157        </article>
158    </main>
159</body>
160</html>

Filtereffekte

filter-Eigenschaft 

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

Die filter-Eigenschaft wird verwendet, um visuelle Effekte auf Elemente anzuwenden. Sie können problemlos verschiedene Effekte hinzufügen, wie z. B. das Verblassen von Bildern oder Elementen, das Anpassen der Helligkeit und das Ändern des Kontrasts.

  • Die Klasse filtered-image-sepia hat einen Sepiaeffekt angewendet.
  • Die Klasse filtered-image-opacity hat einen Transparenzeffekt angewendet.
  • Die Klasse filtered-image-multiple hat Helligkeits-, Kontrast- und Sepiaeffekte auf das Bild angewendet.

Grundlegende Syntax 

1filter: none | <filter-function> [<filter-function>]*;

Für die filter-Eigenschaft geben Sie none oder eine filter-function an.

  • Das Angeben von none wendet keine Filtereffekte an.
  • Geben Sie die anzuwendende Filterfunktion in <filter-function> an. Mehrere Filter können durch Leerzeichen getrennt angegeben werden.

Arten von Filterfunktionen

blur() 
1filter: blur(5px);

Die Funktion blur() wendet einen Weichzeichnungseffekt an.

  • Der Wert wird in Pixeln (px) angegeben, und je größer der Wert ist, desto stärker ist die Unschärfe.
brightness() 
1filter: brightness(1.5);

Die Funktion brightness() passt die Helligkeit an.

  • Der Wert wird basierend auf 0 (komplett dunkel) bis 1 (ursprüngliche Helligkeit) angegeben. Das Angeben eines Wertes größer als 1 macht das Element heller.
contrast() 
1filter: contrast(2);

Die Funktion contrast() passt den Kontrast an.

  • Der Wert wird basierend auf 0 (Graustufen) bis 1 (ursprünglicher Kontrast) angegeben, und Werte größer als 1 verstärken den Kontrast.
grayscale() 
1filter: grayscale(1);

Die Funktion grayscale() konvertiert das Element in eine monochrome Darstellung.

  • Der Wert wird von 0 (Originalfarbe) bis 1 (komplett monochrom) angegeben.
hue-rotate() 
1filter: hue-rotate(90deg);

Die Funktion hue-rotate() dreht den Farbton.

  • Werte werden in Grad (deg) angegeben, wobei Farbänderungen durch das Drehen des Farbtons angewendet werden. Der Farbton dreht sich im Bereich von 0deg bis 360deg.
invert() 
1filter: invert(1);

Die Funktion invert() kehrt die Farben um.

  • Die Werte werden von 0 (Originalfarbe) bis 1 (komplett invertiert) angegeben.
opacity() 
1filter: opacity(0.5);

Die Funktion opacity() ändert die Transparenz eines Elements.

  • Werte werden im Bereich von 0 (vollständig transparent) bis 1 (deckend) angegeben.
saturate() 
1filter: saturate(2);

Die Funktion saturate() passt die Sättigung an.

  • Werte reichen von 0 (monochrom) bis 1 (ursprüngliche Sättigung), und Werte größer als 1 erhöhen die Sättigung.
sepia() 
1filter: sepia(1);

Die Funktion sepia() wandelt in Sepiatöne um.

  • Die Werte werden von 0 (Originalfarbe) bis 1 (voller Sepiaton) angegeben.

Anwenden mehrerer Filter 

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

Mehrere Filter können durch Leerzeichen getrennt angewendet werden.

Vorteile der Verwendung der Eigenschaft filter

Die Eigenschaft filter ist ein leistungsstarkes Werkzeug, um visuell ansprechende Elemente einfach zu erstellen. Es bietet die folgenden Vorteile:.

  • Visuelle Effekte können einfach hinzugefügt werden.
  • Bilder können ausschließlich mit CSS angepasst werden, ohne Bildbearbeitungssoftware zu verwenden.
  • Dynamische Effekte können durch die Kombination mit Animationen erstellt werden.

Eigenschaft transform 

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

Die Eigenschaft transform wird verwendet, um 2D- oder 3D-Transformationen auf Elemente anzuwenden. Verschiedene visuelle Transformationen wie Position, Drehung, Skalierung (Vergrößerung/Verkleinerung) und Schrägstellung können mit CSS angegeben werden. Die Eigenschaft transform wird häufig in Kombination mit Animationen verwendet und hilft bei der Erstellung dynamischer Benutzeroberflächenelemente.

  • In der transform-scale-Klasse vergrößert sich beim Überfahren des Elements seine Breite um das 1,5-fache und seine Höhe um das 2-fache.

  • In der transform-skew-Klasse dreht sich das Element beim Überfahren um 30 Grad auf der X-Achse und 20 Grad auf der Y-Achse.

  • In der transform-rotate-Klasse dreht sich das Element beim Überfahren um 45 Grad und vergrößert sich um das 1,5-fache.

Grundlegende Syntax 

1transform: none | <transform-function> [<transform-function>]*;

Die transform-Eigenschaft legt entweder none oder eine transform-function fest.

  • Wenn none angegeben ist, wird keine Transformation angewendet.
  • Geben Sie die Art der Transformation mit <transform-function> an. Mehrere Transformationen können angewendet werden, indem sie durch Leerzeichen getrennt werden.

Haupttransformationen-Funktionen

translate() 
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */
  • Die Funktion translate(x, y) bewegt ein Element um die angegebenen Abstände entlang der X- und Y-Achsen. Geben Sie x und y mit Einheiten wie px oder % an. Sie können auch einzeln mit translateX() oder translateY() angeben.
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • Die Funktion rotate(angle) dreht ein Element um den angegebenen Winkel in Grad (deg).
scale() 
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */
  • Die Funktion scale(x, y) skaliert ein Element entlang der X- und Y-Achsen. x und y sind Skalierungsfaktoren relativ zur ursprünglichen Größe. Zum Beispiel verdoppelt scale(2, 2) die Größe. Sie können auch einzeln mit scaleX() oder scaleY() angeben.
skew() 
1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);
  • Die Funktion skew(x-angle, y-angle) verzerrt ein Element um die angegebenen Winkel entlang der X- und Y-Achsen. Sie können auch einzeln mit skewX() oder skewY() angeben.
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • Die Funktion matrix() gibt eine Matrix an, um mehrere Transformationen auf einmal zu kombinieren. Sie wird normalerweise in Kombination mit anderen Transformationsfunktionen verwendet.

3D-Transformationsfunktionen

translate3d() 
1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;
  • Die Funktion translate3d() führt eine Verschiebung im 3D-Raum durch.
    • Sie kann in drei Dimensionen angegeben werden: X-, Y- und Z-Achsen.
  • Indem die Eigenschaft transform-style auf preserve-3d und die Eigenschaft perspective auf 600px gesetzt wird, wird auf die Kindelemente ein dreidimensionaler Bewegungseffekt mit Tiefenwirkung angewendet.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • Die Funktion rotate3d() führt eine Drehung im 3D-Raum durch.
    • Sie dreht ein Element in Bezug auf die X-, Y- und Z-Achsen.

Kombinieren mehrerer Transformationen 

1transform: rotate(45deg) scale(1.5);

Die transform-Eigenschaft kann mehrere Transformationen gleichzeitig anwenden. Zum Beispiel können Sie Rotation und Skalierung kombinieren.

Wichtige Hinweise zur Anwendung

Die transform-Eigenschaft ist ein leistungsstarkes Werkzeug in CSS, um Elemente visuell zu transformieren. Durch die Kombination verschiedener Funktionen können Sie interaktive und dynamische Benutzeroberflächen erstellen.

  • Die transform-Eigenschaft erlaubt die direkte Transformation von Elementen und ermöglicht visuelle Manipulationen, ohne das DOM-Layout zu ändern.
  • Sie ist sehr nützlich, um Animationen und interaktive Elemente zu erstellen, und ermöglicht dynamische Designs in Kombination mit transition oder animation.

Eigenschaft transform-origin 

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}

Die Eigenschaft transform-origin wird verwendet, um den Ursprungs- oder Referenzpunkt für Transformationen festzulegen, die durch die transform-Eigenschaft angewendet werden. Sie können den Referenzpunkt für Transformationen von Elementen angeben, sodass Sie kontrollieren können, um welche Position Effekte wie Rotation oder Skalierung angewendet werden.

In diesem Beispiel dreht und skaliert sich das Element gleichzeitig, wenn Sie die Maus darüber bewegen, basierend auf dem Punkt, der durch die Eigenschaft transform-origin definiert ist.

Grundlegende Syntax 

1transform-origin: x y z;

Für die Eigenschaft transform-origin können Sie x, y und z wie folgt angeben.

  • Für x geben Sie den Referenzpunkt auf der X-Achse (horizontale Richtung) an. Werte können mit Schlüsselwörtern (left, center, right) oder Längen (px, % usw.) angegeben werden.
  • Für y geben Sie den Referenzpunkt auf der Y-Achse (vertikale Richtung) an. Werte können mit Schlüsselwörtern (top, center, bottom) oder Längen angegeben werden.
  • Für z geben Sie den Referenzpunkt auf der Z-Achse (Tiefenrichtung) an. Es kann nur mit 3D-Transformationen verwendet werden. Es ist optional, und der Standardwert ist 0.

Standardwert 

1transform-origin: 50% 50%; /* Center of the element */

Der Standardwert für die Eigenschaft transform-origin ist das Zentrum des Elements sowohl für die X- als auch die Y-Achse. Das bedeutet, dass Transformationen standardmäßig mit dem Zentrum des Elements als Referenzpunkt durchgeführt werden.

So legen Sie Werte fest

Werte für die Eigenschaft transform-origin können mit Schlüsselwörtern, Prozentangaben, Längen wie px, em usw. angegeben werden.

  1. Schlüsselwort-Spezifikation

    • left: Setzt die X-Achsen-Referenz auf den linken Rand des Elements.
    • right: Setzt die X-Achsen-Referenz auf den rechten Rand des Elements.
    • top: Setzt die Y-Achsen-Referenz auf den oberen Rand des Elements.
    • bottom: Setzt die Y-Achsen-Referenz auf den unteren Rand des Elements.
    • center: Setzt die Referenz für die X- oder Y-Achse auf die Mitte des Elements.

  2. Prozentspezifikation

    • 0%: Setzt es auf den linken oder oberen Rand.
    • 50%: Setzt es auf die Mitte.
    • 100%: Setzt es auf den rechten oder unteren Rand.

  3. Längenspezifikation

    • Sie können den Bezugspunkt fein einstellen, indem Sie spezifische Längen wie px, em usw. verwenden.

transform-origin in 3D-Transformationen 

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin kann auch für 3D-Transformationen verwendet werden. Bei 3D-Transformationen können Sie auch den Bezugspunkt auf der Z-Achse festlegen. Zum Beispiel können durch die Angabe des Rotationszentrums in der Tiefenrichtung Transformationen mit einem Gefühl von Tiefe erreicht werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

CSS-Eigenschaften in Bezug auf Transparenz