Design comparison
Solution retrospective
I'm pretty happy with how I solved the problem of a button hover effect that uses a gradient. Once I realised I couldn't animate a transition from a background-color to a background-image:gradient in vanilla CSS without it flickering, as the gradient pops in and out, especially when quickly moving mouse over the element, I discovered I could just change the blending mode: the gradient is always loaded but the :hover transition only changes its blending mode from Darken (which results in 0% visibility as the entire gradient is lighter than the initial button) to multiply, making it visible.
(this is built with Sass and the $variables are not vanilla CSS)
.email-submit-button {
transition: all 150ms ease-out;
background-image: $orange-red-gradient ;
background-blend-mode: darken;
}
.email-submit-button:hover {
background-blend-mode: multiply;
}
I had a lot of issues thinking about Mobile-first, and my css is disorganised as I added more exceptions. I think this is probably an issue that requires more of my attention in the planning stage
What specific areas of your project would you like help with?So my solution for the success message involved changing the pop-up message from display:none to display:initial, which felt not great as I did it. I didn't find much about best practices online, should I be loading an entire new element into the DOM somehow when the success fires instead of toggling visibility in js? Should I be looking into frameworks or is there another jump-off point for how to do that?
Community feedback
- @echocode1Posted 5 months ago
. it has semantic HTML to a point. The success design could have been in the main as used. The main design can be made a section why the success can be made the 2nd second section. that should have made your styling easier and make it semantic order more unique
.with mobile first all other design will fall well in place: you can design the mobile first design and consider turning the design display to none as to allow you design the mobile success. when you are done with the mobile success you can turn the success display to none so as to redisplay your main design. -your next step will be to set your media query and adjust to fit the desktop design .with same approach set the design display to none as to allow you design your desktop success (note to set the mobile success display to flex, block or what ever you used previously. also set it counterpart main mobile design display to none .this should help you redesign the mobile success to desktop success with same CSS file with lesser codes).once you are done with designing your mobile & mobile success .ensure to switch to media query to design both the desktop main and it success message.
.if you give the above pattern a try ,then the confusion as to mobile first cant be delt with aside it would be easier designing all with single style file with lesser code.
.either to use frame work or plain languages is choice .I will advice attempting it with the languages first before making advance for framework.
.And please note that the above advice is prior to check and balance .please don't forget to make your findings and cross check.
0
Please log in to post a comment
Log in with GitHub
Join 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