button{
    outline: none;
    cursor: pointer;
    display: block;
    text-align: center;
    border: none;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    color: #FFF;
    padding: 1em 2.5em;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .3em;
}

button:focus,
button:hover{
    -webkit-animation: Gradient .7s ease 1;
    -moz-animation: Gradient .7s ease 1;
    animation: Gradient .7s ease 1;
    background-position: 100% 50%;
}

@-webkit-keyframes Gradient {
    0% {background-position: 0% 50%}
    100% {background-position: 100% 50%}
}

@-moz-keyframes Gradient {
    0% {background-position: 0% 50%}
    100% {background-position: 100% 50%}
}

@keyframes Gradient {
    0% {background-position: 0% 50%}
    100% {background-position: 100% 50%}
}

Today I came across this tweet from @StarbucksUK:

Pumpkin Spice Latte is back! #PSL pic.twitter.com/gmNAtRJQfA

— Starbucks UK (@StarbucksUK) 15. September 2015

I really like this clever use of the false frame illusion and I realised, how often I tend to “think” in frames and boxes. I suppose writing CSS and dealing with the box model for a couple of years somehow clouds the view for design delighters like this one. I’ll have to remind myself not to think in boxes and frames all the time. At least that’s what I learnt today.

I use CSS transitions a lot. Today I came across a problem that I’ve managed to avoid for a while: animating the height of elements to auto.

Let’s say we want to change the height of an element when hovering over it (or over a containing element). If we define a specific height for the element for each state, we can easily use CSS transitions like in this example.

But we don’t always know how high the element is when it’s hovered over, especially when it contains an unknown amount text. And if the height of an element at the end of the transition is set to auto, it doesn’t work.

There is a workaround for this, but it’s a bit hacky admittedly: instead of using height as transition-property we can use max-height to (almost) accomplish what we want. We just have to set it to an unlikely high value and it will work as expected, like in this example. There’s a downside to this: if you set max-height too high, the transition will take longer.

That’s what I learnt today.