伪元素:before和:after的精彩用法

伪元素:before:after的功能非常强大,只要你能有足够的想象力,它就能产生各种各样的样式效果。在上一篇《理解:Before和:After伪元素》文章,我们举出的只是一个非常简单的使用伪元素:before:after装饰“引用语”的用法。在这片文章里,我要在看看三个更高级、更绚丽的:before:after的用法。

使用伪元素:before:after给照片添加阴影

一个名叫Paul UnderwoodWEB程序员使用伪元素:before and :after制作出了完美惊艳的相片阴影效果。其中的技巧是使用绝对定位固定伪元素,然后给它们的z-index一个负值,以背景出现。

使用伪元素:before:after制作3D按钮

这是一个非常典型的使用伪元素配合CSS3的box-shadow制作3D按钮的例子,最神奇的是,这个漂亮的效果没有使用任何图片,是用纯CSS和另外一个HTML标记绘制出的。其中:before伪元素用来显示按钮左侧的数字 “1″

使用伪元素:before:after制作照片堆叠效果

只使用一张图片来创造出一堆图片叠摞在一起的效果,能做到吗?当然,关键是要使用伪元素:before:after来帮助呈现。把这些伪元素的z-index设置成负值,让它们以背景方式起作用。

总结

伪元素:before:after非常的简单,但也非常的酷,而且非常的有用处,使用它们能生成复杂的页面呈现效果,但它们却不会给你的HTML代码增加任何额外的代码——因为它们是不存在的“伪”元素。你要你有足够的想象力,你可以用它实现任何的效果

更好的消息是,这些伪元素的语法还在进一步的增强,比如“嵌套”伪元素 div::before::before { content: ''; }多重伪元素 div::before(3) { content: ''; },这些功能显然使我们的WEB设计开发开启了更大的想象空间。

阅读余下内容
 

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号