آموزش طراحی بنر با css

سلام

در این پست میخوایم با هم چند تا بنر css درست کنیم که بتونیم خیلی راحت هرجا از سایت خواستیم بتونیم ازشون استفاده کنیم ، فایده ای این نوع بنر ها حجم فوق العاده کم و میشه گفت زیبایی خاصشون هست که میتونید به دلخواه ویرایش و ازشون استفاده کنید .

نمونه بنر :

کدهای CSS :

<style type="text/css">		
			body{
				background-color:khaki;
			}
            h1{
                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:67px 20px 0px 0px;
                font-size: 20px;
				font-family: 'BYekan';
            }
            .banner{
                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{
                background: #656964 url(banner0.png) no-repeat center left;
            }
            .banner1{
                color:#37535B;
                background: #31B3DA url(banner1.png) no-repeat center left;
                font-family: "Arial Narrow"; 
            }
            .banner2{
                color:#656A64;
                background: #81C573 url(banner2.png) no-repeat center left;
                font-family: "Palatino Linotype"; 
            }
            .banner3{
                color:#37535B;
                background: #656964 url(banner3.png) no-repeat center left;
                font-family: "Arial Narrow"; 
            }
            .banner4{
                color:#2B8EAC;
                background: #656964 url(banner4.png) no-repeat center left;
                font-family: "Century Gothic"; 
            }
            .banner5{
                color:#37535B;
                background: #C6CC10 url(banner5.png) no-repeat center left;
                font-family: "Trebuchet MS";
            }
            .banner6{
                color:#37535B;
                background: #b8d8fb url(banner6.png) no-repeat center left;
                font-family: "Arial Narrow"; 
                text-transform: uppercase;
                letter-spacing: 4px;
            }
            .banner7{
                color:#6e9cf9;
                background: #a08c60 url(banner7.png) no-repeat center left;
                font-family: "Arial Narrow"; 
                font-style: italic;
            }
</style>

کدهای HTML :

<div class="banner banner1">
				<h1>Beporsam</h1>
				<div class="slogan">متفاوت ترین سیستم پرسش و پاسخ</div>
			</div>
			<div class="banner banner2">
				<h1>www.beporsam.ir</h1>
				<div class="slogan">مکانی برای آموزش و رفع مشکلات</div>
			</div>
			<div class="banner banner4">
				<h1>fadev.ir</h1>
				<div class="slogan">طراح و برنامه نویس وب</div>
			</div>
			<div class="banner banner5">
				<h1>@beporsam</h1>
				<div class="slogan">ایدی بپرسم در شبکه های اجتماعی</div>
			</div>
			<div class="banner banner6">
				<h1>beporsam@gmail.com</h1>
				<div class="slogan">ایمیل بپرسم</div>
			</div>
			<div class="banner banner7">
				<h1>Beporsam</h1>
				<div class="slogan">wwww.beporsam.ir</div>
</div>

برای دانلود عکس های بکار رفته در سورس ، درپایان همین پست سورس کامل رو میزارم که میتونید دانلود کنید .

موفق باشید .