Website Elemente maskieren – CSS Clip-Path
In diesem Tutorial geht es um die Verwendung von CSS Clip Path in Webflow, um Elemente zu maskieren und damit interessante Formen herzustellen. Es wird gezeigt, wie man vorgefertigte Formen verwenden kann und wie man eigene Formen erstellt. Es wird auch erklärt, wie man Clip Path auf unterschiedlichen Breakpoints aktivieren oder deaktivieren kann. Verwendet wird dazu die Webflow App Clip Path Bae.
Ergebnis anschauen:
https://diagonal-layouts.webflow.io
Projekt in Webflow in dein Dashboard kopieren:
https://try.webflow.com/diagonal-layouts *
---------------------------------------------
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
---------------------------------------------
// TIMESTAMPS
00:00 – Intro
00:30 – Clip Path App anwenden
02:10 – Clip Path als Custom Property
04:26 – Maskierte Bilder mit Text im Hintergrund
04:52 – Unterschied SVG Positionierung vs Clip Path
06:24 – Projekt kostenlos als Vorlage verwenden
06:32 – Mein Webflow Onlinekurs Update
#webflow #webdevelopment #webdesign
---------------------------------------------
// PATREON
► Unterstütze meinen Kanal auf Patreon (mehrere Podcast Sonderfolgen und Webflow Tutorials pro Monat): http://bit.ly/patreon-seite
----------------------------------------------
// MEIN WEBDESIGN UND FREELANCER BLOG
► https://jonasarleth.com/blog
----------------------------------------------
// MEIN WEB & DESIGN PODCAST
► iTunes: https://jonasarleth.com/itunes
► Spotify: https://jonasarleth.com/spotify
► SoundCloud: https://jonasarleth.com/soundcloud
► Overcast: https://jonasarleth.com/overcast
----------------------------------------------
Affiliate Links