Facebook style update status box with CSS3, HTML, Bootstrap and Jquery

We are all know facebook is greatest User friendly UI based website. So today we will have tutorial about creation of facebook like update status or share box.

Facebook style share or status update box with CSS3, HTML, Jquery and Twitter Bootstrap

Facebook style share or status update box with CSS3, HTML, Jquery and Twitter Bootstrap

This tutorial based on

  • CSS3 transitions (For arrow movement)
  • HTML
  • Bootstrap 3.0
  • Jquery

For icons, I have used font awesome.

Here is my CSS code:

I have used “arrow.png” for indicate the active state of selection which is similar to the facebook status box. Also i used bootstrap panel to represents the share textarea box.

HTML:

And used some Jquery code to fix the arrow position for active state.

Thanks…..
Demo and Download

Note:

Please don’t forget to share and subscribe to latest updates of the blog .

 

 

  • jhon

    ehe eso es mnda no puedo descargar perro desgraciado

  • FreshWebDev.Com

    thanks.. its cool..

    best regards
    http://freshwebdev.com

  • Sony Surahman

    thanks for tutorial .. its very help

  • http://ispmurah.com isp provider internet murah cepat bogor

    thx its help me alot to design my website….. http://ispmurah.com

  • Vũ Nguyên Việt Tiến

    thanks for tutorial
    its very helpful

  • achillealb

    24 hours has passed and I still get the error of not subscribed. My
    email is achille.alb@gmail.com. Please, I need download this Script.