David Yeiser davidyeiser
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
| /* | |
| STUFF'S GONNA 'SPLODE | |
| --------------------- | |
| The following CSS enables the exploding effect on the input label. | |
| (Only seen on modern browsers.) | |
| Context: http://gopotluck.com/ | |
| Related tutorial: http://designintellection.com/lab/exploding-text/ | |
| */ |
davidyeiser
/ jquery-text-explosion.js
Created
March 8, 2011 05:39
Associated jQuery for text explosion. As seen on http://gopotluck.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
| $(function() { | |
| $("#email-signup-label").lettering(); | |
| var is_search_empty = $(".email-signup input").attr("value"); | |
| if (!is_search_empty == "") { | |
| $("#email-signup-label").css({opacity:0}); | |
| } | |
| $("#email-signup-label").click(function() { | |
| $(".email-signup input").focus(); |
davidyeiser
/ text-explosion-sample.html
Created
March 8, 2011 06:01
The sample HTML used for the text explosion demo.
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
| <form class="email-signup"> | |
| <label id="email-signup-label">Sign-up for news, special offers & beta invites.</label> | |
| <input type="text" /> | |
| </form> |
davidyeiser
/ text-explosion-sample.css
Created
March 8, 2011 06:18
The basic setup CSS for the text explosion sample.
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
| .lab-exploading-text-example { padding-top:20px; background-color:#edeeee; } | |
| .lab-exploading-text-example form { padding-bottom:20px; position:relative; } | |
| .email-signup { height:80px; margin:20px 18px; position:relative; } | |
| .email-signup label { width:457px; height:31px; padding:17px 10px 8px 10px; position:absolute; left:1px; top:2px; font-size:18px; line-height:21px; text-shadow:0 0 1px rgba(0,0,0,0.15); cursor:text; color:#202020; background-color:transparent; z-index:3; } | |
| .no-js .email-signup label { position:relative; left:0; top:0; } | |
| .email-signup input { display:inline-block; width:457px; height:37px; padding:10px; position:relative; font-family:"proxima-nova-1", "proxima-nova-2", "Trebuchet MS", Verdana, sans-serif; font-size:18px; text-shadow:0 0 1px rgba(0,0,0,0.15); color:#909090; border:1px solid #d0d0d0; background-color:#fff; z-index:2; } | |
| .email-signup input:focus { outline:0; -webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1); } |
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
| module Sass::Script::Functions | |
| def exp(value, power) | |
| Sass::Script::Number.new(value.value**power.value) | |
| end | |
| end |
davidyeiser
/ example.scss
Created
February 14, 2012 16:22
Sass mixin for automatically determining modular scale font-size value
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
| $font-size-base: 16px; | |
| $font-size-minor: 10px; | |
| @mixin font-size($scale: 1) { | |
| font-size: round( | |
| ($font-size-base * ((exp(1.618, $scale) - exp(-0.618, $scale)) / 2.236)) + | |
| ($font-size-minor * ((exp(1.618, ($scale - 1)) - exp(-0.618, ($scale - 1))) / 2.236)) | |
| ); | |
| } |
davidyeiser
/ Command line
Created
February 14, 2012 16:29
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
| sass --watch FILENAME.scss:FILENAME.css -r sass_extensions.rb |
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
| body { @include font-size(1) } | |
| h1 { @include font-size(4) } | |
| h2 { @include font-size(2) } |
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
| body { font-size: 16px; } | |
| h1 { font-size: 68px; } | |
| h2 { font-size: 26px; } |
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
| .subhead { | |
| padding: 20px 0 10px 0; | |
| font-family: Georgia, serif; | |
| font-style: italic; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: #00f; | |
| } | |
| .minor-subhead { |
OlderNewer