Membuat Banner Keren Dengan CSS

Membuat Banner Keren Dengan CSS | Siapa sangka, CSS bisa dipakai untuk membuat banner. Nah, baru saja dari asisten saya, Dreamweaver CS6. "Design di Corel atau Photoshop, upload di images hosting, dah selesai, permasalahan"...Ya. CSS untuk Style, berarti anda bisa merubah bentuk dan ukuran dengan mudah dan tidak ada yang salah. Itu menurut saya...Jadi silakan yang mau pakai.

CSS, Cool Banner With CSS

 <style type="text/css">   
            .pesan{
                padding-top: 10px;
                font-size: 36px;
                padding:0px;
                margin: 0px;
                line-height:100px;
                text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
                width:310px;
                float:left;
            }
            .slogan{
                float: right;
                margin:75px 20px 0px 0px;
                font-size: 20px;
            }
            .wammy{
                width:620px;
                height: 100px;
                margin:7px auto;
                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                padding-left:190px;
            }
           .banner0{
                color:#6e9cf9;
                background: #FF0 url(http://s20.postimg.org/58r4plwk9/ban1.png) no-repeat center left;
                 font-family:"Coda"; 
                font-style: italic;
            }
            .banner1{
                color:#FFF;
                background: #000 url(http://s20.postimg.org/lesj9d82h/image.png) no-repeat center left;
                font-family: "Coda"; 
            }
        </style>

HTML, Cool Banner With CSS

<div class="wammy banner0">
            <div class="pesan">Tralala Trilili</div>
            <div class="slogan">Wammy's Blog</div>
        </div>
        <div class="wammy banner1">
            <div class="pesan">Sleketep tep</div>
            <div class="slogan">www.bocahit.com</div>
        </div>

width : lebar banner, atur banner sesuai kebutuhaan
height : tinggi banner

Menambah Banner, Cool Banner With CSS

Anda tinggal menambah kode CSS

.banner5{
                color:#37535B;
                background: #C6CC10 url(url banner) no-repeat center left;
                font-family: "Trebuchet MS";
            } 

Dan HTML

 <div class="wammy banner5">
            <div class="pesan">Pesan</div>
            <div class="slogan">Slogan</div>
        </div>

Jika anda ingin memberi link :

<div class="wammy banner1">
            <div class="pesan"><a href="http://www.bocahit.com/">Wammy San</a></div>
            <div class="slogan">www.bocahit.com</div>
        </div>

ILUSTRASI