Skip to content

wealrain/magicCss

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 

Repository files navigation

magicCss

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

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

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

由来

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

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

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

个人相关博客

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

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

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

其他 CSS 作品

CSS3 3D 行星运转

CSS3 3D 透视立方体照片墙

CSS3 3D 视角 -- 试试酷炫的 3D 视角

License

MIT

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 95.7%
  • CSS 4.3%