Todd Rumball trumball
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
| /* Mixin */ | |
| .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { | |
| -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); | |
| -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); | |
| box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); | |
| } | |
| /* Implementation */ | |
| #somediv { | |
| .box-shadow(5px, 5px, 6px, 0.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
| /* Mixin */ | |
| .border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) { | |
| -webkit-border-radius: @topleft @topright @bottomright @bottomleft; | |
| -moz-border-radius: @topleft @topright @bottomright @bottomleft; | |
| border-radius: @topleft @topright @bottomright @bottomleft; | |
| } | |
| /* Implementation */ | |
| #somediv { | |
| .border-radius-custom(20px, 20px, 0px, 0px); |
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
| /* Mixin */ | |
| .border-radius (@radius: 5px) { | |
| -webkit-border-radius: @radius; | |
| -moz-border-radius: @radius; | |
| border-radius: @radius; | |
| } | |
| /* Implementation */ | |
| #somediv { | |
| .border-radius(20px); |
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
| p{ | |
| margin-bottom:20px; | |
| } | |
| p+p{ | |
| text-indent:2em; | |
| margin-top:-20px; | |
| } |
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
| @media print { | |
| #main-content a[href]:after { " (" attr(href) ") "; } | |
| } |
trumball
/ BasicApp
Created
July 3, 2013 19:11
file structure based on: https://github.com/tylersavery/jQueryTO2013/tree/master/code/BasicApp.js
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
| /* file structure based on: https://github.com/tylersavery/jQueryTO2013/tree/master/code/BasicApp.js */ | |
| //set global app | |
| var App = {}; | |
| App.Init = function() { | |
| App.Cache(); | |
| App.BindListeners(); | |
| App.InitVideo(); |
trumball
/ Form PUT DELETE
Created
May 24, 2013 21:04
Form PUT
This is the correct way to use PUT and DELETE in a HTML form
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 method="POST"> | |
| <input type="hidden" name="_METHOD" value="PUT"/> | |
| </form> | |
| <form method="POST"> | |
| <input type="hidden" name="_METHOD" value="DELETE"/> | |
| </form> |
trumball
/ Featured CSS3 Display Banner
Created
May 24, 2013 20:49
Featured CSS3 Display Banner
Generally you would need to setup a background image to duplicate this effect in other browsers. But in CSS3-supported engines we can generate dynamic banners which hang off the edge of your content wrappers, all without images! These may look good attached onto e-commerce products, image thumbnails, video previews, …
trumball
/ Glowing Anchor Links
Created
May 24, 2013 20:49
Glowing Anchor Links
CSS3 text shadows offer a unique method of styling your webpage typography. And more specifically this snippet is an excellent resource for custom creative links with glowing hover effects. I doubt this effect can be pulled off elegantly in the majority of websites, but if you have the patience to get it looking nice you are…
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 { | |
| color: #00e; | |
| } | |
| a:visited { | |
| color: #551a8b; | |
| } | |
| a:hover { | |
| color: #06e; | |
| } | |
| a:focus { |
trumball
/ Paper Page Curl Effect
Created
May 24, 2013 20:48
Paper Page Curl Effect
This page curl effect can be applied to almost any container which holds website content. Immediately I thought about image media and quoted text, but really this could be anything at all. Check out the snippet’s live demo page for a better grasp of how these page curls function.
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
| ul.box { | |
| position: relative; | |
| z-index: 1; /* prevent shadows falling behind containers with backgrounds */ | |
| overflow: hidden; | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| ul.box li { |