Our reporter did not find any issues in this project! π
Submitted
Pure CSS FAQ Accordion Card With Sweet CSS Animations
@ApplePieGiraffe
Design comparison
Reports
ApplePieGiraffeβs questions for the community
Hey, everybody! π
This was a fun challenge in which I learned how to use and style the <details>
and <summary>
HTML elements.
I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow
CSS function) and animated the linear-gradient
background with this helpful tool.
I'm quite happy with the result! π
Any feedback on both the design and code is welcome and appreciated! π
Happy coding! π
EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display
to none
) but they're gone on the actual page, as far as I can tell.
Community feedback
@dannxvc
Posted
Oh this so amazing!!! I truly love this, you are so creative. I think I would change the card's height
as min-height
, so then if all of your questions are opened, they could be seen and to make your cube-img look as good as it does now, you could position it by using top:40%
and transform: translateY(50%)
, that would be sick. Amazing job as always!
Marked as helpful
2
@ApplePieGiraffe
Posted
@dannxvc
Thank you for your suggestion! That's a nice idea! π It is useful to be able to see all of the content of the accordion card without having to scroll!
I submitted this solution over a year ago, but for some reason I had set it to be a private solution for quite a while until yesterday! π
Have a great day! βοΈ
1
@GrzywN
Posted
Great as always π₯°
I prefer :target
for CSS only approach, because it's easier to animate, but <summary>
and <details>
seems to work too.
Have a nice day π
Marked as helpful
2
@ApplePieGiraffe
Posted
@GrzywN
Thank you for your suggestion!
Another reason I like to use the details
and summary
elements is that they are fairly accessible out-of-the-box. For instance, you can open/close each accordion with your keyboard, which is helpful for navigation.
That being said, I just realized I forgot to add focus styles to the accordions, anyway, so the keyboard navigation still has some work to do! π
I submitted this solution over a year ago, but for some reason I had set it to be a private solution for quite a while until yesterday! π
Appreciate your help! Have a nice day, as well! βοΈ
2
@tesla-ambassador
Posted
@APG, this is a very great solution! I like the blobbing animation and I think I will make use of that gradient changing resource. It might have been a year ago but man am I so glad to see you submit a solution (It's like that feeling when a marvel movie drops π).
What library do you use for animations these days?
Marked as helpful
1
@ApplePieGiraffe
Posted
@tesla-ambassador
Heyyyy, thanks, bro! You're too kind! π
My favorite thing to use for animations is GSAP, but for this challenge I just used CSS since the animations are quite simple. π
Happy coding! π΄
0
@vanzasetia
Posted
Hey, ApplePieGiraffe! π
This is amazing! I love the animated background color! Awesome! π
Two things that I'd like to suggest.
- First, I would recommend is to add
:focus-visible
styling to thesummary
element so that the keyboard users could see where they are currently on the page. - Second, I suggest removing all animations when the users prefer not to see them. You can add the following code to your stylesheet. I think this is a great code to include every time you create a new project (I get it from https://piccalil.li/blog/a-modern-css-reset/.
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Other than those two things, everything is looking good to me. π
That's it! Happy coding! π
Marked as helpful
1
@vanzasetia
Posted
@ApplePieGiraffe I have several questions for you as well. π
- Are you using the Live Sass Compiler extension to compile the Sass code to CSS code? If so then I think it would be better to install the Sass package from NPM because it uses Dart Sass which supports all the newest features of Sass (like
@use
and@forward
). - Why are you changing the
html
font size to50%
? Usually, people would change thehtml
font size to62.5%
to make it easier to calculaterem
values topx
values. Also, I read this article by Josh Comeau tells about the problem of the 62.5% trick (or changinghtml
font size in general).
1
@ApplePieGiraffe
Posted
@vanzasetia
Hello, Vanza!
Thank you for your suggestions!
I actually submitted this solution over a year ago. At some point, I accidentally made this solution private, and only realized this and made it public again the other day. But because of the way the platform is set up, my solution is treated as if I just submitted it. That's why you'll see that many of the comments at the top of the page have been around for over a year, too! π
Since I was still very much a beginner back then, I didn't know about/forget to implement those suggestions. π Thank you for reminding me, though!
About changing the font-size to 50%
βI did this back then because I liked to work in units of 8px
(which is a common number to work with among some designers). I no longer do this anymore as I prefer to work with 16px
, now. However, if I do change the font-size to a percentage other than 100, I like to make sure that I compensate for that adjustment by adding another style rule to adjust the font-size of the document to a readable value. That way, I can avoid the pitfalls that Josh Comeau pointed out with this method (there might still be an issue with 3rd-party packages, though). For some reason, I forgot to do that in this solution. π
I appreciate your help! Happy coding, too!
0
@vanzasetia
Posted
@ApplePieGiraffe
You're welcome! π
I didn't notice the old comments. So, I thought that it was a new solution. π
I get it. It's good that you are aware that by changing the html
font size, you need to do extra work to make sure everything will still be readable. π
1
@ruedasjnthn
Posted
I love the little animation on the side. It really inspires me. I will make your solution my reference in creating this challenge
3
@ApplePieGiraffe
Posted
@ruedasjnthn
Thanks, ruedasjnthn! π Good luck with your challenge! π
2
@danielscastro
Posted
Amazing job! I made sure to save it for future reference in case I need it xD. The way you made the box glue with the white content box was what me made go crazy when I tried this challenge, but I see your resolution works perfectly.
Keep coding, my friend!
3
@ApplePieGiraffe
Posted
@GDanKas
Thanks for the kind words, GDanKas!
Happy coding to you, too! π
2
@brasspetals
Posted
As always, a great job!
Thanks for sharing the link to the gradient animation tool - you always add such fun animations to your solutions! I like how you chose to animate the box even on the mobile layout.
The markers still show up in Firefox, but if you add list-style: none
to your .faq-question
, it should get rid of it! π
The only thing I see that's missing are the active states for the questions (I believe they should be orange on hover). Other than that - you're golden! π
3
@ApplePieGiraffe
Posted
@brasspetals
Thanks for the feedback (and the reminders to style the detail markers in Firefox and add the active state to the questionsβboth of which I thought of at some point but eventually forgot)!
π
EDIT: Issues fixed!
1
@techanthere
Posted
Hey @ApplePieGiraffe, I have also completed this challenge recently and just have a question in mind. I have read this somewhere but was not able to find it again. I know the use of accordion vs. tab, but can I compare an accordion with a tab design, thinking that the tab panel should be displayed only one at a time while in accordion design we should let all the content expandable at once? Or it is same for accordion as well? Please guide and btw your solution looks really good except that I have a problem with the FAQ heading also scrolling with the content and not visible π Though I have also not been able to solve this once after I had have given enough time to code already, and it felt so difficult to redo it ;)
2
@ApplePieGiraffe
Posted
@techanthere
Thank you, Hania!
Sorry for my late reply! π
I prefer to allow users to open multiple tabs at once so that they can see more information at a glance and also so that they don't get annoyed if an open tab closes when they didn't expect/want it to when they open a new tab. π
2
@ApplePieGiraffe
Posted
@techanthere
And haha, yes, I might need to go back and make sure that the heading of the accordion tab doesn't scroll with the rest of the card's content. π
Good luck with your solution! π
2
@marcus-hugo
Posted
I've been reworking my solution and saw that yours has no javascript and that you used the details
and summary
elements, which I didn't know about!
I really like the animations on load too!
2
@ApplePieGiraffe
Posted
@marcus-hugo
Thanks so much, Marcus! π
The details
and summary
elements do make creating components like this much easier! π
Glad you learned something new!
1
@skyv26
Posted
Hi! I've just completed this challenge, but I am not happy with my solution, I am learning React, so that's why I am trying to complete frontend challenges with React. Can you please help me watching my solution or code. I'll be happy and appreciate your feedback. Please check this one https://www.frontendmentor.io/solutions/responsive-faq-accordian-jWYw_7J1w
2
@ApplePieGiraffe
Posted
@skyv26
Hey, there! π
Very sorry for my very late reply! I just noticed the notification for this while scrolling through my email. π
It might be a little late, but I'll take a look at your solution now! π
2
@trafiki
Posted
Hi @ApplePieGiraffe, I have one more question if you don't mind, how are you able to make the cube stay at the same position when resizing the window on desktop view? I have tried different techniques but they aren't working. What the secret? πͺ
2
@ApplePieGiraffe
Posted
@trafiki
Try positioning the floating cube relative to the cardβso make sure the floating cube is a descendant of the card in your HTML and then add position: absolute
to it. You'll need to add position: relative
to the card in order for this to work, as well. Then you can play around with the top
and left
properties on the floating cube to see what works (using fixed values for those properties will probably be best) for your project. π
1
@trafiki
Posted
Thanks a lot!
2
@trafiki
Posted
Hi @ApplePieGiraffe great work! I was wondering, how did you tuck the image on the left under the body background while it's still inside the white container? I've tried inspecting your code but I didn't find anything. I'd appreciate some explanation or if it's a technique that I can look up please let me know. Thank you!
2
@ApplePieGiraffe
Posted
@trafiki
Hey, thanks, Akerele! π
The floating cube and the illustration are both <img>
tags in the HTML. The floating cube is absolutely positioned and the illustration just has some negative margin to push it to the left of the card a bit (I think overflow: hidden
is set on the card so that the illustration doesn't peek through the edges).
The background image behind the illustration is added with CSS background images. You can see it by going to article.card
and looking at its styles in the dev tools. I think using CSS background images made adding and positioning that image a little easier (since
background images are automatically clipped and you don't have to worry about them overflowing their container). If youβd like to learn more about CSS background images and how to use them, check out this tutorial from MDN.
Hope that helps. π
1
@Art-wdt
Posted
Hey @ApplePieGiraffe ! Always, you surprise me with the level of your skill. This is probably one of the best accordion challenges on this site. I will learn a lot from your example.
How about making it look great on a screen less than 310px wide? Maybe I'm wrong. Perhaps my question is stupid. Thanks anyway for your great example!
Happy coding!
2
@ApplePieGiraffe
Posted
@Art-wdt
Hey, Art! Thanks for the kind words! π
That's actually a good point you made about designing for screens with very small widths. π I used to only make things responsive for screens down to around 320px in width (which is what I did for this challenge), but now days I try to do a little extra and make things look good on screens down to around 280px instead (and that's probably what I would recommend). Thanks for pointing that out. We are always learning! π
Happy coding to you, too! π
2
@JVoye
Posted
Really like this technique, great job!
Perhaps I could combine the html details technique and a simple toggle event to close the previous faq when clicking on a new one.
2
@KamyaJain
Posted
great design and animation is amazing must say! would like to include in my designs too for sure.
1
@ApplePieGiraffe
Posted
@KamyaJain
Thank you very much! π
0
@mohit1607
Posted
hi @ApplePieGiraffe your work with sass is amazing but I have one question in mind that how do you exactly have idea about the perfect size like mention design ? Cuz when I try I only declare the % of size of 100% of the font size and then use them as rem but kind of never achieving the same results as metion design. Please help I will appreciate.
1
@ApplePieGiraffe
Posted
@mohit1607
Thank you!
You should definitely set the font-size of the document to 100%
and then use rem
to size text throughout the site. If you don't have the design files, you'll just have to play around with the values a bit until you find something similar to the design JPGs. This browser extension named PerfectPixel allows you to overlay an image over your website so that you can see exactly how your site matches up with the design. I used to use it a lot and maybe it will help you, too! π
1
@mohit1607
Posted
@ApplePieGiraffe Thank you very much, this is the only thing that I was missing. I am very glad and grateful that I asked you for help. Once again thanks.
1
@ApplePieGiraffe
Posted
@mohit1607
No problem! Glad to help!
0
@trafiki
Posted
Thanks!
1
@SarsiPC
Posted
Woah, This is the best solution for this challenge so far! Love the box animation & how you are able to scroll within the box.
Amazing, my friend! Just one more thing... fix the background :D
2
@ApplePieGiraffe
Posted
@SarsiPC
Hey, thanks for the feedback! π
I actually chose to have a different background than the design because I wanted the background to be animated. If you look closely, you should be able to see the color of the background gradually fade between blue and purple. π
3
@SarsiPC
Posted
@ApplePieGiraffe That's crazy! Good work!
3
Please log in to post a comment
Log in with GitHubJoin our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!