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

Pubblicato il: 13 febbraio 2022
sul canale di: 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

In questa pagina del sito puoi guardare il video online Change image shape with clip-path | HTML, CSS, JavaScript [no SVGs] della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Leanne R 13 febbraio 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 3,947 volte e gli è piaciuto 54 spettatori. Buona visione!

195