CSS3 ordered list styles
来源:互联网 发布:加油卡软件 编辑:程序博客网 时间:2024/06/05 05:40
from:http://www.red-team-design.com/css3-ordered-list-styles
Styling ordered lists was always a tricky task and I’m not the only one who thinks that. To style numbers you need to remove default browser styles and add hooks to your lists elements in order to target them and style accordingly.
In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.
The idea
When I first read Roger Johansson’s article about styling ordered list numbers, I must admit I seriously felt in love with that technique. Using that technique, I will try to go a bit further and show you two different styling possibilities for ordered lists.
The HTML
Below you’ll find nothing than simple ordered list markup:
<ol class="rounded-list"> <li><a href="">List item</a></li> <li><a href="">List item</a></li> <li><a href="">List item</a> <ol> <li><a href="">List sub item</a></li> <li><a href="">List sub item</a></li> <li><a href="">List sub item</a></li> </ol> </li> <li><a href="">List item</a></li> <li><a href="">List item</a></li></ol>
The CSS
Further, I’ll try to explain how this works in a few words.
This technique uses Automatic counters and numbering. Basically it’s about using two CSS 2.1 properties: counter-reset
(this initiate a counter) and counter-increment
(kinda self-explanatory, this increments the previous counter). As you will see below, thecounter-increment
will be used along with CSS generated content (pseudo-elements).
ol{ counter-reset: li; /* Initiate a counter */ list-style: none; /* Remove default numbering */ *list-style: decimal; /* Keep using default numbering for IE6/7 */ font: 15px 'trebuchet MS', 'lucida sans'; padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5);}ol ol{ margin: 0 0 0 2em; /* Add some left margin for inner lists */}
Rounded-shaped numbers
.rounded-list a{ position: relative; display: block; padding: .4em .4em .4em 2em; *padding: .4em; margin: .5em 0; background: #ddd; color: #444; text-decoration: none; border-radius: .3em; transition: all .3s ease-out;}.rounded-list a:hover{ background: #eee;}.rounded-list a:hover:before{ transform: rotate(360deg);}.rounded-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -1.3em; top: 50%; margin-top: -1.3em; background: #87ceeb; height: 2em; width: 2em; line-height: 2em; border: .3em solid #fff; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out;}
Rectangle-shaped numbers
.rectangle-list a{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 2.5em; background: #ddd; color: #444; text-decoration: none; transition: all .3s ease-out;}.rectangle-list a:hover{ background: #eee;} .rectangle-list a:before{ content: counter(li); counter-increment: li; position: absolute; left: -2.5em; top: 50%; margin-top: -1em; background: #fa8072; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold;}.rectangle-list a:after{ position: absolute; content: ''; border: .5em solid transparent; left: -1em; top: 50%; margin-top: -.5em; transition: all .3s ease-out;}.rectangle-list a:hover:after{ left: -.5em; border-left-color: #fa8072;}
Small bonus
Some CSS3 numbers animations are also included in this demo. Unfortunately, as far as I know and at this time, Firefox is the only one who supports animated pseudo-elements. Let’s hope that will improve sooner or later.
Browser support
These list looks well also on older browsers, as you can see below:
That’s all!
Thank you all for reading and I hope you enjoyed it. Feel free to share your thoughts, I appreciate your comments.
- CSS3 ordered list styles
- List-View Window Styles
- styles
- styles
- Styles
- The Ordered List Abstract Data Type
- 数据结构之“Ordered List and Sorted List”(一)
- 数据结构之“Ordered List and Sorted List”(二)
- 数据结构之“Ordered List and Sorted List”(三)
- 数据结构之“Ordered List and Sorted List”(四)
- 数据结构之“Ordered List and Sorted List”(五)
- 数据结构之“Ordered List and Sorted List”(六)
- 数据结构之“Ordered List and Sorted List”(七)
- Convert Binary Search Tree to an Ordered Double Linked List
- Get Styles
- Window Styles
- C++ styles
- DIALOG styles
- test
- 考题
- JSP基础
- usaco 1.2.5 dual palindromes
- 引用
- CSS3 ordered list styles
- 关于ictclas的网页
- XCode4.2基础知识
- 读书笔记20120213----Oracle password file, block change-tracking file
- Nginx + PHP CGI的一个可能的安全漏洞
- 程序员如果想安身立命【飞秋官方下载】
- Android Fragment---概要介绍
- 吸血鬼数字算法
- 多线程---缓存系统