Skip to content

OsmondGao/magicCss

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

77 Commits
 
 
 
 
 
 

Repository files navigation

magicCss

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

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

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

由来

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

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

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

Contact

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

qqqun

About

CSS3奇思妙想,单标签实现各类图形

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 96.0%
  • CSS 4.0%