Skip to content

Instantly share code, notes, and snippets.

View shaan360's full-sized avatar
๐Ÿ™‚
Coding in peace

Shaan M Khan shaan360

๐Ÿ™‚
Coding in peace
View GitHub Profile
@shaan360
shaan360 / index.html
Created September 6, 2012 13:50
A Clean, Simple, CSS Ribbon.
<div id="ribbon">
<span id="content">Hello There</span>
</div>
@shaan360
shaan360 / index.html
Created September 6, 2012 13:51
A Clean, Simple, CSS Ribbon.
<div id="ribbon">
<span id="content">Hello There</span>
</div>
@shaan360
shaan360 / index.html
Created September 6, 2012 15:26
This is just an experiment! There are certainly better ways to show an image of a MacBook, but none as fun as this :)
<i class="macbook"></i>
@shaan360
shaan360 / index.html
Created September 6, 2012 15:27
The Spotify logo made with pure CSS
<div class="spotify">
<div class="bar bar-dark"></div>
<div class="bar bar-med"></div>
<div class="bar bar-light"></div>
</div>
@shaan360
shaan360 / index.html
Created September 6, 2012 15:28
Another experiment with CSS animations. This time incorporating background-size. Click the buttons in the upper left to toggle blur layer visibility on/off. Full version here: http://ericanton.net/nothing
<div id="blur"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleLarge"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
<div class="bubbleMedium"></div>
@shaan360
shaan360 / index.haml
Created September 6, 2012 15:30
CSS3 iPhone v0.1 by Dylan Hudson (@dyln_hdsn on twitter)
.iphone
.steel_band
.mute_rocker
.volume.up
.volume.down
.sleep_wake
.plastic_band
.glass_face
.camera
.speaker
@shaan360
shaan360 / index.html
Created September 6, 2012 15:40
Created this timeline for the company history section of www.meridianapps.com. Uses the LESS CSS framework and some jquery hover/click events.
<div id="history">
<div id="history_clock">
<div id="clockface">
<div id="clockglare"></div>
<div id="clockarm_1" ></div>
<div id="clockarm_2"></div>
@shaan360
shaan360 / index.html
Created September 6, 2012 15:46
I used LESS to create this CSS glass shelf for a new website I just finished designing and developing - http://www.meridianapps.com.
<div class="shelf">
<div class="bookend_left"></div>
<div class="bookend_right"></div>
<div class="reflection"></div>
</div>
@shaan360
shaan360 / index.html
Created September 6, 2012 15:47
Created this timeline for the company history section of www.meridianapps.com. Uses the LESS CSS framework and some jquery hover/click events.
<div id="history">
<div id="history_clock">
<div id="clockface">
<div id="clockglare"></div>
<div id="clockarm_1" ></div>
<div id="clockarm_2"></div>
@shaan360
shaan360 / index.html
Created September 6, 2012 15:53
I used LESS to create this CSS glass shelf for a new website I just finished designing and developing - http://www.meridianapps.com.
<div class="shelf">
<div class="bookend_left"></div>
<div class="bookend_right"></div>
<div class="reflection"></div>
</div>