Posted by on 11/28/2012
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