آیا میدانید شما میتوانید به صورت "کاملا رایگان" سایت ، محصول خدمات و... خود را در پی سی وب معرفی کنید ؟

فرصت را از دست ندهید
انجمن مه سفر
نمایش نتایج: از 1 به 1 از 1

موضوع: آموزش css - گرادیانت بک گراند زیبا

  1. Ahmadreza آواتار ها
    Ahmadreza
    پاسخگو و راهنما
    Oct 2015
    1,668
    1774
    1,434
    1,761
    71

    آموزش css - گرادیانت بک گراند زیبا

    آموزش CSS - گرادیانت بک گراند زیبا


    سلام;


    در سی اس اس (CSS) میشه به شیوه های مختلفی بک گراند رو اعال کرد مثل:



    نوع دیگه ای از بک گراند، گرادیانت هست که از ترکیب چند رنگ مختلف تشکیل میشه.
    همونطور که در شکل اول میبینید و با شماره های 1 و 2 و 3 مشخص شده، یک رنگ سیاه و یک رنگ آبی یا قرمز یا سبز هست؛ که البته دو رنگ سیاه وجود داره !

    برای استفاده از این شیوه رنگ آمیزی در CSS از کدهای زیر میتونید استفاده کنید:


    کد:
    background: linear-gradient(135deg,rgba(54,61,68,1) 49%,rgb(44, 168, 227) 50%,rgba(39,39,39,1) 50%);



    rgba(39,39,39,1) = رنگ سیاه
    rgba(54,61,68,1) = رنگ سیاه
    rgb(44, 168, 227) 50%, = رنگ آبی (عکس شماره 3)

    برای اینکه توی مرورگر های با موتور کرومیوم هم کار کنه در کنارش از webkit استفاده می کنیم:
    کد:
    background: -webkit-linear-gradient(-45deg,rgba(54,61,68,1) 49%,rgb(44, 168, 227) 50%,rgba(39,39,39,1) 50%);

    در مرورگر های با موتتور فایر فاکس از moz استفاده می کنیم:
    کد:
        background: -moz-linear-gradient(-45deg,rgba(54,61,68,1) 49%,rgba(243,52,52,1) 50%,rgba(39,39,39,1) 50%);

    و توی اینترنت اکسپلورر های قدیمی از بک گراند خالی استفاده می کنیم:
    کد:
        background: #363d44;

    همه این ها در کنار هم + یک فیلتر بک گراند که می خواهیم رو میسازه:

    فیلتر:
    کد:
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363d44',endColorstr='#272727',GradientType=1);
    کد نهایی:
    کد:
        background: #363d44;
        background: -moz-linear-gradient(-45deg,rgba(54,61,68,1) 49%,rgba(243,52,52,1) 50%,rgba(39,39,39,1) 50%);
        background: -webkit-linear-gradient(-45deg,rgba(54,61,68,1) 49%,rgb(44, 168, 227) 50%,rgba(39,39,39,1) 50%);
        background: linear-gradient(135deg,rgba(54,61,68,1) 49%,rgb(44, 168, 227) 50%,rgba(39,39,39,1) 50%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#363d44',endColorstr='#272727',GradientType=1);

    ویرایش توسط Ahmadreza : 10-06-2016 در ساعت 09:16 AM



    #1 ارسال شده در تاريخ 10-06-2016 در ساعت 09:13 AM

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

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

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

مجوز های ارسال و ویرایش

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

Designed With Cooperation

Of Creatively