Tag Archives: CSS

10 April, 2016

CSS – steps()

CSS animations are fun. I don’t have a lot of experience with them, so it’s the time to change it. First related thing on my “to learn” list is steps() function, for some reason.

steps() function is used for making non-fluid animations. It’s nothing big, so I’ll just drop a link here: How to Use steps() in CSS Animations If you have no experience with CSS animations, this is an excellent starting point.

The trick consists of two parts: you define the animation function:

.tick-tock {
    animation: tick-tock 60s steps(60, end) infinite;
}

the syntax is “animation: <keyframe definition name> <animation length> steps(<number of frames>, <direction>) <iteration count> <direction>;”

then you define the keyframes:

@keyframes tick-tock {
    to {
        transform: rotate(360deg);
    }
}

and that’s it. I tested it out in my lab: http://lab.acedude.pl/css-animations-steps/

It works. Best post ever.

4 April, 2016

CSS – flexbox

Flexbox, the new CSS layout type. Created to replace hacky and messy ways of doing things with CSS. I hate all that silly “post-css” stuff, so a widely-adopted, well-specified layout system sounded great to me.

To start, take a look at:

A little bit less interesting:

All in all, it’s an awesome piece of tech. Making responsive websites can be really fun with it. It should also eliminate all the hacks, and less code = better code. One concern is browser support. Sure, it is widely supported, but the issue right now is that the websites are rendered a little bit different on various devices and browsers. Hopefully it will get better with time.

Oh, and one last thing. Flexbox should simplify stuff. If you use it, because it’s cool, and then add table/grid/float/whatever -based layout to support older browsers – it’s just stupid.