CSS3 Shapes chat bubble

Circle symbol:

#circle{

                width: 200px;

                height: 200px;

                border-radius:50%;

                background:linear-gradient(top, #054d52 0%, #057178 100%);

               background:-webkit-linear-gradient(top, #054d52 0%,#057178 100%);

                       background: -moz-linear-gradient(top, #054d52 0%, #057178 100%);

                background: -ms-linear-gradient(top, #054d52 0%, #057178 100%);

                 background: -o-linear-gradient(top, #054d52 0%, #057178 100%);

            }

<div id="circle">

        </div>

Chat bubble symbol:

#chat-symbol{

                width: 100px;

                height: 80px;

                background:  #054d52;

                position: relative;

                border-radius:8px;

            }

            #chat-symbol:before{               

                content: "";

                position: absolute;

                left:  100%;

                top: 26px;

                border-top: 13px solid transparent;

                border-left:  26px solid #054d52;

                border-bottom: 13px solid transparent;

            }

<div id="chat-symbol">           

        </div>

---

CSS3 Search Shape

CSS Shapes:

Search Symbol: 

 /*Circle syles*/

#search  {                              

                                 border: 5px solid #56276a; /*circle border and color*/

                                 border-radius:50%; /*circle border radius*/

                                 width: 50px; /*circle width*/

                                 height: 50px;  /*circle height*/

                                 position: relative; /*circle position*/

                             }

/*circle handle styles*/

                             #search:before{

                                 content: "";

                                 width: 5px;

                                 height: 40px;

                                 background:#56276a;

                                 position: absolute;

                                 right: -7px;  /* line right */

                                 bottom: -30px; /* line bottom */

                                transform: rotate(145deg);  /* line rotation */

                                 -webkit-transform: rotate(145deg);

                                 -moz-transform: rotate(145deg);

                                 -ms-transform: rotate(145deg);

                                 -o-transform: rotate(145deg);

                             }

<div id="search">            

         </div>

"Before" and "After" Selectors in CSS3

"Before" and "After" Selectors in CSS3

 <style>
p::before
{
content:"I am Narendar:-";
background-color:#FFFF66;
color:red;
font-weight:bold;
}
</style>
<p>this is before selector</p>

<style>
p::after
{
content:"I am Narendar:-";
background-color:#FFFF66;
color:red;
font-weight:bold;
}
</style>

<p>this is after selector</p>

this is before selector

this is after selector

CSS3 DropDown Menu Example

I explained here dropdown menu example, here I added some more CSS properties then               previous dropdown menu.(click here to see) 

I used simple and less CSS properties same as previous examples. I am posting this example materials for beginners, I hope they can learn easily by using this examples.

CSS Properties:

<style>

                ul.menu_nav{

                width: 660px; /*menu navigation width*/

                border: 2px solid  #999;

                border-radius:5px;

                background: linear-gradient(left,orangered 10%,#FFF 50%,green 110%);

                 background: -moz-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*mozilla firefox*/

                 background: -webkit-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*googlechrome*/

                 background: -o-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*opera*/           

                         background: -ms-linear-gradient(left,orangered 10%,#FFF 50%,green 110%);/*ie*/

  }

            ul.menu_nav li{

                display:inline;               

                list-style: none;               

                position: relative;               

            }

            ul.menu_nav li a{

                text-decoration: none;

                color: #FFF;

                font-family: 'Segoe UI',Arial,sans-serif;

                font-size: 16px;

                font-weight:  bold;

                padding: 10px 15px;

                display: inline-block;

            }

           ul.menu_nav a:hover{

                background:  #999;

                color: #8fde62;              

            }

/*drop down menu styles*/

           ul.menu_nav li ul,ul.menu_nav ul{

                visibility: hidden;

                opacity:0;

                list-style: none;

                position: absolute;

                background: #FFF;

                left: 0;

                margin: 0px;

                padding: 0px;

                border-radius:5px;

                box-shadow:0px 5px 5px 5px #e3e2e2;              

     }

/*   dropdown box tail  (it indicates that dropdown box belongs to main menu button)*/

           ul.menu_nav ul:before{

               content: "";

                position: absolute;

                bottom:   100%;

                left:   26px;

                border-right: 8px solid transparent;

                border-left:  8px solid transparent;

                border-bottom: 15px solid #FFF;

          }

            ul.menu_nav ul li{

                clear: both;

                width: 100%;               

                padding: 0px;

                background: #FFF;

                border: 0px none;

                     }

            ul.menu_nav ul li a{

                clear: both;

                display:inline-block;

                width:120px;

                font-family: 'Segoe UI',Arial,sans-serif;

                font-size: 14px;

                color:  #6a6868;

                border: 0px none;

            }

            ul.menu_nav li:hover>ul{

                visibility:  visible;

                opacity:1;

            }

/*  dropdown box first and last buttons margin size – it shows the gap between buttons and box top, bottom borders */

            ul.menu_nav ul li a.first{

               margin-top: 5px;

            }

            ul.menu_nav ul li a.last{

               margin-bottom: 5px;

            }

            ul.menu_nav ul li a:hover{

                 background-color: #0081C2;

            }

/*   dropdown image – it indicates that main button having sub buttons*/

            .down{

                width: 10px;

                height: 5px;

                margin-left: 3px;

            }

        </style>

HTML File:

<ul class="menu_nav">

            <li><a href="">Home</a></li>

            <li><a href="">Materials<img src="down.gif" class="down"/></a>

                 <ul>                    

                         <li><a href=""class="first">Groups</a></li>

                         <li><a href="">Civil</a></li>

                        <li><a href="">Bank Clerk/PO&apos;s</a></li>

                        <li><a href=""class="last">RRB</a></li>                    

                 </ul>            

             </li>

              <li><a href="">Notifications<img src="down.gif" class="down"/></a>

                   <ul>                    

                         <li><a href=""class="first">Exam Reminder</a></li>

                         <li><a href="">Notifications</a></li>

                         <li><a href=""class="last">Guide Articles</a></li>                    

                 </ul>                 

              </li>

               <li><a href="">About Us</a></li>

                <li><a href="">Contact Us</a></li>

        </ul>

• Home
• Materials
  • Groups
  • Civil
  • Bank Clerk/PO's
  • RRB
• Notifications
  • Exam Reminder
  • Notifications
  • Guide Articles
• About Us
• Contact Us