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

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

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

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

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

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

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

    شما برای استفاده از این کد می بایست اول کد زیر را در head قالب خود قرار دهید (و یا این که آن را به صورت کد css در فایل css بگذارید):
    کد HTML:
    <style>
    .moisrex-btn2{
    
        background: #cb60b3;
        background: 
    url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NiNjBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxNDZhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2E4MDA3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYjM2YTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    
    
        background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 
    51%, #db36a4 100%);
        background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#cb60b3), color-stop(50%,#c146a1), 
    color-stop(51%,#a80077), color-stop(100%,#db36a4));
        background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077
     51%,#db36a4 100%);
        background: -o-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 
    51%,#db36a4 100%);
        background: -ms-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 
    51%,#db36a4 100%);
        background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 
    51%,#db36a4 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 );
        box-shadow:0 0 0 1px #000;
        -moz-box-shadow:0 0 0 1px #000;
        -o-box-shadow:0 0 0 1px #000;
        -ms-box-shadow:0 0 0 1px #000;
        -webkit-box-shadow:0 0 0 1px #000;
        -khtml-box-shadow:0 0 0 1px #000;
        color:#fff;
        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 #fff solid;
        padding:5px;
        margin:3px;
        font:12px tahoma;
        direction:rtl;
    }
    </style>



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


    کد HTML:
         .moisrex-btn2{
            background: #cb60b3;
             background:   url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NiNjBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxNDZhMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2E4MDA3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYjM2YTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
             background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
            background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3),  color-stop(50%,#c146a1), color-stop(51%,#a80077),  color-stop(100%,#db36a4));
             background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
            background: -o-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
             background: -ms-linear-gradient(top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
            background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 );
            box-shadow:0 0 0 1px #000;
             -moz-box-shadow:0 0 0 1px #000;
            -o-box-shadow:0 0 0 1px #000;
            -ms-box-shadow:0 0 0 1px #000;
             -webkit-box-shadow:0 0 0 1px #000;
            -khtml-box-shadow:0 0 0 1px #000;
            color:#fff;
             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 #fff solid;
            padding:5px;
             margin:3px;
            font:12px tahoma;
             direction:rtl;
        }


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

    منبع:
    mosirex

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



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

  3. #2
    AmirHoss3in آنلاین نیست.
    AmirHoss3in
    مدير بازنشسته
    945نوشته1,402مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    90
    پسندیده است
    672 پست
    بلاگ
    2 پست
    میزان امتیاز
    1413
    www.webmasterpro.ir
    درود
    جای مناسبی تاپیک نزدید این تاپیک باید در بخش css باشه و برای معرفی کلاس ها هم بهتره توی additional.css باشه نه تو هدر !

    کاربر زیر پست AmirHoss3in را پسندیده است:


    ? should write somethin

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

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    115
    پسندیده است
    697 پست
    بلاگ
    9 پست
    میزان امتیاز
    515
    www.euro-design.ir
    نقل قول نوشته اصلی توسط lvlr.AlvlIr نمایش پست ها
    درود
    جای مناسبی تاپیک نزدید این تاپیک باید در بخش css باشه و برای معرفی کلاس ها هم بهتره توی additional.css باشه نه تو هدر !
    دوست عزیز
    اون قسمت نوشته آموزش css نه کد های css در ضمن اگر لازم باشه مدیر جابه جا می کنند

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

    کاربر زیر پست MR.CSS را پسندیده است:



  5. #4
    WikiVB آنلاین نیست.
    WikiVB
    مديريت کل انجمن
    5,839نوشته26,610مورد پسند

    تاریخ عضویت
    Oct 2012
    شماره عضویت
    1
    پسندیده است
    8,003 پست
    بلاگ
    0 پست
    میزان امتیاز
    26487
    wikivb.ir
    این هم نوعی آموزش css هست بنابر این به بخش مربوط به خودش انتقال دادم .
    آموزش جالبی بود کلا طراحی با css خیلی مفیده و به طراحان استایل پیشنهاد میکنم تا جایی که ممکنه کم تصویر استفاده کنن .
    پیروز باشید

    4 نفر از اعضا پست WikiVB را پسندیده اند



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

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

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

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

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

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