Skip to content
Submitted about 2 years ago

Chat app CSS illustration with animation

animation
Satyapriya Mahato•400
@SatyapriyaMahato
A solution to the Chat app CSS illustration challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It was quite an easy and fun project, Found little difficult to make it mobile responsive and work with the positions and z - index. I am unsure about the animation part, if can be done in a better way, it would be very helpful.

Code

Please log in to post a comment

Log in

Community feedback

  • Tushar Biswas•4,060
    @itush

    Congratulations on completing the challenge! 🎉

    It is important to correctly understand CSS Position property to render HTML elements as per the requirement. I also faced difficulties with position property in my initial projects. Please note:

    • By default, all HTML elements are static (non-positioned elements).

    • By using top, right, bottom, left we can control the final location of an HTML element.

    • Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.

    • So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

    You may checkout the following👇 where I discuss about css position, z-index, box-model, Media Queries, Mobile-First Workflow etc. in a simple way.

    12 important CSS topics

    CSS Position Property in Hindi

    Hope this helps.

    Once again you have done a wonderful job.🚀The animation looks nice to me...

    Keep at it...💻 Happy hacking!

    Marked as helpful

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