ChatApp CSS Illustration (Vanilla CSS)
Solution retrospective
👾 Hello, Frontend Mentor coding community. This is my solution for the ChatApp CSS Illustration.
This challenge was really challenging! The hardest thing was the background svg images, I tried to create these gradient elements inside the css with content: ' ' and after/before but for a reason that I don't know a huge gap was created in the bottom. So I took the shortcut to finish the solution and I've exported the svg elements from Figma ❤ and placed it in the body as background-image. Then I add some animations and changed a bit the design.
🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 4 missing)! Gotta Catch ’Em All
Ill be happy to hear any feedback and advice!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdrianoEscarabote
fala lucas, tudo bom?
Cara fiquei pensando aqui e talvez poderiamos resolver o problema com o pseudo elemento no body, usando um
overflow-hiddenpara esconder o corpo da imagem a partir do momento que ela ultrapasse o tamanho do body! seria interessante testar, claro que usariamos umposition: relative;no body, e nos pseudos elementos absolute!espero ter contribuido para uma possivel solução!... 👍
Marked as helpful - @chukwudobe-Micah
Hey Lucas, is the arrow in the text area a button or it's just an SVG? I made mine a button. And also I'll appreciate if you can check my solution too and give a review, I'll appreciate it.
Marked as helpful - @ThaBeanBoy
Man, the background feels so alive, & the way the elements are loaded on the screen. This was really impressive in my opinion. hope you don't mind me digging through the code.
I'm curious what the '@media (prefers-reduced-motion:reduce)' does. I've seen this in a couple of places but I'm not really sure what it does. Thanks for any explanation from anyone.
I know this might be a rookie question, is the minified CSS file supposed to improve the loading speed of the site? How would I minify my own files?
All in all, this is a really beautiful site.
Marked as helpful - @HinaSejaru124
Actually, the 2 background objects don't fit well for large screens. In your CSS positioning, instead of using a fixed distance, I propose you to fix the distances according to percentages so as to make it a relatively absolute position according to big PC screens
Marked as helpful - @HinaSejaru124
@correlucas when seen on a phone the phone itself seems a little bit distorted e.g the speaker is left aligned the messages overflow I think for that you needed to define a fixed width for such elements so that it should be more ... Anyway I saw the improvements ... Passed from superb to exceptional
Marked as helpful - @jkellerman
One of the best ones i've seen, well done!
- @berksideDEV
Looking awesome!
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