Widget SMS dengan CSS3

Suatu widget yang baru yang mana ini adalah suatu widget sms tapi disini dengan menggunakan CSS3 sehingga terlihat tampak menapjubkan tinggal kita surut aja maka terbukalah widget sms coba sorot contoh dibawah ini :

Desain Bloging

 Untuk membuatnya silakan copy code dibawah ini :



<style type="text/css">
.boxsmsluar2 {
        height:190px;
        width:274px;
        padding:5px;
        overflow:hidden;
        border:3px solid #999;
        border-radius:8px;
       -moz-border-radius:8px;
       -webkit-border-radius:8px;
       -o-transition:all 1.1s ease-out;
       -moz-transition:all 1.1s ease-out;
       -webkit-transition:all 1.1s ease-out;
        background:#555 url() top center no-repeat;
        background-position: 12px 92px; 
}
.boxsmsluar2:hover {
        height:380px;
        background:#CC9966 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgRasterBlackTransV8H8.png);
        border-color:#663300;
}
.boxsmsluar2 iframe {
        background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/bgsms2.jpg);
        border:2px solid #666; 
        border-radius:8px;
       -moz-border-radius:8px;
       -webkit-border-radius:8px;
}
.boxsmsluar2 .boxsmsdalam2{
        overflow:hidden;
        opacity:0.5;
        height:76px;
        margin:0; /* original code by:gubhugreyot.blogspot.com */
        padding:0;
        border-radius:8px;
       -moz-border-radius:8px;
       -webkit-border-radius:8px;
        box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;
       -moz-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;
       -webkit-box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;       
       -o-transition:all 1.8s ease-out;
       -moz-transition:all 1.8s ease-out;
       -webkit-transition:all 1.8s ease-out;
}
.boxsmsluar2:hover .boxsmsdalam2 {
        height:380px;
        opacity:1.0; /* original code by:gubhugreyot.blogspot.com */
       -o-transition:all 1.5s ease-in;
       -moz-transition:all 1.5s ease-in;
       -webkit-transition:all 1.5s ease-in;    
}
.boxsmsluar2 a {padding:2px 8px;margin:0 auto;display:block;text-align:center;font-family:Verdana;color:red;font-size:16px;font-weight:normal;text-shadow:1px 1px 1px #000;font-weight:bold;        border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;-o-transition:all 1.5s ease-in;-moz-transition:all 1.5s ease-in;-webkit-transition:all 1.5s ease-in;}
.boxsmsluar2 a:hover {color:blue;background:#999;width:150px;text-decoration:none;}
</style>
<div class="boxsmsluar2">
<div class="boxsmsdalam2">
<iframe height="320" name="I2" src="http://divasms.com/widget" width="270">&amp;lt;p&amp;gt;&amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;gt;not support &amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;gt;&amp;lt;/p&amp;gt;</iframe>
<a href="http://desain-bloging.blogspot.com/" target="_blank" title="Gratis... tis ... tis ...tis! Silahkan SMS sepuasnya!">Desain Bloging</a></div>
</div>

Selamat Mencoba