Company logos created in pure CSS, built in less.
See it in action here: bchanx.com/logos-in-pure-css-demo
The easiest way to use these icons is to import the corresponding .less file in your own .less styling sheet:
@import "relative/path/to/logos-in-pure-css/twitter.less";
You can also link the stylesheet via .html (but you'll need a copy of less.js, tested on > v1.3.3):
<link type="text/less" rel="stylesheet" href="/path/to/logos-in-pure-css/twitter.less">
<script type="text/javascript" src="/path/to/less.js"></script>
If you prefer not to use less, you can use the .css file provided:
<link type="text/css" rel="stylesheet" href="/path/to/logos-in-pure-css/twitter.css">
Once imported, copy the accompanying logo .html into your own .html file and the icon should display!
<div class="logo-twitter-{{ size }}">
<div class="body"></div>
<div class="body-none"></div>
<div class="beak-bottom"></div>
<div class="beak-bottom-none"></div>
<div class="wing-bottom"></div>
<div class="wing-bottom-none"></div>
<div class="wing-middle"></div>
<div class="wing-middle-none"></div>
<div class="wing-top"></div>
<div class="wing-top-none"></div>
<div class="beak-top"></div>
<div class="beak-top-none"></div>
<div class="head"></div>
</div>
To see it this in action, open demo.html
in your browser.
By default, {{ size }}
supports two different keywords: large and small. This in turn produces a 300x300px or 52x52px icon.
If you're using less, you can modify the sizes by either changing the @radius
param, or by defining your own class
and calling the logo mixin() with your desired @radius
size.
Currently, the .css file only supports large and small icon sizes.
This software is free to use under the MIT license.
logos-in-pure-css's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.