Cooler 3 D Effekt auf dieser Site - wie umsetzen?

[Matthias Scharwies]

Servus!

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 ...

Das war ja das erste Tutorial von Gunnar: css-tricks.com/transparent-jpg-svg/

... 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

Nein: Du musst es als svg speichern und dann den Pfad ins CSS kopieren.

Sorry, das Kapitel vor dem Masken-Tutorial beschreibt das von den Anfängen an:

CSS/Tutorials/Masken_und_Beschneidungen/clip-path

Nach dem Zuschneiden mit geometrischen Grundformen kannst du eben auch einen Pfad verwenden:

CSS/Tutorials/Masken_und_Beschneidungen/clip-path#path()-Funktion

Achtung: das funktioniert (noch) nicht im Safari, der doch ziemlich weitverbreitet ist.

Solche Pfade kann man auch bei Maskierungen verwenden, wobei der Browser-Support noch bescheidener ist:

CSS/Tutorials/Masken_und_Beschneidungen/Masken#Referenzieren_einer_Maske

Wie gesagt, ich würde ein halbtransparentes png verwenden.

Herzliche Grüße

Matthias Scharwies