CSS3奇思妙想,单标签实现各类图形
HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
html
static
README.md Update README.md Jan 5, 2018

README.md

magicCss

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

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

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

奇文共欣赏,疑义相与析。带着问题来也好,讨论各种黑科技、酷炫的 CSS 技术也行,一键加 QQ 群讨论

由来

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

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

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

About

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

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

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

Contact

如果有任何问题或者疑问,可以加 QQ 群:418766876 联系我。

也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。

qqqun