Create Cross-Browser Sticker-Like DIVs with CSS3

       11/28/2012        CSS , Web Designing

Create Cross-Browser Sticker-Like DIVs with CSS3
Stickers in web designing are items that appears like sticker on your website. Usually, this is placed to make something stand out like announcements, notifications etc.

Here is a method to create a sticker like wrapper for your divs and containers without using images.

Actual Demo


IMAGE LESS STICKER-LIKE CSS


CSS Code

.sticker{
 margin: 10px;
 padding:5px;
 color:#ffffff;
 background-color: red;
 border: 5px solid #ffffff;
 -webkit-box-shadow: 0 3px 5px #333;
 -moz-box-shadow: 0 3px 5px #333;
 box-shadow: 0 3px 5px #333;
 -webkit-border-radius: 500px;
 -moz-border-radius: 500px;
 border-radius: 500px;
 text-align:center;
 width:200px;
 font-family: fantasy;
 text-shadow:black 0.1em 0.1em 0.2em;
 /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#3333330')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#333333');
}

Now to use it, simply add sticker to your class like this:

<div class="sticker">
 STICKER CSS
</div>


No comments :

Post a Comment

Thanks for dropping by and I would really appreciate if you can drop some comments..

Social Connection


۞