Design Clean
    >> Tipps zum anpassen

Foto Filter mit CSS

Bildbearbeitung mit CSS :

Hier einige Filter-Beispiele.
Ich habe alle Fotos mit Hover versehen, bei Mauskontakt seht Ihr Original-Foto.
User mit Internet-Explorer 9 (und Abwärts) sehen keine Effekte.


Ich

Das Originalfoto.
August 2015 im tiefen Nordfriesland.



Ich

Hier mit Grau-Filter

filter: grayscale(100%);

Ein Wert von 0% lässt das Bild unverändert.



Ich

Hier mit Kontrast-Filter

filter: contrast(140%);

Wert von 0% erzeugt graues Bild.
Wert 100% lässt das Bild unverändert.
über 100% dunkle Kontrast-Effekte



Ich

Hier mit Schatten

filter: drop-shadow(16px 16px 10px black);

Dritte Wert 10px ist für Fade-Effekt,
für weiche oder harte Schattenkanten



Ich

Hier mit Farbton-Rotation

filter: hue-rotate(90deg);

Wert (0deg) lässt das Bild unverändert.
Der Maximalwert ist (360deg).



Ich

Ursprungsfarben invertieren

filter: invert(100%);

Ein Wert von 0% lässt das Bild unverändert.
100% erzeugt komplett invertiertes Bild.



Ich

Transparenz

filter: opacity(50%);

Ein Wert von 0% = komplett transparent.
Wert 100% lässt das Bild unverändert.



Ich

Sättigung (Farbe)

filter: saturate(200%);

Ein Wert von 0% = ohne Farben.
Wert 100% lässt das Bild unverändert.
Werte über 100% = kräftigere Farben



Ich

Sepia-Effekt

filter: sepia(100%);

Wert 0% lässt das Bild unverändert.
Wert 100% = kompletter Sepia-Effekt




Ich

Bild gedreht

transform: rotate(20deg);

Wert (0deg) lässt das Bild unverändert.
Maximaler Wert (360deg).




Wie füge ich meinem Bild einen Effekt zu ?

Wenn das Bild im Seiteninhalt eingefügt wurde ....

- oben im Editor (Werkzeugleiste) auf "Quellcode" klicken
- dein Seiteninhalt wird nun als HTML-Code angezeigt
- nun suchen wir den HTML-Bildcode
- so sieht er aus :
<img src="Grafikadresse alt="Bild" />
Dem fügen wir nun die gewünschte Eigenschaft mit ein:
<img style="filter: sepia(100%);" src="Grafikadresse alt="Bild" />


Bei Mauskontakt normales Bild anzeigen ?

- bleibe in der HTML-Code-Ansicht der Seite
- füge zu Beginn im Seiteninhalt folgenden CSS-Code mit ein:
<style type="text/css">
img { transition: all 0.5s linear; }
img:hover {filter: none!important;}
</style>





Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :26 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben