Alireza Xn

مشکل با عنصر transition در گرادینت ها

2 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

من یه مشکلی که توی عنصر transition دارم اینکه این عنصر برای گرادینت ها کار نمیکنه !

ایا برای هاور کردن تاخیری گرادینت ها از عنصر دیگه ایی اضافه میشه یا المانت خاصی داره ؟؟

الان این کد برای گرادینت ها کار نمیکنه و transition جواب نمیده ...


.more{
background: rgb(73,155,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,155,234,1)), color-stop(100%,rgba(32,124,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%,rgba(32,124,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 ); /* IE6-9 */
border:2px solid #f4f2f2;
border-radius:5px;
color:#fff;
font-family:'BKoodakBold';
font-size:14px;
padding:5px 10px;
text-align:center;
width:50px;

-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;

}




.more:hover{
background: rgb(99,182,219); /* Old browsers */
background: -moz-linear-gradient(top, rgba(99,182,219,1) 0%, rgba(48,157,207,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(99,182,219,1)), color-stop(100%,rgba(48,157,207,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(99,182,219,1) 0%,rgba(48,157,207,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63b6db', endColorstr='#309dcf',GradientType=0 ); /* IE6-9 */

-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;

}

ویرایش شده در توسط RapiD AM
0

به اشتراک گذاری این پست


لینک به پست

گرادنیت درسته که با ترکیب رنگها درست می شه ولی در واقع تصویر پس زمینه است برای تغییر زمان دارش یا باید از جی کوئری و تابع animate استفاده کنید یا باید با استفاده از سایز زمینه بهش حرکت بدید


.class {
background-size: 100% 200%;
background-position:left 0%;
}
.class:hover {
background-position:left 50%;
}

3

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری