Change image shape with clip-path | HTML, CSS, JavaScript [no SVGs]

Veröffentlicht am: 13 Februar 2022
auf dem Kanal: Leanne R

3,947

In this video, I show you a quick and easy way to change the shape of an image using HTML, CSS and JavaScript - no SVGs required.

💘 Contents: 💘
00:08 - Project overview
00:40 - Using clip-path to set the shape of an image
01:22 - Browser support for clip-path
01:37 - Setting up CSS variable for the clip-path
02:04 - Writing the JavaScript function to change the image shape
02:14 - Generating a random number with Math.random() and .length
02:46 - Using setProperty to change the image shape
03:12 - Ensuring that a new shape is selected on each click with a conditional

🔗 Links: 🔗
Clip-path generator: https://bennettfeely.com/clippy/
Can I Use: https://caniuse.com/
Change image shape using SVGs: • Change image shape with HTML, CSS and Java...
--

const me = {
name: "Leanne 👩🏻",
passions: ["coffee☕️", "code 💻", "cats 🐱"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! 👑"
}

--

🐤 Say hi on Twitter: / rybaleanne

Auf dieser Seite können Sie das Online-Video Change image shape with clip-path | HTML, CSS, JavaScript [no SVGs] mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Leanne R 13 Februar 2022 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 3,947 Mal angesehen und es wurde von 54 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

195