Sign Up

Captcha Click on image to update the captcha.

Have an account? Sign In Now

Sign In

Captcha Click on image to update the captcha.

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Captcha Click on image to update the captcha.

Have an account? Sign In Now

You must login to ask question.

Captcha Click on image to update the captcha.

Forgot Password?

Need An Account, Sign Up Here
Sign InSign Up

اسکیتو

اسکیتو
Search
سوالی بپرسید

Mobile menu

بستن
سوالی بپرسید

به اشتراک بذارید و دانش جهان را افزایش دهید!

ما می خواهیم افرادی را که دارای دانش هستند به افرادی که به آن نیاز دارند متصل کنیم ، افرادی را با دیدگاه های مختلف گرد هم آوریم تا بتوانند یکدیگر را بهتر درک کنند و همه را در به اشتراک گذاری دانش خود توانمند کنیم.

Create A New Account
Home/ Questions/Q 43
Next
Answered
ناشناس
ناشناس
پرسید: ۱۴۰۰/۰۷/۲۶۱۴۰۰/۷/۲۶ ۱۰:۵۱:۱۲ ۱۴۰۰/۷/۲۶ ۱۰:۵۱:۱۲در: CSS

چطور روی پس زمینه gradient یک المان، transition اعمال کنم؟

سلام دوستان. من یک المان توی صفحه وبم دارم که میخوام وقتی روش hover شد یک پس زمینه gradient روش اعمال بشه ولی هرکار میکنم اعمال نمیشه.اگر میشه لطفا راهنماییم کنید.ممنون.

 

کد CSS من:

.FeatureRow a{
    padding: 10px;
    display: block;
    width: 260px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0px 4px 8px #f5f5f5;
    background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
    background-repeat: repeat-x;
    transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
    background-image: linear-gradient(to bottom,#C00,#C0F);
}

 

background gradienttransition in css
  • 1
  • 1
  • 46
  • 0
  • 0
پاسخ
Share
  • Facebook

    سوالات مرتبط

    • چطور در css یک عکس رو وسط المان نشون بدم؟
    • ساخت متن به صورت حلقه ای در html

    1 پاسخ

    • رای
    • قدیمی ترین
    • اخیر
    1. بهترین پاسخ
      omoghadasi
      ۱۴۰۰/۷/۲۶ ۱۹:۵۳:۱۹Added an answer on ۱۴۰۰/۰۷/۲۶ at ۱۶:۰۷
      This answer was edited.

      سلام خدمت شما دوست عزیز!

      اگه شما بیای و از gradients برای پس زمینه یک عنصر استفاده کنی اونوقت دیگه نمیتونی از طریق transition اون رو تغییر بدی و برای این کار میتونی از opacity استفاد کنی و اون رو شبیه سازی کنی. میتونی کدت رو به صورت زیر اصلاح کنی.

       

      .FeatureRow {
          padding: 10px;
          display: block;
          position: relative;
          width: 260px;
          height: 70px;
          border-radius: 5px;
          background-image: linear-gradient(0deg,white,gray);
      }
      
      .FeatureRow:after {
          content: '';
          position: absolute;
          left: 0px;
          top: 0px;
          right: 0px;
          bottom: 0px;
          background-image: linear-gradient(0deg,red,magenta);
          opacity: 0;
          transition: all 3s ease-in-out;
      }
      
      .FeatureRow:hover:after {
          opacity: 1;
      }

       

      میتونی اینجا هم پیشنمایشش رو ببینی

      • 1
      • Reply
      • اشتراک گذاری
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp

    یک جواب بگذارید
    لغو پاسخ

    You must login to add an answer.

    Captcha Click on image to update the captcha.

    Forgot Password?

    Need An Account, Sign Up Here

    Sidebar

    Ask A Question

    Stats

    • Questions 9
    • Answers 8
    • Posts 0
    • Comments 0
    • Best Answers 7
    • Users 3

    کاربران

    imomid

    imomid

    • 0 Questions
    • 0 Answers
    fatehiali

    fatehiali

    • 0 Questions
    • 1 Answer
    omoghadasi

    omoghadasi

    • 2 Questions
    • 7 Answers

    Explore

    • آخرین سوالات
    • بیشترین پاسخ
    • پاسخ ها
    • بی پاسخ ها
    • بیشترین بازدید
    • بیشترین رای
    • تصادفی

    Footer

    © 2021 Discy. All Rights Reserved
    With Love by imomid.

    درج/ویرایش پیوند

    نشانی مقصد را وارد نمایید

    یا پیوند به محتوای موجود

      معیاری برای جستجو مشخص نشده است. نمایش دادن آخرین موارد. جستجو کنید یا برای انتخاب موارد، از کلیدهای جهت بالا و پایین استفاده کنید.