Styling lists using css

The following link gives a different design of list. But there are some property which I cant understand like< transition: all .3s ease-out; > and content: counter(li); and counter-increment: li;
http://red-team-design.com/css3-ordered-list-styles/

Have you googled these properties to further your understanding? What are your questions?

Transition - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Counter - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters

what is the use of transition: all .3s ease-out;

That basically slows down the effects. Did you read the transition link?

Basically, you see on this demo - http://red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html

It’s not “automatic”, in the sense, that you can see a SLIGHT delay on hover? Or rather, how it’s not as fast as it can be? That’s the transition. It’s saying, for all properties that are set (and can be transitioned), transition them over a 0.3s delay, ease-out’d

You really just need to read that link, as they can explain it much better than I.

ok. Thank you. I will read those links.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.