1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

css transition and linear gradients

Discussion in 'Web Design' started by Mutikasa, Dec 21, 2012.

  1. Mutikasa

    Mutikasa Power Member

    Joined:
    May 23, 2011
    Messages:
    575
    Likes Received:
    212
    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
     
  2. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,147
    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.
     
  3. LongBanana

    LongBanana Regular Member

    Joined:
    Oct 23, 2009
    Messages:
    411
    Likes Received:
    247
    Location:
    Chicago, IL
    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.
     
  4. Mutikasa

    Mutikasa Power Member

    Joined:
    May 23, 2011
    Messages:
    575
    Likes Received:
    212
    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.
     
  5. Glenn BH

    Glenn BH Regular Member

    Joined:
    Nov 10, 2010
    Messages:
    230
    Likes Received:
    213
    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.
     
    • Thanks Thanks x 1
  6. olystyle

    olystyle Regular Member

    Joined:
    Jan 6, 2012
    Messages:
    238
    Likes Received:
    103
    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
     
    • Thanks Thanks x 1
  7. LongBanana

    LongBanana Regular Member

    Joined:
    Oct 23, 2009
    Messages:
    411
    Likes Received:
    247
    Location:
    Chicago, IL
    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.
     
    • Thanks Thanks x 1
  8. Mutikasa

    Mutikasa Power Member

    Joined:
    May 23, 2011
    Messages:
    575
    Likes Received:
    212
    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"?