Shaan M Khan shaan360
🙂
shaan360
/ index.html
Created
September 6, 2012 15:54
See here: https://github.com/FWeinb/nthEverything
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1><p id="nthEverthing">nth-Everthing</p></h1> | |
| <p id="letters">Hover a red letter. Cool, hu?</p> | |
| <p id="pseudo">Pseudo elements are working</p> | |
| <p id="click">Please click here</p> | |
| <p id="flip">Every second letter is flipped</p> | |
| <p id="crazy">Flip Hover Flip</p> | |
| <p id="font">Zoom all the things!</p> | |
| <p id="word">FirstWord some words Green some words LastWord</p> | |
| <p id="firstLastWord">Hello from nth-everthing</p> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="shelf"> | |
| <div class="bookend_left"></div> | |
| <div class="bookend_right"></div> | |
| <div class="reflection"></div> | |
| </div> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="shelf"> | |
| <div class="bookend_left"></div> | |
| <div class="bookend_right"></div> | |
| <div class="reflection"></div> | |
| </div> |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ index.haml
Created
September 6, 2012 15:30
CSS3 iPhone v0.1 by Dylan Hudson (@dyln_hdsn on twitter)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .iphone | |
| .steel_band | |
| .mute_rocker | |
| .volume.up | |
| .volume.down | |
| .sleep_wake | |
| .plastic_band | |
| .glass_face | |
| .camera | |
| .speaker |
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="spotify"> | |
| <div class="bar bar-dark"></div> | |
| <div class="bar bar-med"></div> | |
| <div class="bar bar-light"></div> | |
| </div> |
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 :)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <i class="macbook"></i> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="ribbon"> | |
| <span id="content">Hello There</span> | |
| </div> |