Skip to content
Submitted about 4 years ago

Chat App CSS Illustration With Messaging Animation

ApplePieGiraffe•30,545
@ApplePieGiraffe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Chat app CSS illustration
  • HTML
  • CSS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hey, everybody! 👋

This was a very fun challenge from which I learned to carefully think about how I markup things in HTML and position them in CSS. 🤔

I borrowed some animations from Animate.css and played around with the animation-duration property to create a messaging animation in the phone (which I really think adds some life to the page). 🎉

I'm also rather pleased that my code didn't end up too messy or disorganized after attempting a CSS illustration like this. 😉

As always, feedback is on both my solution and my code is both welcome and greatly appreciated! 👍

Happy coding! 😄

Community feedback

  • karenefereyan•375
    @karenefereyanPosted over 3 years ago

    This Animation looks nice. I should practice adding animations more to my projects

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @karenefereyan

    Thanks! 😀 Definitely give animations a go! They are lots of fun! 👍

    0
  • Dawid•440
    @dwddgszPosted about 4 years ago

    Hello!

    Really like those animations, they are simple and cool. I didn't know about Animatie.css so I'll check this out.

    I would also add some pulse effect to this input, but maybe it would be too much.

    Anyway, good job

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @dwddgsz

    Thank you very much!

    0
  • Matt Studdert•13,611
    @mattstuddertPosted about 4 years ago

    Another great solution, ApplePieGiraffe! 🙌

    I like that you played around with Animate.css to add in those animations. It's a great little animation library! As you mentioned, your code is well organised and the end product looks great.

    Keep it up! 👍

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted about 4 years ago

    @mattstuddert

    Thank you very much!

    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