GithubHelp home page GithubHelp logo

hhy5277 / magiccss Goto Github PK

View Code? Open in Web Editor NEW

This project forked from chokcoco/magiccss

0.0 2.0 0.0 294 KB

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

Home Page: http://chokcoco.github.io/magicCss/html/index.html

HTML 95.69% CSS 4.31%

magiccss's Introduction

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

magiccss's People

Contributors

chokcoco avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.