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

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آموزش طراحی بنر با 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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

۴۱

۴۲

۴۳

۴۴

۴۵

۴۶

۴۷

۴۸

۴۹

۵۰

۵۱

۵۲

۵۳

۵۴

۵۵

۵۶

۵۷

۵۸

۵۹

۶۰

۶۱

۶۲

۶۳

۶۴

۶۵

۶۶

۶۷

۶۸

۶۹

۷۰

۷۱

۷۲

body{

background-color:khaki;

}

h1{

padding-top: ۱۰px;

font-size: ۳۶px;

padding:0px;

margin: 0px;

line-height:۱۰۰px;

text-shadow: ۰ -۱px ۱px rgba(۰,۰,۰,۰.۲۵);

width:۳۱۰px;

float:left;

}

.slogan{

float: right;

margin:۶۷px ۲۰px 0px 0px;

font-size: ۲۰px;

font-family: 'BYekan';

}

.banner{

width:۶۲۰px;

height: ۱۰۰px;

margin:۷px auto;

-moz-box-shadow: ۰ ۱px ۳px rgba(۰,۰,۰,۰.۵);

-webkit-box-shadow: ۰ ۱px ۳px rgba(۰,۰,۰,۰.۵);

-moz-border-radius: ۱۵px;

-webkit-border-radius: ۱۵px;

padding-left:۱۹۰px;

}

.banner0{

background: #۶۵۶۹۶۴ url(banner0.png) no-repeat center left;

}

.banner1{

color:#۳۷۵۳۵B;

background: #۳۱B3DA url(banner1.png) no-repeat center left;

font-family: "Arial Narrow";

}

.banner2{

color:#۶۵۶A64;

background: #۸۱C573 url(banner2.png) no-repeat center left;

font-family: "Palatino Linotype";

}

.banner3{

color:#۳۷۵۳۵B;

background: #۶۵۶۹۶۴ url(banner3.png) no-repeat center left;

font-family: "Arial Narrow";

}

.banner4{

color:#۲B8EAC;

background: #۶۵۶۹۶۴ url(banner4.png) no-repeat center left;

font-family: "Century Gothic";

}

.banner5{

color:#۳۷۵۳۵B;

background: #C6CC10 url(banner5.png) no-repeat center left;

font-family: "Trebuchet MS";

}

.banner6{

color:#۳۷۵۳۵B;

background: #b8d8fb url(banner6.png) no-repeat center left;

font-family: "Arial Narrow";

text-transform: uppercase;

letter-spacing: ۴px;

}

.banner7{

color:#۶e9cf9;

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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

<h1>Beporsam</h1>

<div class="slogan">متفاوت ترین سیستم پرسش و پاسخ</div>

</div>

<h1>www.beporsam.ir</h1>

<div class="slogan">مکانی برای آموزش و رفع مشکلات</div>

</div>

<h1>fadev.ir</h1>

<div class="slogan">طراح و برنامه نویس وب</div>

</div>

<h1>@beporsam</h1>

<div class="slogan">ایدی بپرسم در شبکه های اجتماعی</div>

</div>

<h1>beporsam@gmail.com</h1>

<div class="slogan">ایمیل بپرسم</div>

</div>

<h1>Beporsam</h1>

<div class="slogan">wwww.beporsam.ir</div>

</div>

مطلب پیشنهادی: آموزش Corel Video Studio - قسمت پنجم(افکت ها)

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

موفق باشید .