Cooler 3 D Effekt auf dieser Site - wie umsetzen?

[Matthias Scharwies]

Servus!

das Hauptproblem bleibt aber die Dateigröße - wo manche hier meinen, dieses "Mask" oder "ClipPath" wäre die Lösung. keine ahnung was damit genau gemeint ist und wie das geht.

• HTML/Tutorials/Bilder_im_Internet/Formate_und_Größen

tl;dr

Jpeg-Grafiken werden mehr oder weniger komprimiert und sind daher relativ klein; png speichern verlustfrei und haben dafür größere Dateigrößen.

Da der ausgeschnittene Kopf ja ein viereckiges Bild mit transparentem „Hintergrund“ ist, musst du eigentlich png nehmen.

Das Tutorial zeigt, wie man eben so einen Beschneidungspfad erstellt, der dann ein (von der Dateigröße her) kleineres jpg so beschneidet, dass der gleiche Effekt erzielt wird.

PS: denke aber, die meinen, es gibt einen Weg, wie man die Pfade (Bezierkurven oder so?) aus zB. PS exportiert und diese Koordinaten Angaben gleich in diese CSS Anweisungen namens clip rect oder so einsetzt. Kluge Idee finde ich, nur bin ich zu dumm dafür ...

Ich würde da eher Illustrator oder Inkscape nehmen, weiß aber auch nicht wie und würde doch die Grafik an sich bearbeiten.

doch warum man mit dem Verdecken/verstecken nur per CSS Dateigrößen spart, ist mir auch nicht klar

Eben wegen der unterschiedlichen Grafikformate für das obere Bild (siehe Link oben)

und wie man damit die angesprochenen feinen Strukturen hinbekommt, auch nicht.

Eine Beschneidung (clip-path) schneidet das Bild mit einer scharfen Kante aus. Eine Maskierung kann eben auch weiche Kanten erzeugen, die natürlicher aussehen.

CSS/Tutorials/Masken_und_Beschneidungen/Masken

Das ist alles nicht trivial. Früher hätte ich da stundenlang rumgebastelt und mich gefreut. Heute weiß ich, dass man sowas nach einigen Monaten wsl. durch etwas völlig anderes ersetzt.

Herzliche Grüße

Matthias Scharwies