albert jalbertbowden
jalbertbowden
/ mobile-safari-window-height.js
Created
March 31, 2013 05:14
Mobile Safari Window Height Detection via http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems/15717609#15717609
This file contains hidden or 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
| // tests | |
| // returns height of the screen including all toolbars | |
| // requires detection of orientation. (320px for our test) | |
| // window.orientation === 0 ? screen.height : screen.width | |
| // returns height of the visible area | |
| // it decreases if you zoom in | |
| // window.innerHeight | |
| // returns height of screen minus all toolbars |
jalbertbowden
/ css-compress.php
Created
April 1, 2013 03:08
— forked from manastungare/css-compress.php
This file contains hidden or 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
| <?php | |
| /** | |
| * On-the-fly CSS Compression | |
| * Copyright (c) 2009 and onwards, Manas Tungare. | |
| * Creative Commons Attribution, Share-Alike. | |
| * | |
| * In order to minimize the number and size of HTTP requests for CSS content, | |
| * this script combines multiple CSS files into a single file and compresses | |
| * it on-the-fly. | |
| * |
jalbertbowden
/ gist:5288206
Created
April 1, 2013 22:12
Accessible Icon Button When Using Icon Fonts http://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/
This file contains hidden or 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
| <button aria-label="Email"><span class="icon-envelope"></span></button> |
jalbertbowden
/ index.html
Created
April 3, 2013 19:23
Responsive progress meter - Demos using a for loop to calculate the positions of a series of way-points with an animated progress bar. codepen by codedsignal http://codepen.io/codedsignal/full/fwpaF
This file contains hidden or 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="inliner"></div> | |
| <div class="inlined"> | |
| <div class="progress-meter"> | |
| <div class="track"> | |
| <span class="progress"></span> | |
| </div> | |
| <ol class="progress-points" data-current="4"> | |
| <li class="progress-point" data-point="1"> | |
| <span class="label">Lorem ipsum</span> | |
| </li> |
jalbertbowden
/ round-icon-circular-menu.css
Last active
November 9, 2017 06:47
Position round icons into circle menu (StackOverflow) via thebabydino http://dabblet.com/gist/3864650
jalbertbowden
/ items-on-a-circle.html
Created
April 4, 2013 01:40
Items on circle - A Sass version of Ana's work consisting on putting items on circle with CSS: http://stackoverflow.com/questions/12813573/position-icons-into-circle. Made a mixin to make everything easy to use. Just set the size of the circle and the number of items to place. codepen via http://codepen.io/HugoGiraudel/.
This file contains hidden or 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
| <ul class='circle-container'> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/city'></a></li> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/nature'></a></li> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/abstract'></a></li> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/cats'></a></li> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/food'></a></li> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/animals'></a></li> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/business'></a></li> | |
| <li><a href='#'><img src='http://lorempixel.com/100/100/people'></a></li> | |
| </ul> |
jalbertbowden
/ index.html
Created
April 11, 2013 03:45
A CodePen by Vincent De Oliveira. Lavalamp menu in pure CSS - Lavalamp menu with CSS transitions on pseudo-elements<br/>
Works on Firefox, Chrome, Safari, Opera, IE10<br/>
Based on @kizmarh work : http://kizu.ru/en/pseudos/
This file contains hidden or 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
| <!-- | |
| Lavalamp menu with CSS transitions on pseudo-elements | |
| Works on Firefox, Chrome, Safari, Opera, IE10 | |
| Based on @kizmarh work : http://kizu.ru/en/pseudos/ | |
| --> | |
| <ul> | |
| <li><a href="#">✿</a></li><!-- | |
| --><li><a href="#">Lorem</a></li><!-- | |
| --><li><a href="#">Ipsum</a></li><!-- |
jalbertbowden
/ index.html
Created
April 11, 2013 04:13
A CodePen by Tim Pietrusky. Icon Fonts - CSS-Loader - For my article [5 Use Cases for Icon Fonts](http://css-tricks.com/five-use-cases-for-icon-fonts/) on CSS-Tricks.
This file contains hidden or 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="wrapper"> | |
| <span class="fontelico-spin1"></span> | |
| <span class="fontelico-spin3"></span> | |
| <span class="fontelico-spin5"></span> | |
| </div> | |
| <div class="complex"> | |
| <span class="fontelico-emo-devil"></span> | |
| <span class="fontelico-spin4"></span> | |
| </div> |
jalbertbowden
/ index.html
Created
April 11, 2013 04:13
A CodePen by Tim Pietrusky. Icon Fonts - Enhanced lists - For my article [5 Use Cases for Icon Fonts](http://css-tricks.com/five-use-cases-for-icon-fonts/) on CSS-Tricks.
This file contains hidden or 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> | |
| <h2>Stuff you love</h2> | |
| <ul class="love"> | |
| <li data-text="1">CodePen</li> | |
| <li data-text="3">GitHub</li> | |
| <li data-text="37">SoundCloud</li> | |
| </ul> | |
| </div> | |
| <div> |
jalbertbowden
/ index.html
Created
April 11, 2013 04:15
A CodePen by Tim Pietrusky. Icon Fonts - Parallax Movie #1337 - For my article [5 Use Cases for Icon Fonts](http://css-tricks.com/five-use-cases-for-icon-fonts/) on CSS-Tricks.
This file contains hidden or 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="night"></div> | |
| <div class="wrapper"> | |
| <div class="sun"> | |
| <div class="maki-fast-food"></div> | |
| </div> | |
| <div class="sky"></div> | |
| <span class="maki-bicycle"></span> | |