Skip to content

Instantly share code, notes, and snippets.

@connor

connor/addelogo.css

Created February 23, 2012 07:47
Show Gist options
  • Save connor/1891377 to your computer and use it in GitHub Desktop.
Save connor/1891377 to your computer and use it in GitHub Desktop.
Download ZIP
Addepar Logos - Firefox, also. <3
Raw
addelogo.css
/**
Height = 2/3 * width
*/
.addelogo {
position: relative;
height: 100px;
width: 150px;
}
.addelogo .al-left {
position: absolute;
left: 21.2%;
bottom: 0;
height: 100%;
width: 30.3%;
background-color: #939598;
transform: skew(-32.4deg,0deg);
-moz-transform: skew(-32.4deg,0deg);
-webkit-transform: skew(-32.4deg,0deg);
}
.addelogo .al-right {
position: absolute;
right: 10%;
bottom: 0;
height: 47.1%;
width: 30.2%;
background-color: #000;
transform: skew(32deg,0deg);
-moz-transform: skew(32deg,0deg);
-webkit-transform: skew(32deg,0deg);
}
.addelogo .al-fill {
position: absolute;
top: 0;
height: 0%;
width: 100%;
}
/** STYLES
* Normal (Default): standard logo, blue fills
* Reversed: standard reversed logo, blue fills
* Hidden: Invisible Logo, standard colored logo fills
* Hidden, Reversed: Invisible Logo, reversed color logo fills
*/
/* Normal */
.addelogo.normal .al-left {
background-color: #939598;
}
.addelogo.normal .al-right {
background-color: #000;
}
/* Reversed */
.addelogo.reversed .al-right {
background-color: #fff;
}
/* Normal Fills */
.addelogo .al-fill {
background-color: #27AAE1;
}
/* Hidden */
.addelogo.hidden .al-left {
background-color: transparent;
}
.addelogo.hidden .al-right {
background-color: transparent;
}
.addelogo.hidden .al-left .al-fill {
background-color: #939598;
height: 100%;
}
.addelogo.hidden .al-right .al-fill {
background-color: #000;
height: 100%;
}
.addelogo.hidden.reversed .al-right .al-fill {
background-color: #fff;
}
.addelogo.hover:hover .al-left .al-fill {
height: 100%;
}
/** ANIMATION CLASSES
* loading: ugly loading
* loadSync: way better loading
*/
.addelogo.animated .al-fill, .addelogo.loadSync .al-fill, .addelogo.loading .al-fill, .addelogo.load3D .al-fill{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.addelogo.once .al-fill {
animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
.addelogo.loading .al-left .al-fill {
animation-name: loadLeft;
-moz-animation-name: loadLeft;
-webkit-animation-name: loadLeft;
}
.addelogo.loading .al-right .al-fill {
animation-name: loadRight;
-moz-animation-name: loadRight;
-webkit-animation-name: loadRight;
}
.addelogo.loadSync .al-left .al-fill {
animation-name: loadLeft-Sync;
-moz-animation-name: loadLeft-Sync;
-webkit-animation-name: loadLeft-Sync;
}
.addelogo.loadSync .al-right .al-fill {
animation-name: loadRight-Sync;
-moz-animation-name: loadRight-Sync;
-webkit-animation-name: loadRight-Sync;
}
.addelogo.load3D .al-left .al-fill {
animation-name: loadLeft3D;
-moz-animation-name: loadLeft3D;
-webkit-animation-name: loadLeft3D;
}
.addelogo.load3D .al-right .al-fill {
animation-name: loadRight3D;
-moz-animation-name: loadRight3D;
-webkit-animation-name: loadRight3D;
}
/** ANIMATIONS - Should always be added in pairs. Only webkit supported now.
* loadLeft & loadRight
* loadLeft-Sync & loadRight-Sync
* loadLeft3D & loadRight3D
*/
@-webkit-keyframes 'loadLeft'
{
0% {
top: 0;
height: 0%;
}
25% {
height: 100%;
}
50%{
bottom: 0;
top: auto;
height: 100%;
}
75% {
height: 0%;
}
100% {
height: 0%;
}
}
@-moz-keyframes loadLeft
{
from {
top: 0;
height: 0%;
}
25% {
height: 100%;
}
50%{
bottom: 0;
top: auto;
height: 100%;
}
75% {
height: 0%;
}
to {
height: 0%;
}
}
@-webkit-keyframes 'loadRight'
{
0% {
top: 0;
height: 0%;
}
25% {
height: 0%;
}
50%{
height:100%;
}
75% {
bottom: 0;
top: auto;
height: 100%;
}
100% {
height: 0%;
}
}
@-moz-keyframes loadRight
{
from {
top: 0;
height: 0%;
}
25% {
height: 0%;
}
50%{
height:100%;
}
75% {
bottom: 0;
top: auto;
height: 100%;
}
to {
height: 0%;
}
}
@-webkit-keyframes 'loadLeft-Sync'
{
0% {
top: 0;
height: 0%;
}
41.67% {
height: 100%;
}
41.7%{
bottom: 0;
top: auto;
height: 100%;
}
80% {
height: 0%;
}
100% {
height: 0%;
}
}
@-moz-keyframes loadLeft-Sync
{
from {
top: 0;
height: 0%;
}
41.67% {
height: 100%;
}
41.7%{
bottom: 0;
top: auto;
height: 100%;
}
80% {
height: 0%;
}
to {
height: 0%;
}
}
@-webkit-keyframes 'loadRight-Sync'
{
0% {
top: 0;
height: 0%;
}
20.83% {
height: 0%;
}
41.67%{
height:100%;
}
41.7% {
bottom: 0;
top: auto;
}
80% {
height: 0%;
}
100% {
height: 0%;
}
}
@-moz-keyframes loadRight-Sync
{
from {
top: 0;
height: 0%;
}
20.83% {
height: 0%;
}
41.67%{
height:100%;
}
41.7% {
bottom: 0;
top: auto;
}
80% {
height: 0%;
}
to {
height: 0%;
}
}
@-webkit-keyframes 'loadLeft3D'
{
0% {
top: 0;
height: 100%;
}
25% {
}
50%{
-webkit-transform: rotate3d(0, 100, 0, 180deg);
}
75% {
}
100% {
-webkit-transform: rotate3d(0, 100, 0, 180deg);
}
}
@-moz-keyframes loadLeft3D
{
from {
top: 0;
height: 100%;
}
25% {
}
50%{
-moz-transform: rotate3d(0, 100, 0, 180deg);
}
75% {
}
to {
-moz-transform: rotate3d(0, 100, 0, 180deg);
}
}
@-webkit-keyframes 'loadRight3D'
{
0% {
top: 0;
height: 100%;
}
25% {
}
50%{
-webkit-transform: rotate3d(0, 100, 0, 0deg);
}
75% {
}
100% {
-webkit-transform: rotate3d(0, 100, 0, 180deg);
}
}
@-moz-keyframes loadRight3D {
from {
top: 0;
height: 100%;
}
25% {
}
50%{
-moz-transform: rotate3d(0, 100, 0, 0deg);
}
75% {
}
100% {
-moz-transform: rotate3d(0, 100, 0, 180deg);
}
}
/**
* Bonus: This is the "Mathematically correct" logo.
* It is commented out in favor of Craig's implementation
*/
/*
.addelogo .al-right {
position: absolute;
right: 10%;
bottom: 0;
height: 46.9%;
width: 30.2%;
background-color: #000;
transform: skew(32.4deg,0deg);
-moz-transform: skew(32.4deg,0deg);
-webkit-transform: skew(32.4deg,0deg);
}
*/
Raw
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Addepar Logo!</title>
<meta name="description" content="The Addepar Logo in CSS!">
<meta name="author" content="JD Ross">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/addelogo.css" rel="stylesheet">
<style type="text/css">
body {padding-top: 60px; padding-bottom: 40px;}
#download {margin-left: 40px;}
.logo-container {padding:10px;}
.dark {background-color: #000;}
.dark h2, .dark p {color: #eee;}
pre {margin-right:10px;}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="https://addepar.com">
<div class="addelogo reversed" style="width: 60px; height: 40px; display: inline-block; float: left;">
<div class="al-left"><div class="al-fill"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div></a>
</div>
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>Addepar Logos <a class="btn btn-primary btn-large" id="download" href="https://github.com/jdross/CSS-Addepar-Logo/zipball/master">Download Full Zip</a></h1>
<p>Everything you need is <a href="css/addelogo.css">Addelogo.css</a>.</p>
</div>
<div class="row">
<div class="span12">
<h2>Normal logo (default)</h2>
</div>
</div>
<div class="row">
<div class="span8 offset4">
<div class="alert alert-info">The following four lines of HTML with addelogo.css will allow you to create logos anywhere.<br /><br /><strong>The <code>.addelogo</code> element should always have a 2:3 height to width ratio.</strong></div>
</div>
</div>
<div class="row">
<div class="span4">
<div class="logo-container">
<div class="addelogo">
<div class="al-left"><div class="al-fill"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<pre>
&lt;div class=&quot;addelogo&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span8 offset4">
<div class="alert alert-info">You can set the height of the fill to 100% to show the blue</div>
</div>
</div>
<div class="row">
<div class="span4">
<div class="logo-container">
<div class="addelogo">
<div class="al-left"><div class="al-fill" style="height:100%;"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<pre>
&lt;div class=&quot;addelogo&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot; style="height:100%;"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span8 offset4">
<div class="alert alert-info">You can also set the fill height as a smaller percent.</div>
</div>
</div>
<div class="row">
<div class="span4">
<div class="logo-container">
<div class="addelogo">
<div class="al-left"><div class="al-fill" style="height:20%;"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<pre>
&lt;div class=&quot;addelogo&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot; style="height:20%;"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row">
<div class="span8 offset4">
<div class="alert alert-info">For example, you may change this % to dynamically indicate downloading.</div>
</div>
</div>
<div class="row">
<div class="span4">
<div class="logo-container">
<style type="text/css">
@-webkit-keyframes 'loadIt'
{
0% {
height: 0%;
}
100% {
height: 100%;
}
}
@-moz-keyframes loadIt
{
from {
height: 0%;
}
to {
height: 100%;
}
}
.loadit .al-left .al-fill {
-webkit-animation-name: loadIt;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: loadIt;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
</style>
<div class="addelogo loadit">
<div class="al-left"><div class="al-fill"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<pre>
&lt;style type=&quot;text/css&quot;&gt;
@-webkit-keyframes &#39;loadIt&#39;
{
0% {
height: 0%;
}
100% {
height: 100%;
}
}
.loadit .al-left .al-fill {
-webkit-animation-name: loadIt;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
&lt;/style&gt;
&lt;div class=&quot;addelogo loadit&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<hr>
<div class="row dark">
<div class="span12">
<h2>Reversed logo</h2>
<p>I put my thing down, flip it, and reverse it.</p>
</div>
</div>
<div class="row dark">
<div class="span4">
<div class="logo-container">
<div class="addelogo reversed">
<div class="al-left"><div class="al-fill"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<pre>
&lt;div class=&quot;addelogo reversed&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="row dark">
<div class="span4">
<div class="logo-container">
<div class="addelogo reversed">
<div class="al-left"><div class="al-fill" style="height:100%"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<p></p>
<pre>
&lt;div class=&quot;addelogo reversed&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot; style="height:100%"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<hr>
<div class="row">
<div class="span12">
<h2>Hovers</h2>
</div>
</div>
<div class="row">
<div class="span8 offset4">
<div class="alert alert-info">Just add the "hover" class to the container.</div>
</div>
</div>
<div class="row">
<div class="span4">
<div class="logo-container">
<div class="addelogo hover">
<div class="al-left"><div class="al-fill"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<pre>
&lt;div class=&quot;addelogo hover&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<hr>
<div class="row">
<div class="span12">
<h2>Loading Animations</h2>
</div>
</div>
<div class="row">
<div class="span8 offset4">
<div class="btn-group" id="animation-buttons">
<a class="btn" href="#" data-bind="load3D">.load3D</a>
<a class="btn" href="#" data-bind="loadSync">.loadSync</a>
<a class="btn" href="#" data-bind="loading">.loading</a>
</div><br />
</div>
</div>
<div class="row">
<div class="span4">
<div class="logo-container">
<div id="animated-logo" class="addelogo hidden load3D">
<div class="al-left"><div class="al-fill"></div></div>
<div class="al-right"><div class="al-fill"></div></div>
</div>
</div>
</div>
<div class="span8">
<pre>
&lt;div class=&quot;addelogo hidden load3D&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;addelogo hidden loadSync&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;addelogo hidden loading&quot;&gt;
&lt;div class=&quot;al-left&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;al-right&quot;&gt;&lt;div class=&quot;al-fill&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<div class="alert alert-info"><strong>Tip:</strong> Use the "once" class to only play an animation once.</div>
</div>
</div>
<hr>
<footer>
<p><a href="https://twitter.com/justindross" class="twitter-follow-button" data-show-count="false">Follow @justindross</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
</footer>
</div> <!-- /container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
function setLogo(arg) {
$("#animated-logo").removeClass("loading").removeClass("loadSync").removeClass("load3D").addClass(arg);
}
$("#animation-buttons .btn").click(function(){
setLogo($(this).attr("data-bind"));
return false;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment