CSS3奇思妙想,单标签实现各类图形
Switch branches/tags
Nothing to show
Clone or download
Latest commit dde3e26 Sep 11, 2018
Permalink
Failed to load latest commit information.
html update a heart-shaped graph Nov 15, 2016
static update Jul 8, 2016
README.md Update README.md Sep 11, 2018

README.md

magicCss

CSS3 奇思妙想,使用 CSS3 在单个标签内实现各类图形。

除去一些需要背景衬托的图形,本项目中所有图形均为单标签图形,即使用一个标签完成整个图案。

Demo链接 Description
CSS3奇思妙想 CSS3奇思妙想,单标签实现各类图形
SVG奇思妙想 使用 SVG or clip-path 创建的图形

由来

拜读了 《CSS Secret》 这本大作之后,有了这个项目的想法。其中带星号的图形为书中出现过的实例。

大量使用了 ::before::after 伪元素,transparentborder ,多重线性与径向渐变,多重内外阴影,实现了许多奇妙的图形。

很多例子参照了书中得来,也有许多我工作中实践积攒而来的。

About

【CSS进阶】伪元素的妙用--单标签之美

【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

Contact

如果有任何问题或者疑问,可以加 QQ 群:418766876 联系我。也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。

qqqun