GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → chokcoco → Magiccss

chokcoco / Magiccss

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

Labels

htmlcss3

Projects that are alternatives of or similar to Magiccss

Magz
Free Resonsive HTML5 & CSS3 Magazine Template
Stars: ✭ 64 (-95.08%)
Mutual labels:  css3
Borderboxmodel
Javascript polyfill for CSS3 box-sizing: border-box. For IE6 and IE7
Stars: ✭ 73 (-94.39%)
Mutual labels:  css3
Frontend Development
A curated list of resources for Frontend development
Stars: ✭ 1,255 (-3.54%)
Mutual labels:  css3
Redpacketrain
红包雨
Stars: ✭ 68 (-94.77%)
Mutual labels:  css3
Hacktoberfest2020
Contribute for hacktoberfest 2020
Stars: ✭ 72 (-94.47%)
Mutual labels:  css3
30diasdecss
Desafio criar 30 mini projetos utilizando HTML e CSS em 30 dias
Stars: ✭ 1,203 (-7.53%)
Mutual labels:  css3
Pure Css3 Animated Border
Pure CSS3 animated border for all html element.
Stars: ✭ 63 (-95.16%)
Mutual labels:  css3
Buddycss
The framework for people who love coding!
Stars: ✭ 89 (-93.16%)
Mutual labels:  css3
Iconicss
More than 900 pure CSS3 icons!
Stars: ✭ 72 (-94.47%)
Mutual labels:  css3
Gatsby Bulma Quickstart
🚀 + ⚛️ A Quick Way to bootstrap your next Gatsby + Bulma site.
Stars: ✭ 84 (-93.54%)
Mutual labels:  css3
Orientationchange Fix
基于@media特性实现对原生orientationchange的修复 （ orientationchange-fix is a based on @media attribute to fix orientationchange utility library, orientaionchange polyfill.）
Stars: ✭ 68 (-94.77%)
Mutual labels:  css3
Basecss
CSS基类，减少浏览器差异，常用CSS类名
Stars: ✭ 69 (-94.7%)
Mutual labels:  css3
Neo
Create blazing fast multithreaded Web Apps
Stars: ✭ 1,219 (-6.3%)
Mutual labels:  css3
Blog
📚 专注Web与算法
Stars: ✭ 1,140 (-12.38%)
Mutual labels:  css3
Cssplit
CSS splitter that takes your big css file and splits into component specific css files
Stars: ✭ 86 (-93.39%)
Mutual labels:  css3
Dev Practice
Practice your skills with these ideas.
Stars: ✭ 1,127 (-13.37%)
Mutual labels:  css3
Personal Goals
List of books I've read, projects I've done, videos I've seen, articles I've read or podcasts I've listened to.
Stars: ✭ 75 (-94.24%)
Mutual labels:  css3
Snapaper
📰 Past Papers Sharing Platform Based On Vue.js & GCE Guide | CAIE 试卷分享与下载平台
Stars: ✭ 90 (-93.08%)
Mutual labels:  css3
Kodeweave
HTML/CSS/JS and Markdown Playground For Web Designers and Developers
Stars: ✭ 87 (-93.31%)
Mutual labels:  css3
Olog
📔 Online Note-Taking Experience | 即时灵感笔记记录平台
Stars: ✭ 79 (-93.93%)
Mutual labels:  css3
View All Similar Projects ➔

magicCss

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

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

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

由来

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

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

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

Contact

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

qqqun

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].