Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Recreating Cut-Corner Photo Effect with CSS

Kevin Powell via YouTube

Start learning Write review
CodeSignal Ad

Learn the Skills Netflix, Meta, and Capital One Actually Hire For

Learn More → Great Learning Ad

Learn Python with Generative AI - Self Paced Online

Learn More →

Overview

Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
Get Full Access
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.

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

Reviews

Start your review of Recreating Cut-Corner Photo Effect with CSS

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.