JPG Bilder mit CSS freistellen → kein PNG mehr? Webdesign Tutorial
PNG sind nützlich, durch die hohe Dateigröße aber leider nicht optimal für die Ladezeit einer Seite. Ich zeige dir heute eine Alternative und wie du mit einem CSS Blend-Mode sehr einfach Objekte in JPG Bildern mit weißem Hintergrund freistellen kannst.
Mit freigestellten Bildern kann in vielen Layouts mehr Spannung aufgebaut werden, da man dadurch beispielsweise ein Produkt vom Hintergrund mit Formen oder Farben abheben kann. Das Problem ist nur, dass das Bildmaterial von Kundenseite meistens nicht als PNG vorliegt. Mit dem Trick in diesem Video zeige ich dir, wie du ohne viel Aufwand Blend-Modes in der Programmierung der Seite nutzen kannst und dir damit viel Zeit sparst, da keine Bilder freigestellt werden müssen.
PNG Bilder haben leider eine hohe Dateigröße und verringern dadurch merklich die Ladezeit. Bei vielen Kundenprojekten versuche ich deshalb freigestellte Bilder zu umgehen und stattdessen JPG einzubinden.
Hier ist der Code, mit dem du den Effekt ausprobieren kannst:
mix-blend-mode: darken;
---------------------------------------------
Meine Onlinekurse:
👉 Webflow Onlinekurs: Lerne Webseiten für Kunden Schritt für Schritt professionell umzusetzen (ohne Programmierkenntnisse!):
https://formburg.com/kurs
👉 50+ Webflow-Tricks:
https://www.formburg.com/tricks
👉 Webdesign Angebote mit drei Preisoptionen erstellen:
https://www.jonasarleth.com/produkt/w...
---------------------------------------------
Kostenlosen Webflow Account anlegen:
https://formburg.com/webflow-kostenlos *
Webflow schnell und einfach lernen:
https://formburg.com/tutorials
---------------------------------------------
#webdesign #webdesigntutorial #css
—
► Unterstütze meinen Kanal auf Patreon (mehrere Sonderfolgen und Webflow Tutorials pro Monat):
http://bit.ly/patreon-seite
—
Mein Webdesign und Freelancer Blog:
► https://jonasarleth.com/blog
—
Social Media:
► Instagram: / jonasarleth
► Dribbble: https://dribbble.com/jonasarleth
► LinkedIn: / jonasarleth
—
Meinen Web & Design Podcast abonnieren:
► iTunes: https://jonasarleth.com/itunes
► Spotify: https://jonasarleth.com/spotify
► Pocket Casts: https://jonasarleth.com/pocketcasts
► SoundCloud: https://jonasarleth.com/soundcloud
► Overcast: https://jonasarleth.com/overcast
► Stitcher: https://jonasarleth.com/stitcher
—