Can I recreate this tucked-corner photo effect with CSS?
Vložit
- čas přidán 1. 06. 2024
- Looking to step up your CSS game? I have free and premium courses 👉 kevinpowell.co/courses?...
🔗 Links
✅ Alvaro’s original codepen: codepen.io/alvaromontoro/pen/...
✅ My attempt: codepen.io/kevinpowell/pen/Vw...
✅ Twitter thread with other possible solutions (which is what had Alvaro make his attempt): / 1688641486366052353
⌚ Timestamps
00:00 - Introduction
00:45 - I’ve got new Merch
01:13 - The tricky part we’re trying to copy
01:45 - The easy parts
02:45 - Using pseudo-elements for the shadows
08:20 - Trying (and failing) to hide the corners
09:57 - Giving up and looking at Alvaro’s code
11:30 - Setting up the clip path
14:30 - Setting up the fake border on the image
18:00 - Setting up the fake shadow
19:20 - Improving the look of it
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Hol'up! Is that his greeting? Hello my front end friends? I always wondered why he said "Hello my friend and friends" and now I know why it didn't sound right
Didn't everyone think that at some point? He did clarify in some earlier videos btw
woah, I just realized that. I always thought it was friend and friends
@@wojtek987 Did he? I must've missed that video
@ds4835 yeah there was a video where he clarified this and I started to notice him enunciating better after that particular video.
I really like this kind of videos. They're short enough that it's not a drag to find the time to watch them (15mn would even be better), and it's SO insightful to see the process of your brain thinking, honestly I'm learning so much seeing you problem solving. Thank you Keviiiiiin!!!
The thing is, when the corner is raised, because of the corner of the photo, then that corner has to have a slightly lighter hue in the middle, because light falls in differently, where the paper is raised. When making these kinds of recreations of reality, it's better to have a physical photo album and then look at how the light falls.
Thanks to your new merch, TIL that you're saying "Hello my front-end friends" in your intros. Since I first discovered your channel a year (or two?) ago, I always thought that your intro was, "Hello my friend and friends," a quirky way of addressing both the individual and the wider audience. Please tell me I'm not the only one who's been mis-hearing the intro like this. 😂
I hope I could be a great webdesigner like you on the future ! I love your work but I can feel I don't have achieved and understood all CSS properties yet. It will take a long time, but with a lot of practice and your precious tips, I wish I will succeed ! (sorry for the bad English, I'm also French) ❤️
I think all the radial gradients are way over complicating it
Technically img elements are allowed to be within figcaption elements -- so you could move the img to be within the figcaption and still be within the rules of the twitter post (although probably not the best solution semantically speaking
From there it isnt too difficult:
Have the figure have the clip path, some padding and overflow hidden
Have the figcaption have some padding, a white background and a box shadow
Then use some pseudo elements within the figure to get the corner shadows, using a little trig in SCSS to get exact sizes
Totally cuts out any and all requirements for messing around with gradients
You could apply the pseudoelements to the figure tag and clip path to the photo. Maybe you could use then dropshadow filter for the shadows.
He is the only one person that really made me like css and help me understand a lot of stuff. Thanks to his videos I was able to style a lot of thing in my application and I keep moving forward so really thanks for your great work. I also admire and love that you work like on one shot, that is really great to see that all is real or at least seems to be 👍
Of course you can, you are an amazing developer :D
ok without watching the video here is my theory:
- first add a general shadow to the image card
- then cut corners of it using clip
- then use 2 element (can be ::before and ::after) place them top left and bottom right corners
- rotate them and make them look to the photo
- keep them transparent but add box shadow to them. on their one side that looks at the photo
5:45 ok i was watching the video, second step i wrote here ^, should also cut the unwanted shadow from the other sides of the corner elements
Why will the old border trick not work, instead of rotating? Like this
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
You can do a lot of stuff with borders today too, like border-image
As long as you do not rotate, then you should be able to know all the values too?
Hy, have 2 question-ideas:
1) clippath didn't work with negative value?
2) clippath and margin how do they work?
clip-path:polygon works with negative values, at least in chrome, so whole this gradient trick seems a little unnecessary
I think clip path can use negative values, so could you have used that to continue with your first approach using box shadows?
Interesting!
How can i show my certificate of the Conquering Responsive Layouts on Linkedin?
I have not seen the video het and Im still a junior front end dev with less than 1 year of experience so this solution might sound dumb and i dknt know if it works, but could make a little triangle div with the same background color add a box shadow on it and position it using position:absolute and position relative on the image and do a larger z index on the triangle div.
That would totally work if you had a solid background color! The reason it caught my eye was the background wasn't solid, which made it a lot harder 😅
@@KevinPowell Ayy im glad i was close, thank you for your feedback Kevin! Keep up the great work, learned lots of things from you this year
A little offTopic, can you tell me, why can I use PictureInPicture only in this video, and not in others?
Just a before and after with a rotate and shadow it seems? Clipped to let the bg pass through.
I appreciate the trickery, but I would personally just go for nested elements. Clip the corners of the inner one, then add pseudoelements to the outer one. Maybe also have a "middle" level with padding, if the box-shadow gets clipped. This feels too complicated for maintainability.
This is exactly how I did it before watching the video. Yes, It included extra mark-up but is far simpler than all those gradients.
One question how about giving pseudo elements a bg similar to background of page. It can be simple and we can achieve similar results
Because when you add background to the page and then add that same background to another element, it doesn't inherit background position from the page. You will need to figure out where in the background image you need to show the corner. I don't think this is possible with patterned backgrounds or gradient backgrounds, unless there is a CSS feature I do not know of. But the idea will absolutely work with single color backgrounds, I have used that idea before.
This bit doesn't work for me ...
/* demo */
figure:nth-of-type(1) img {
width: 300px;
}
figure:nth-of-type(2) img {
width: 300px;
height: 200px;
}
figure:nth-of-type(3) img {
width: 300px;
aspect-ratio: 1;
}
... so I added "style: width: 300px;" to the img (etc)
It still don't work.
BTW I am using Obsidian note app
Alvaro is a pretty amazing developer. I know that first hand!!
Thanks! 😳
Sounds like the bottom and right white borders are going to be a problem in the way you solved it, since the top and left borders are going to poke through the transparent linear backgrounds at the top-right and bottom-left corners.
Hmm, good point I didn't even think about. It's how Alvaro did it though, so there must be a bit of a trick there. Wish I'd realized that as I was recording, lol.
@@KevinPowell I couldn't stop thinking that he's using a solid background, and maybe these aren't transparencies at all? That'd surely make the effect much easier to accomplish.
i think clippath would work if you made it right if you chipped only corner outside shadow wont show but you need only inside which would
That would make perfect cut
@KevinPowell ignore this i comment before watching full video
Hi, can you make videos on Javascript plz its a humble request sir. Plz make video on Javascript beginner to pro. I am waiting for your videos on Javascript Thanks in advance🥰
Haven't watched yet, but isn't it just 2 pseudo triangles, filter drop-shadow and clip-path?
Kevin did those steps quickly. What made it more challenging was getting this done without the drop-shadows being visually clipped at the ends or creating any new divs doing it
I remember when we used to use images for stuff like this. lol
That's why the shadows were round despite coming out of a flat 45° angle. It was gradients all the way down.
I believe it is gonna be easy...
couldn't you use a mask-image with a flat gradient to hide the corners?
Can you give example?
That's way more complicated than I expected. Not sure I fully understand what it's doing.
05:49
.photo{
--Cut:2rem;/*shortest distance from corner to non-transparent region*/
position:relative;
width:15rem;
height:20rem;
margin:1rem;
background-image:linear-gradient(-45deg,
transparent var(--Cut),
white var(--Cut) calc(100% - var(--Cut)),
transparent calc(100% - var(--Cut))
);
}
.photo:before,.photo:after{
content:"";
display:block;
position:absolute;
width:calc(var(--Cut) * 2);
height:calc(var(--Cut) * 2);
box-shadow:0 0 1rem black;
rotate:45deg;
inset:calc(var(--Cut) * -1);
}
.photo:before{
right:auto;
bottom:auto;
}
.photo:after{
top:auto;
left:auto;
}
.photo{contain:paint;} to hide other sides of shadow rectangles
Hi, how to add button that can download files?? the files is in server
Of course you can, you're Kevin Powell! The Mussolini of CSS.
I hope you don't mean that evil italian dictator. That wouldn't be a compliment at all...
He's a dictator?
please sir, i'm stuck. i saw this video,
czcams.com/video/rODuJiQQL9I/video.html
but he is doing this through the GSAP library. but i want to achieve it only through vanilla css.
sqrt to the rescue? 😅
Still not in Chrome 😭
@@KevinPowell Luckily, easy enough to calculate by hand or with a preprocessor ;)
But I do not understand why you rotate, when you can use old border trick to make triangles?
If you do not rotate, shouldn't you then be able to know all the values?
Slightly misread the title lol
Or, probably, use second wrap.
I wish this was not done in codepen.
Why?
What's wrong with Codepen?
What a pain in the butt.
Why did you change the thumbnail mofo
Automatic thumbnail rotation
think tf not since he changed back@@BrunoNeureiter