CSS3
奇思妙想,使用 CSS3
在单个标签内实现各类图形。
除去一些需要背景衬托的图形,本项目中所有图形均为单标签图形,即使用一个标签完成整个图案。
Demo link | Description |
---|---|
CSS3奇思妙想 | CSS3奇思妙想,单标签实现各类图形 |
SVG奇思妙想 | 使用 SVG or clip-path 创建的图形 |
奇文共欣赏,疑义相与析。带着问题来也好,讨论各种黑科技、酷炫的 CSS 技术也行,一键加 QQ 群讨论 。
拜读了 《CSS Secret》 这本大作之后,有了这个项目的想法。其中带星号的图形为书中出现过的实例。
大量使用了 ::before
、::after
伪元素,transparent
、border
,多重线性与径向渐变,多重内外阴影,实现了许多奇妙的图形。
很多例子参照了书中得来,也有许多我工作中实践积攒而来的。
【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧
如果有任何问题或者疑问,可以加 QQ 群:418766876 联系我。
也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。