通过使用:before和:after,你能创作出让人称奇的视觉效果。对页面中的每个元素,你都有两个额外的可以控制的元素,本来这些是需要额外的元素来实现。他们给设计带来了更多的趣味性的空间,而不是增加无语义的有负面影响的标签。这里给大家整理了一堆让人称奇的东西。让我们开始吧!
给了你多层背景画布
因为你可以相对于他们的父元素绝对定位伪类元素,你可以把他们想象他们是每个元素的两个额外层。Nicolas Gallagher shows us 给我们展示了很多这种应用,包括多层的边框,结合css3的多重背景和等高列。
扩展通过单一元素表现更多图形的可能
所有上面的图形any many more都可以通过一个单一的元素创造出来,这是一个很现实的方法。和“make a coffee cup with pure CSS!”的这类案例相反(使用了1700的div),这种方法更加实用。 下面是这段代码可以让我们得到六角星的例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
|
|