Design comparison
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!
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
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 helpful1 - @chukwudobe-MicahPosted about 2 years ago
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 helpful1@correlucasPosted almost 2 years ago@chukwudobe-Micah Its just a SVG image because I did only for design purposes, but I guess is more practical and correct as a button as you did it. I'll do it my friend. Keep it up =)
0 - @ThaBeanBoyPosted about 2 years ago
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 helpful1@correlucasPosted about 2 years ago@ThaBeanBoy Hey brother, thank you for the time spent writing this comment. The reduced motion is a media query that doesn't display motion/animation when set this on the browser, if you want you can copy my css reset that I took from Kevin Powell. To minify your code you can install the plugin in vscode and this will generate a copy with the code reduced and with a reduced file size or use an online tool to reduce the code, if write on google minifycss you’ll find a bunch in the results.
Keep it up =)
2 - @HinaSejaru124Posted about 2 years ago
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 helpful1@HinaSejaru124Posted about 2 years agoAnd equally the ID's are to be used uniquely for each element.But anyway good job
Marked as helpful0@correlucasPosted about 2 years ago@HinaSejaru124 Thank you! I'll fix that soon, I didn't paid attention for the
idissue, you're right.0 - @HinaSejaru124Posted about 2 years ago
@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 helpful0
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