文章关键字 ‘::after’

CSS ::marker伪元素简介

2021年02月16日,星期二

标记列表项目符号

::marker是CSS中新出的一种伪元素,用来匹配列表项中的marker box,可以改变项目符号的颜色字体等,甚至改变项目符号内容,填补了CSS以前这块的能力空白。

阅读全文…

常见的CSS图形绘制合集

2019年01月14日,星期一

CSS图形绘制头图

展示40多个常见的纯CSS绘制图形,效果实时,含源代码,想要什么效果直接复制粘贴就好了。就算项目用不到,看看别人代码怎么写的也有助于提高CSS的基本功。

阅读全文…

before(),after(),prepend(),append()等新DOM方法简介

2017年09月28日,星期四

接下来要介绍这些新增的DOM API方法,都比较新,其设计目的是可以像jQuery那样,使用非常简单的api,便利的操作dom元素。

这些api包括:before()after()replaceWith()append()prepend()……

阅读全文…

CSS content换行实现字符点点点loading效果

2016年11月13日,星期日

CSS content字符生成配合CSS3 animation可以各类字符loading效果实现,一起过来看看眼界,学习学习新的实现思路吧~~

阅读全文…

CSS之before, after伪元素特性表现两则

2015年04月19日,星期日

伪元素之所以称之为“伪元素”一定是有其原因的,本文就举两个特征例子,展示下伪元素跟普通元素,到底有哪些不一样的地方。

依然,有Demo、有截图,有源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS counter计数器(content目录序号自动递增)详解

2014年08月26日,星期二

CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到,不过当时是作为其中一员介绍。就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员。很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象。

然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相。今天,就大肆笔墨,好好地全面地介绍了下CSS计数器,确实有很多知识点,确实有很多不太好理解的地方,确实有很多会踩坑的地方,果然深不可测。不过,本文有着详实的文字,丰富的截图,完全的demo,必要的源代码展示。相信本文的内容会对你的学习有所帮助的!

阅读全文…

我是如何在实际项目中使用before/after伪元素的

2012年11月16日,星期五

before/after伪元素相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪元素应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪元素的意识,要使用顶多也就是跟风的“清除浮动”应用。
我想,这可能受兼容性思维影响……

阅读全文…

伪类+js实现CSS3 media queries跨界准确判断

2012年05月11日,星期五

我们都知道,CSS3 media queries是响应布局实现之利器。国外很多著名的前端站点,如css-tricks, smashingmagazinegazine等都采用了响应布局。
虽然国内此技术应用就像是打不着的打火机,没法跟如火如荼的欧美相比。但是,毕竟趋势是向前发展的,总会迎来遍地开花的时候,只是时间的长短而已。
media queries可以让设备在不同尺寸下应用不同的CSS样式、布局等。以适应手持设备、普屏显示器、宽屏显示器,以及未来冰箱上的联网显示器,汽车上的数码设备等。然后,仅仅通过CSS做布局可能无法应对所有的交互请求。
……
如何让JS的修改与CSS布局改变同步呢?

阅读全文…

小tip: 使用CSS(Unicode字符)让inline水平元素换行

2012年03月2日,星期五

本文旨在介绍一种自认为比较新颖有趣的技术。可以仅仅通过CSS控制inline元素元素换行的问题。其中,借助了特殊的Unicode字符编码字符。一如既往,有实例,有截图,有源代码展示。希望本文的内容能够对您的学习有所帮助。

阅读全文…

几种纯CSS(CSS3)下的纸张效果实现展示

2011年02月16日,星期三


本文主要展示如果使用纯CSS实现纸张效果,这里的CSS其实主要指CSS3. 展示的纸张效果也不是一种,就文中具体内容来看,有三个,一个是中规中矩的,二是渐变有曲线投影效果的,还有一个就是有分隔线圆弧卷边效果的。每个效果都配有截图展示,有对应的demo页面,还有必要源代码展示,同时,穿针引线地介绍了写最新的CSS3的发展与浏览器支持情况。总之,希望能对您的学习有所帮助。

阅读全文…