文章关键字 ‘图形生成’

CSS3 linear-gradient线性渐变实现虚线等简单实用图形

2017年10月27日,星期五

我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是background-image,于是,我们可以实现任意数量渐变背景图的叠加效果。甚至,理论上,任意彩色jpg图片都是可以使用CSS3渐变背景实现的。

当然我们实际开发的时候,是不会使用CSS3渐变来模拟一张图片的,更多是用来生成一些简单实用的图形。

本文就将通过实现虚线,三角以及加号减号等案例,展示下CSS3 linear-gradient线性渐变要图形生成技巧。

阅读全文…

秋月何时了,CSS3 border-radius知多少?

2015年11月1日,星期日

深入理解CSS3 border-radius的一些特性表现。平时使用的那点东西只是浮于表面的,实际上,border-radius支持的属性值呢,还是有点料的,也有很多需要注意的tips. 本文就算是border-radius进阶学习,还是一如既往的,有丰富的截图,表情图,琐碎图,插科打诨图;有丰富的源代码展示,对了,还有纯手动打算的便于学习的demo。希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 clip-path polygon图形构建与动画变换二三事

2015年03月26日,星期四

本文絮絮叨叨CSS3 clip-path polygon在图形构建和动画这块的三两事,没什么惊天动地的知识点,大家可以当散文看下。放心,有demo有截图有代码展示,还有视频播放呢!总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

currentColor-CSS3超高校级好用CSS变量

2014年10月25日,星期六

currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,是非常强大非常好用的一个关键字。本文就将介绍这个关键字的含义、表现,以及提供两个实例展示其价值之处。必要的源代码、必要的截图、必要的demo一个不少,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip: SVG和Canvas分别实现图片圆角效果

2014年06月30日,星期一

实现图片圆角的方法很多,图片覆盖,CSS3圆角,SVG, Canvas都可以实现,前两个大家可能都比较熟悉,这里,着重介绍后面2种技术实现。希望在某一时刻对有需要的同行能有帮助。必须的,有demo, 有截图,有源代码展示。

阅读全文…

CSS3图标图形生成技术个人攻略

2014年04月23日,星期三

CSS3图标图形生成技术个人攻略
还在使用Sprite背景实现小图标效果?还是自以为潮流使用font face实现小图标?不妨试试CSS3来实现图标生成效果,更精致的效果,更方便的维护,没有额外的请求,可以Gzip, 同时适配retina视网膜屏幕。

本文就全方位展示了自己在CSS3图标图形生成上的一些技术、攻略心得。精良的demo,完整的兼容解决展示,详尽的各种图形实现分析,多多截图,必要的源代码展示。总是,希望本文的内容能够对你的学习有所帮助。

阅读全文…

CSS3 box-shadow盒阴影图形生成技术

2013年11月29日,星期五

理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】

阅读全文…