https://github.com/chokcoco/magicCss

CSS3奇思妙想，单标签实现各类图形
https://github.com/chokcoco/magicCss

css3 pesudo

Last synced: 28 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/chokcoco/magicCss
• Owner: chokcoco
• Created: 2016-05-19T12:32:09.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-02-08T15:13:00.000Z (over 4 years ago)
• Last Synced: 2024-02-18T18:36:33.349Z (4 months ago)
• Topics: css3, pesudo
• Language: HTML
• Homepage: https://chokcoco.github.io/magicCss/html/index.html
• Size: 322 KB
• Stars: 1,424
• Watchers: 58
• Forks: 299
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Lists

• awesome - 奇思妙想
• awesome - chokcoco/magicCss - CSS3奇思妙想，单标签实现各类图形 (HTML)

README

        
# magicCss 

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

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

| Demo链接 | Description |

| ------| ------ | 

| [CSS3奇思妙想](https://chokcoco.github.io/magicCss/html/index.html) | CSS3奇思妙想，单标签实现各类图形 |

| [SVG奇思妙想](https://chokcoco.github.io/demo/svg/html/index.html)  | 使用 `SVG` or `clip-path` 创建的图形 | 

## 由来

拜读了 [《CSS Secret》](https://github.com/cssmagic/CSS-Secrets) 这本大作之后，有了这个项目的想法。其中带星号的图形为书中出现过的实例。

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

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

## Contact

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

![qqqun](https://github.com/chokcoco/iCSS/blob/master/qqqun.png)