This pen still is under construction... but works.
A Pen by Jordano Aragão on CodePen.
General Westerfeld CombatCreative
CombatCreative
/ Long-Shadow-Generator.markdown
Created
January 23, 2015 09:51
Long Shadow Generator
ryanve
/ breakpoint.js
Last active
June 9, 2024 21:49
JavaScript: Get the current media query breakpoint for a CSS feature.
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(root, name, make) { | |
| if (typeof module != 'undefined' && module['exports']) module['exports'] = make(); | |
| else root[name] = make(); | |
| }(this, 'breakpoint', function() { | |
| /** | |
| * @link http://gist.github.com/ryanve/7924792 | |
| * @param {string} feature range feature name e.g. "width" | |
| * @param {string=} unit CSS unit for feature e.g. "em" | |
| * @param {number=} init initial guess |
MaxLynam
/ custom.css
Last active
December 20, 2015 09:19
CSS Greyscale Image hover to full color - CSS3 Cross Browser Supported
Has images displayed as greyscale on normal display and then when hover displays the full color image :)
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
| element img { | |
| filter: alpha(opacity=100); | |
| opacity: 1.0; | |
| filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ | |
| filter: gray; /* IE6-9 */ | |
| -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ | |
| } | |
| element img:hover, element img:focus { | |
| filter: alpha(opacity=100); | |
| opacity: 1.0; |
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
| /** | |
| * CSS3 Isometric Text Demo v2 | |
| */ | |
| @font-face { | |
| font-family: 'LeagueGothicRegular'; | |
| src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot'); | |
| src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot?iefix') format('eot'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.woff') format('woff'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.ttf') format('truetype'), |