/ استایل جالب برای دکمه ها و یا باکس ها (بدون استفاده از عکس) 2
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
نمایش نتایج: از 1 به 1 از 1

موضوع: استایل جالب برای دکمه ها و یا باکس ها (بدون استفاده از عکس) 2

  1. #1
    MR.CSS آنلاین نیست.
    MR.CSS
    کاربر سايت
    625نوشته505مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    115
    پسندیده است
    697 پست
    بلاگ
    9 پست
    میزان امتیاز
    515
    www.euro-design.ir

    استایل جالب برای دکمه ها و یا باکس ها (بدون استفاده از عکس) 2

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    این استایل (style) زیبا به باکس یا دکمه ها و ... شما رنگ و جلای خاصی می بخشد.

    این کد با استفاده از سی اس اس (CSS) ساخته شده است و در آن هیچ عکسی به کار نرفته است.
    این استایل در کد های css استفاده می شود و کسی که کدنویسی را کمی بلد باشد می تواند به راحتی از آن استفاده کند.
    شما برای استفاده از این کد می بایست اول کد زیر را در head قالب خود قرار دهید (و یا این که آن را به صورت کد css در فایل css بگذارید):

    کد HTML:
    <style>
    .moisrex-btn1{
        color:#fff;
        background:#4cf;
        background:-o-linear-gradient(top, #4cf 0%, #2ae 100%);
        background:-webkit-linear-gradient(top, #4cf 0%, #2ae 100%);
        background:-ms-linear-gradient(top, #4cf 0%, #2ae 100%);
        background:-moz-linear-gradient(top, #4cf 0%, #2ae 100%);
        background:linear-gradient(to bottom, #4cf 0%, #2ae 100%);
        text-shadow:#29a3cc 0 1px 3px;
        -moz-text-shadow:#29a3cc 0 1px 3px;
        -o-text-shadow:#29a3cc 0 1px 3px;
        -webkit-text-shadow: #29a3cc 0 1px 3px;
        -khtml-text-shadow: #29a3cc 0 1px 3px;
        -webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
        -moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
        -ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
        -o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
        box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
        -khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
        border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        -khtml-border-radius:5px;
        border:1px #ccc solid;
        padding:5px;
        margin:3px;
        font:12px tahoma;
        direction:rtl;
    }
    </style>


    و بعد برای هر باکس یا دکمه یا ... ای که می خواهید این استایل را داشته باشد از class (کلاس) moisrex-btn1 استفاده کنید:
    <button class="moisrex-btn1"> کدستان </button>
    برای استفاده این استایل در فایل css صفحه خود می توانید از کد زیر که در واقع همان کد بالاست کمک بگیرید:


    کد HTML:
    .moisrex-btn1{
    	    color:#fff;
    	    background:#4cf;
    	    background:-o-linear-gradient(top, #4cf 0%, #2ae 100%);
    	    background:-webkit-linear-gradient(top, #4cf 0%, #2ae 100%);
    	    background:-ms-linear-gradient(top, #4cf 0%, #2ae 100%);
    	    background:-moz-linear-gradient(top, #4cf 0%, #2ae 100%);
    	    background:linear-gradient(to bottom, #4cf 0%, #2ae 100%);
    	    text-shadow:#29a3cc 0 1px 3px;
    	    -moz-text-shadow:#29a3cc 0 1px 3px;
    	    -o-text-shadow:#29a3cc 0 1px 3px;
    	    -webkit-text-shadow:#29a3cc 0 1px 3px;
    	    -khtml-text-shadow:#29a3cc 0 1px 3px;
    	    -webkit-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
    	    -moz-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
    	    -ms-box-shodow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
    	    -o-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
    	    box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
    	    -khtml-box-shadow:inset 0 1px 0 #3bf,inset 0 2px 0 #7df,0 1px 3px #777,0 0px 1px #ccc;
    	    border-radius:5px;
    	    -moz-border-radius:5px;
    	    -ms-border-radius:5px;
    	    -webkit-border-radius:5px;
    	    -o-border-radius:5px;
    	    -khtml-border-radius:5px;
    	    border:1px #ccc solid;
    	    padding:5px;
    	    margin:3px;
    	    font:12px tahoma;
    	    direction:rtl;
    	}

    تشکر یادت نره!!!

    منبع:
    mosirex

    3 نفر از اعضا پست MR.CSS را پسندیده اند



  2. نوين وردپرس تبلیغات شما

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی