آموزش طراحی بنر با css
سلام
در این پست میخوایم با هم چند تا بنر css درست کنیم که بتونیم خیلی راحت هرجا از سایت خواستیم بتونیم ازشون استفاده کنیم ، فایده ای این نوع بنر ها حجم فوق العاده کم و میشه گفت زیبایی خاصشون هست که میتونید به دلخواه ویرایش و ازشون استفاده کنید .
نمونه بنر :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ |
<style type="text/css"> 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> |
برای دانلود عکس های بکار رفته در سورس ، درپایان همین پست سورس کامل رو میزارم که میتونید دانلود کنید .
موفق باشید .
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید