Learn how to recreate a cut-corner photo effect using CSS in this 22-minute tutorial video. Explore advanced CSS techniques including pseudo-elements, clip paths, and creative border and shadow effects. Follow along as the instructor attempts to replicate a challenging design, encounters obstacles, and ultimately finds a solution by examining another developer's code. Gain insights into problem-solving in web design and pick up valuable CSS tricks to enhance your own projects.
Overview
Syllabus
- Introduction
- I’ve got new Merch
- The tricky part we’re trying to copy
- The easy parts
- Using pseudo-elements for the shadows
- Trying and failing to hide the corners
- Giving up and looking at Alvaro’s code
- Setting up the clip path
- Setting up the fake border on the image
- Setting up the fake shadow
- Improving the look of it
Taught by
Kevin Powell
