Profile card with entry animation and dark mode

Community feedback

• 

  Michael Godfrey•340

  @michagodfreyPosted over 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 helpful

  0

  ---

  

  Azhar•600

  @azhar1038Posted over 2 years ago

  @michagodfrey Yes! How did I forget about currentColor for svg!

  Thanks I will try that and see how it goes 😀

  1

  

  Azhar•600

  @azhar1038Posted over 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

  

  Michael Godfrey•340

  @michagodfreyPosted over 2 years ago

  @azhar1038 Looking good :) I also noticed you added the line, nice. You've nailed this one, great work!

  0
• 

  Elaine•11,400

  @elaineleungPosted over 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

  ---

  

  Azhar•600

  @azhar1038Posted over 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 tried z-index but didn't work.

  I will change the cursor.

  1

  

  Elaine•11,400

  @elaineleungPosted over 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 helpful

  0

  

  Azhar•600

  @azhar1038Posted over 2 years ago

  @elaineleung Thanks!

  isolation: isolate; worked! I am using filter: brightness(70%) saturate(140%); for darkening the image.

  And I was able to do it with background-image instead of pseudo elements 🙂

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @azhar1038 Good to hear, it looks great 🙂

  0
• 

  Bruno L L Oliveira•180

  @BrunoleonardoDevPosted over 2 years ago

  Por essa eu não esperava, parabéns pela ideia do dark mode! 👏🏾

  1

  ---

  

  Azhar•600

  @azhar1038Posted over 2 years ago

  @BrunoleonardoDev Thanks Bruno 😀

  0