KPC
Kevin Powell - Community•3mo ago
AlekseiArsentev

How to create this shadow effect with css?

I want to create a card design for my portfolio website, but I don't know how to add a shadow effect as shown in the drawing.
No description
4 Replies
capt_uhu
capt_uhu•3mo ago
It looks like the kinda thing that folks are calling a "long shadow" except with a stroke on it. What have you tried so far? Do you have a codepen we can look at?
AlekseiArsentev
AlekseiArsentev•3mo ago
You pointed me in the right direction, but I found an easier solution with javascript. https://codepen.io/alekseiarsentev/pen/xxeWxzz Sorry for the wrong tag 😁
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•3mo ago
You could just do it with SCSS https://codepen.io/tok124/pen/mdgxJOB
Tim
CodePen
mdgxJOB
...
Pete (he/him)
Pete (he/him)•3mo ago
You can also do a decent job with just CSS, without box-shadows https://codepen.io/ptrfrncsmrph-the-vuer/pen/XWQEWqz
Peter Murphy
CodePen
Card with shadow
...
Want results from more Discord servers?
Add your server
More Posts
Add CSS classes along with js code in className attribute in HTML (React)I'm new in writting JS in React so I'm having problems in adding my css clases "block lg:hidden". I how to do Forced Scroll in a slideri saw a forced scroll on this agency website on the section of their work and i wanted to know how tWhy having a Link as a child of a ButtonI see examples in React with Radix that does things like: ``` <Button asChild> <Link href="/path">subgrid vs inheritCould someone please explain the difference between defining `grid-template-columns: subgrid;` and `How to create this treeI need to create structure tree like is on the image. I looked for any library but I didn't find. SoSeeking Feedback on My First HTML/CSS Project!Hi web developers, I'm excited to share that I've just completed my very first project using HTML aOversized img on iPhones, when other devices are showing img perfectlyIm using parallax effect on my website, background image is set as a bgc-img: url() in CSS. Image isConcurrency vs. Parallelismhttps://youtu.be/3X93PnKRNUo?si=odMScfJH0TCd-0g_I need help with responsive.I'm doing desktop to mobile, and I'm having trouble on mobile devices. Can someone give me an adviceLooking for direction / guidance about this particular canvas effect + resourceThere is a canvas interaction right at the header of the case study from this site. I want to know i