Design comparison
Solution retrospective
Profile card component with a little bouncy entry animation and a dark mode.
The most difficult part for me was to position the background image. I failed to do that with background-image, so ended up using pseudo element with overflow: hidden;
. Please let me know if you have any better solution (modifying the image is a good option I believe π
)
I also failed to apply filter on the card top image to match it with dark mode. When I applied filter to it, it covered the profile picture. If you have any idea, how to darken that image without breaking other things, do let me know!
Community feedback
- @michagodfreyPosted about 2 years ago
Hi Md Azharuddin, this is looking great. The bouncy feature and dark mode are working perfectly I think. A great way to enhance this project.
As for using pseudo elements for the background, the feedback I got for this challenge was that is the best way to go. The background is the hardest part of this challenge (without doing extras) and not really newbie territory imo.
As for the dark mode on image, I don't know how darkmode could be applied to an image, you'd need a separate image I think, or directly edit the fill property of the svg.
Marked as helpful0@azhar1038Posted about 2 years ago@michagodfrey Yes! How did I forget about
currentColor
for svg!Thanks I will try that and see how it goes π
1@azhar1038Posted about 2 years ago@michagodfrey Hi Michael,
I was able to do it with
background-image
.
Please check and let me know your thoughts on this!0@michagodfreyPosted about 2 years ago@azhar1038 Looking good :) I also noticed you added the line, nice. You've nailed this one, great work!
0 - @elaineleungPosted about 2 years ago
Hi Md, this was the challenge I mentioned to you when I said I needed to use pseudo elements! Gave me quite the headache too π
About using a filter in dark mode, I think you can try doing what you did in the
theme-toggle.css
for your profile photo class element, like this:[data-theme="dark"] .profile__photo { filter: brightness(0.8); }
By the way I love what you did with adding dark mode here! π I'd suggest also to put a
cursor: pointer
on the dark mode toggle, since to me it always looks better when a pointer is there to indicate interactivity. Well done once again!1@azhar1038Posted about 2 years ago@elaineleung I thought so that maybe it is this challenge when I encountered the problem π
Regarding
filter
, yes it works but then that card pattern image covers the profile picture. I even triedz-index
but didn't work.I will change the cursor.
1@elaineleungPosted about 2 years ago@azhar1038 Oh woww I totally read your question wrong; I thought it was the profile photo you wanted to change, oops π π π
In that case, there's something you can try that I just tested in the inspector; the way to not cover the profile picture is to put
isolation: isolate
on.profile__photo
. I don't know which method you used for applying a filter, but anyway I just wrapped the svg<img>
with a new<div>
called.card-top
and then added a line in the toggle theme. Everything looks like this:.profile__photo { // rest of your code isolation: isolate; } [data-theme="dark"] .card-top { mix-blend-mode: multiply; }
Anyway, good luck and hope it works out!!
Marked as helpful0@azhar1038Posted about 2 years ago@elaineleung Thanks!
isolation: isolate;
worked! I am usingfilter: brightness(70%) saturate(140%);
for darkening the image.And I was able to do it with background-image instead of pseudo elements π
1 - @BrunoleonardoDevPosted about 2 years ago
Por essa eu nΓ£o esperava, parabΓ©ns pela ideia do dark mode! ππΎ
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord