css transition and linear gradients

Mutikasa · Dec 21, 2012

hi, i have two questions:
1. I have this code

Code:

    -webkit-transition: all 0.218s;
    -moz-transition: all 0.218s;
    -ms-transition: all 0.218s;
    -o-transition: all 0.218s;
    transition: all 0.218s;

for button. On the :hover button changes color, but changing seconds here doesn't affect anything. Button changes color as fast as the light. Why is that?

2. for gradients i have

Code:

    background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);

the first line is confusing me. Why only webkit? Does it do same thing as every other line?

thanks

jazzc · Dec 21, 2012

Because linear-gradient is not supported by all browsers yet but each one supports their own version. Think of them like beta functionality the browsers are supporting until they fully support the HTML5 spec (which was only very recently finalized).

So, to make sure it works everywhere, you put all versions.

LongBanana · Dec 21, 2012

Different browsers have their own way of handling the css3 concepts. They all essentially do the same thing, but it's handled differently and supported differently by each browser.
-webkit- = Safari, Chrome, and other webkit-based browsers
-moz- = Mozilla
-ms- = IE (still sucks imo)
-o- = Opera

I hope that answers your question.

Mutikasa · Dec 21, 2012

Yes, but look only the first line of second question.
this one

Code:

background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));

why only webkit? And what does do that line? does do same as

Code:

background-image: linear-gradient(top,#f5f5f5,#f1f1f1);

I understand stuff about the different browsers. That line seems like extra too me, that's why I'm asking.

Glenn BH · Dec 21, 2012

1, Which times have you changed? The ones you pasted or the ones under the :hover selector?

2, You need two different webkit gradients because:

-webkit-gradient is used by older browserslike Safari 4
-webkit-linear-gradient is used by newer ones like Chrome10+ or Safari5.1+

I hope it helps.

olystyle · Dec 21, 2012

hi mutikasa

if it doesnt work on every browser/version you should use a fallback/progressive enhancment based solution - every browser not supporting css3 to the point you need it to automatically using javascript instead - Have a look at "css3 pie" - might be something for you...

cheers olystyle

LongBanana · Dec 22, 2012

Glenn BH said:
1, Which times have you changed? The ones you pasted or the ones under the :hover selector?

2, You need two different webkit gradients because:

-webkit-gradient is used by older browserslike Safari 4
-webkit-linear-gradient is used by newer ones like Chrome10+ or Safari5.1+

I hope it helps.

Yeah, I did a little digging and -webkit-gradient came out in 2008 and it is still a valid way to create gradients, but using -webkit-linear-gradient gives you more options and works better on newer browsers as it came out in late 2011 / early 2012.

Mutikasa · Dec 24, 2012

Glenn BH said:
1, Which times have you changed? The ones you pasted or the ones under the :hover selector?

2, You need two different webkit gradients because:

-webkit-gradient is used by older browserslike Safari 4
-webkit-linear-gradient is used by newer ones like Chrome10+ or Safari5.1+

I hope it helps.

1. I've changed the ones I posted. They are in the main .button part. Shadowing is affected by time, but changing color is not.

2. What does it mean "left top, left bottom" then? same as top? Like "from left top to left bottom"?

css transition and linear gradients

Mutikasa

Power Member

jazzc

Elite Member

LongBanana

Regular Member

Mutikasa

Power Member

Glenn BH

Regular Member

olystyle

Regular Member

LongBanana

Regular Member

Mutikasa

Power Member

Main Menu

Marketplace

Making Money

BlackHat World