ChatApp CSS Illustration (Vanilla CSS)

Community feedback

• 

  Adriano•38,250

  @AdrianoEscarabotePosted about 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-hidden para esconder o corpo da imagem a partir do momento que ela ultrapasse o tamanho do body! seria interessante testar, claro que usariamos um position: relative; no body, e nos pseudos elementos absolute!

  espero ter contribuido para uma possivel solução!... 👍

  Marked as helpful

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @AdrianoEscarabote Vou olhar aqui, valeu

  0
• 

  Chukwudobe Micah Chinedu•700

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

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 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
• 

  ThaBeanBoy•230

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

  1

  ---

  

  Lucas 👾•104,340

  @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
• 

  HinaSejaru124•310

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

  1

  ---

  

  HinaSejaru124•310

  @HinaSejaru124Posted about 2 years ago

  And equally the ID's are to be used uniquely for each element.But anyway good job

  Marked as helpful

  0

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @HinaSejaru124 Thank you! I'll fix that soon, I didn't paid attention for the id issue, you're right.

  0
• 

  HinaSejaru124•310

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

  0
• 

  Josh•560

  @jkellermanPosted about 2 years ago

  One of the best ones i've seen, well done!

  1

  ---

  

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  @jkellerman thank you Josh

  0
• 

  Berkay Gülcüler•260

  @berksideDEVPosted about 2 years ago

  Looking awesome!

  1