伪元素

CSS伪类和伪元素总结

大家好!在早期的网页设计之中,我不得不从试验以及错误之中进行学习总结。那时没有可参考的杂志,也没有像 Codepen 或者其它类似的使用工具。如果有人可以为我指点一下,尤其是CSS方面,都将会是很大的帮助。现在我的经验越来越多,我想和大家分享一个有关于CSS 伪类以及伪元素的总结。如果你是一位前端设计者或开发者,你一定对将要讨论的伪元素以及伪类有所了解并且可能使用过它们。然而我还是建议你看看本文所讲的所有条目选项,你可能会有新的收获。

伪元素控制表单样式

伪元素大家熟悉的可能也就是常见的那几种,比如“::before”、“::after”等,熟不知各大引擎浏览器都有自己的私有伪元素,用来做一些特别的处理。比如前段时间CtripUED团队整理的Webkit CSS Library,里面整理了所有webkit引擎浏览器的私有属性和一些伪元素对元素的样式处理。本文由D姐根据TJ VanToll的英文文章原名《List of Pseudo-Elements to Style Form Controls》进行翻译,向大家介绍了一些伪元素控制表单的样式方法。因为当开发web应用程序时,表单样式是个头疼的问题。以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式。然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示。然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎。以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表。希望这篇文章对大家处理表单时有所帮助。

细说百度图片栏目——图片展示效果

今天写个DEMO效果时,无意之中在Baidu图片中发现其图片列表使用了CSS3的transform,transition,box-shadow等属性。这是不是可以说百度在开始引领国内的CSSer开始使用CSS3相关属性呢?如果是的话,那这对于前端开发人员来说是一件福事。毕竟百度是国内互联网中大企业之一,他的一些举动都将有很多前端人员跟随着。这些都是我个人的猜想,仅供参考,因为我就是一个CSS3的爱好者,今天我想拿这个效果来说说自己的想法。如有不对还请谅解。

Tabs with Round Out Borders

前几天藤藤在每一练中写了一个《CSS3制作Twitter信息框》效果,酷似Chrome浏览器的tabs效果:

藤藤每日一练——CSS3制作Twitter信息框

CSS3伪元素应用——CSS3 Button

有关于CSS3制作buttons,本站前面介绍了多个案例:

返回顶部