Skip to content

Instantly share code, notes, and snippets.

View quezo's full-sized avatar

Alex Vazquez quezo

  • CodePen
  • Seattle, WA
View GitHub Profile
@quezo
quezo / index.html
Created August 16, 2012 04:58
This is taken from the logo that appears on the main Google website: http://www.google.com The icon has a nice animation effect, and I wanted to recreate it using CSS3 animations.
<h1>Google Logo with CSS3 Animations</h1>
<p>Another one of my experiments while learning about CSS3 animations and transitions. @lostinthegc</p>
<div class="wrap">
<img src="http://i.imgur.com/e8LMT.png" /> <!-- Original logo. -->
<div class="pen"> <!-- Sexy times logo.-->
<div class="blue"></div>
<div class="grid_4">
<div class="img-container">
<img src="http://www.jmls.edu/career-services/images/students-in-commons.jpg" width="218">
<div class="img-container-content">
<strong class="img-container-title">Students &raquo;</strong>
<p>Information on career options, job opportunities, resources and services.</p>
</div>
</div>
</div>
<button id="heart-this" class="top-button loved-3 loved">
<span class="icon icon-heart">h</span>
</button>
<button id="heart-this" class="top-button loved-3 loved">
<span class="icon icon-heart">h</span>
</button>
<button id="heart-this" class="top-button loved-3 loved">
<span class="icon icon-heart">h</span>
</button>
<button id="heart-this" class="top-button loved-3 loved">
<span class="icon icon-heart">h</span>
</button>
<button id="heart-this" class="top-button loved-3 loved">
<span class="icon icon-heart">h</span>
</button>
<button id="heart-this" class="top-button loved-3 loved">
<span class="icon icon-heart">h</span>
</button>
@quezo
quezo / index.haml
Created August 31, 2012 06:38
I wanted to make a simple Mac OS X window in CSS. A window itself is kind of boring so I decided to make it a nonfunctional code editor. Written in SASS with Compass and HAML. Even though the design is very simple and generic, I guess Sublime Text 2 and
#app
#toolbar
#traffic-light
.aqua#red
.aqua#yellow
.aqua#green
#view
#tree
%ul
%li index.haml
@quezo
quezo / index.html
Created September 1, 2012 23:55
Simple demonstration using css3 animation with nth-child selectors.
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>