Cooler 3 D Effekt auf dieser Site - wie umsetzen?

[Killua]

HTML/Tutorials/Bilder_im_Internet/Formate_und_Größen

Jpeg-Grafiken werden mehr oder weniger komprimiert png speichern verlustfrei und haben dafür größere Dateigrößen. Da der aus …

danke, grundlagen habe ich eh ein bisschen

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.

genau so ein Tut suche ich. Aber komplett, die Links hier scheinen alle nur einen Teil der Arbeit zu zeigen, keinen Überblick, keine Step for Step Anleitung. Also sowas wie vom Bild bis zum Code ...

... Pfade ... aus zB. PS exportiert ...

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

Inkscape kenne ich ein wenig, Illu nicht ... und meinst, damit kann man die exportierten Koordinaten irgendwie im CSS verwenden?

hab das mal probiert: ein Bild(jpg), den Teil, der scharf ( u später beweglich) im Vordergrund bleiben soll, mit Maske umrandet, umgekehrt, den Rest mehr weichgezeichnet. dann die Maskenkontur oder wie das heißt, in Pfad umgewandelt und auf "exportieren > Pfade Illustrator". dann habe ich eine "*.ai". Wenn ich das mit dem Win Editor öffne, hätte ich eine Ummenge an Zahlen, vmtl. eben die Koordinaten der Pfadpunkte ... oder so.

und diese sollten nun per CSS clip rect ... und ... nee, ich weiß dann nicht mehr weiter

...

doch warum man mit dem Verdecken/verstecken nur per CSS Dateigrößen spart,

Eben wegen der unterschiedlichen Grafikformate für das obere Bild

aha, meinst … weil jpg (statt png 24 oder so) das Ausgangsmaterial ist

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

ersteres ok, klar ... aber hm ... kopfkratz

CSS/Tutorials/Masken_und_Beschneidungen/Masken

da war ich gestern schon - nur ... wie weiter