Nick LaDart nladart
nladart
/ dabblet.css
Created
January 20, 2013 05:04
The first commented line is your dabblet’s title
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
| /** | |
| * The first commented line is your dabblet’s title | |
| */ | |
| background: #f06; | |
| background: linear-gradient(45deg, #f06, yellow); | |
| min-height: 100%; |
nladart
/ dabblet.css
Created
January 20, 2013 08:47
— forked from anonymous/dabblet.css
Just foolin around with css3 animations
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
| /** | |
| * Just foolin around with css3 animations | |
| */ | |
| body { | |
| background: #fefefe; | |
| min-height: 100%; | |
| } | |
| .screen-reader-text { | |
| position: absolute; |
nladart
/ dabblet.css
Created
February 20, 2013 20:19
— forked from dgmid/dabblet.css
Animated HTML5 / CSS3 image caption - Example 3
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
| /** | |
| * Animated HTML5 / CSS3 image caption - Example 3 | |
| */ | |
| /* page styles */ | |
| body{ | |
| background: #fff; | |
| min-height:100%; | |
| } |
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="logo"> | |
| <div class="color-1"></div> | |
| <div class="color-2"></div> | |
| <div class="text">76</div> | |
| </div> |
nladart
/ index.html
Created
March 18, 2013 03:47
A CodePen by bookcasey. Full bleed background images with CSS3 filter
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>Hip, full bleed background images</h1> | |
| <h2>Mobile friendly <a href="http://i.imgur.com/tSTc4MJl.jpg">14kb image</a></h2> | |
| <p>Photo by <a href="http://www.flickr.com/photos/genbug/4894554385/">Lauren Gilmore</a> |
nladart
/ index.html
Created
March 18, 2013 03:52
Buttons with icons - Could still use some work but a pretty cool start
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
| <a class="btn btn--icon btn--favorite" href=#><i>$</i><span>Favorite</span></a> | |
| <a class="btn btn--icon btn--add" href=#><i>+</i><span>Add</span></a> | |
| <a class="btn btn--icon btn--delete" href=#><i>×</i><span>Delete</span></a> | |
| <a class="btn btn--icon" href=#><i>More</i><span>Default</span></a> | |
| <a class="btn btn--add" href=#><span>Iconless</span></a> |
nladart
/ index.html
Created
March 18, 2013 03:57
Clover image crop - Everyone is circle cropping bio and profile pictures on the web now using border-radius. Do more than just circles.
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="clover"> | |
| <img src="http://fillmurray.com/200/200" class="a" /> | |
| <img src="http://placecage.com/200/200" class="b" /> | |
| <img src="http://nicenicejpg.com/200/200" class="c" /> | |
| <img src="http://placesheen.com/200/200" class="d" /> | |
| </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
| .container | |
| .signals | |
| %span.signal-1 | |
| %span.signal-2 | |
| %span.signal-3 | |
| %span.signal-4 | |
| %span.signal-5 | |
| %span.signal-6 | |
| %span.signal-7 | |
| %span.signal-8 |
nladart
/ index.html
Created
March 19, 2013 02:11
Twitter bird CTA animation with CSS3 + a bouncing logo and rolling link btn
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="container"> | |
| <div class="twitter-bird step"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="logo"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="button"> |
nladart
/ index.html
Created
March 19, 2013 02:24
A CodePen by awesomephant. Sass flat-design-button mixin - Playing w/ falt design and fancy Sass functions. ---
Entypo pictograms by Daniel Bruce — (www.entypo.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
| <a href='#' class='danger'>Delete that thing.</a> | |
| <a href='#' class='power'>Turn on the energy.</a> | |
| <a href='#' class='signup'>Sign Up</a> | |
| <a href='#' class='save'>Save</a> | |
| <a href='#' class='fb'>Like us on Facebook</a> | |
| <a href='#' class='twitter'>Follow us on Twitter</a> |
OlderNewer