Chris Mousdale Chrisedmo
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
| /** | |
| * CSS3 gradients on text… | |
| */ | |
| h2[data-text] { | |
| position: relative; | |
| font-size: 20vh; | |
| font-family: helvetica, sans-serif; | |
| color: transparent; |
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
| /** | |
| * Nice CSS3 Piechart effect - could be a nav? | |
| */ | |
| html { background: gainsboro; } | |
| body { | |
| margin: 3em auto 0; | |
| width: 6em; | |
| height: 6em; |
Chrisedmo
/ dabblet.css
Created
February 23, 2013 14:41
CSS3 Webkit text/image clippins w/fallback: http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
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
| /** | |
| * CSS3 Webkit text/image clippins w/fallback: http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html | |
| */ | |
| body { | |
| background-color: #444 } | |
| h1 { | |
| text-align: center; | |
| font-size: 5em; | |
| font-family: sans-serif; | |
| color: #fff; |
Chrisedmo
/ SHOPIFY: Percentage Discount Saved
Created
May 2, 2013 19:00
SHOPIFY: How To Show Percentage Discount Saved
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
| {% comment %}How To Show Percentage Discount Saved{% endcomment %} | |
| {% if product.compare_at_price_max > product.price %}You save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: ‘.0′}}%{% endif %} |
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
| .disc-wrap {width: 300px; height: 300px; margin: 0 auto;} | |
| .disc-wrap:hover > li {opacity: 0.5;} | |
| .disc-wrap:hover > li:hover {opacity: 1;} | |
| ul {margin: 0; padding: 0;} | |
| li {list-style: none; width: 150px; height: 150px;float: left; background-color: #eee; text-align: center;} | |
| li:hover {transform: scale(1.25)} | |
| li:nth-child(1) {border-top-left-radius: 100%;background-color:red; transform-origin: bottom right;} | |
| li:nth-child(2) {border-top-right-radius: 100%;background-color:lightblue;transform-origin: bottom left} | |
| li:nth-child(3) {border-bottom-left-radius: 100%;background-color:orange;transform-origin: top right} | |
| li:nth-child(4) {border-bottom-right-radius: 100%;background-color:darkgreen;transform-origin: top left} |
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
| .disc-wrap {width: 300px; height: 300px; margin: 0 auto;} | |
| .disc-wrap:hover > li {opacity: 0.5;} | |
| .disc-wrap:hover > li:hover {opacity: 1;} | |
| ul {margin: 0; padding: 0;} | |
| li {list-style: none; width: 150px; height: 150px;float: left; background-color: #eee; text-align: center;} | |
| li:hover {transform: scale(1.25)} | |
| li:nth-child(1) {border-top-left-radius: 100%;background-color:red; transform-origin: bottom right;} | |
| li:nth-child(2) {border-top-right-radius: 100%;background-color:lightblue;transform-origin: bottom left} | |
| li:nth-child(3) {border-bottom-left-radius: 100%;background-color:orange;transform-origin: top right} | |
| li:nth-child(4) {border-bottom-right-radius: 100%;background-color:darkgreen;transform-origin: top left} |
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
| /** | |
| * Cool CSS3 Pop out search boxes | |
| */ | |
| /* reset webkit search input browser style */ | |
| input { | |
| outline: none; | |
| } | |
| input[type=search] { | |
| -webkit-appearance: textfield; |
Chrisedmo
/ less-colours.less
Created
August 13, 2013 09:11
Generate colour schemes from single colour with LESS
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
| // LESS COLOUR SCHEMES | |
| // Complementary Color Scheme | |
| @base: #663333; | |
| @complement1: spin(@base, 180); | |
| @complement2: darken(spin(@base, 180), 5%); | |
| @lighten1: lighten(@base, 15%); | |
| @lighten2: lighten(@base, 30%); | |
| // Implementation |
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
| http://aralbalkan.com/scribbles/npm-install-g-please-try-running-this-command-again-as-root-administrator/ | |
| Enter this into the terminal: | |
| sudo chown -R $USER /usr/local |