You are currently viewing Clipping Images: CSS Tutorial (Day 3 of CSS3 in 30 Days)

Clipping Images: CSS Tutorial (Day 3 of CSS3 in 30 Days)



Use CSS3 to “clip” images with different shapes!

⭐️Files you need ⭐️
💻Clipping Images Code: https://www.dropbox.com/sh/zaa948quyrxn5h7/AADVgNkM0aXsI8gLTOlcUSGFa?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0

This video works as a stand-alone tutorial but is also day 3 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU

CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 24 Comments

  1. Love the tutorials im new to this channel & love it i subscribe & turned on notification. Can you also make a tutorials of "30 Days of Javascript".

  2. Sunil Nagar

    Please let me know css hack for internet explore.

  3. Dusan

    why clip-path doesnt work in transition property?

  4. REDEN ORIOLA

    Are you the main character in Guardians of the Galaxy Chris Pratt?

  5. Ptmp727

    Good video, but these are all still at sharp angles and points, how do I make rounded shapes? Thanks, great video

  6. Mike J747

    Why did EVERY IMAGE change every time I saved a line of code I wrote when writing the html (4 practice)? So basically the images changed about 30 times and I ended up with 8 different images. All code is identical. Weird.

  7. Bazi Mtsweni

    So basically it's like this for the circle.. 50% (radius or size) at 50% (right) 50% (top).. to perfectly center the clipping mask🤔

  8. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL

    The Ruvol Inventor

  9. Always remember we must repent of our sins (sin is transgression The Law Of Yahuah The Father in Heaven. The Law are The Books: Genesis, Exodus, Leviticus, Numbers, & Deuteronomy). We must repent of our sins and Have Belief On Yahusha The Messiah. HE Died and Rose three days later so that we can be forgiven of our sins!

    Come to HIM🙂🙂🙂🙂🙂🙂🙂🙂

  10. I thought two things:

    1. Could you add several shapes to one image? I would guess using ::after, to i.e. place a name over a picture.

    2. Would adding transition to this shaped work? i.e. adding an infinite rotate over the X shape so it is kind of like a windmill, sitting different clips of the image over time

Leave a Reply