Jace wenjul
wenjul
/ new_gist_file.css
Created
October 21, 2013 15:19
From http://www.html5rocks.com/en/tutorials/masking/adobe/?redirect_from_locale=zh
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
| img:hover { | |
| clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...); | |
| animate: star 3s; | |
| } | |
| @keyframes star { | |
| 0% { | |
| clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...); | |
| }, | |
| 100% { |
wenjul
/ new_gist_file
Created
October 23, 2013 02:39
From http://www.cssreset.com/css3-keyframe-animations-iphone-wiggle-effect/
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
| @-webkit-keyframes wiggle { from {-webkit-transform: rotateZ(2deg);} 50% {-webkit-transform: rotateZ(-2deg);} to {-webkit-transform: rotateZ(2deg);}} .productBox { -webkit-animation-name: wiggle; -webkit-animation-duration: .4s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease;} |
wenjul
/ dabblet.css
Created
November 7, 2013 15:30
— forked from LeaVerou/dabblet.css
iOS 6 style switch checkboxes
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
| /** | |
| * iOS 6 style switch checkboxes | |
| * by Lea Verou http://lea.verou.me | |
| */ | |
| :root input[type="checkbox"] { /* :root here acting as a filter for older browsers */ | |
| position: absolute; | |
| opacity: 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
| /** | |
| * iOS 6 style switch checkboxes | |
| * by Lea Verou http://lea.verou.me | |
| */ | |
| :root input[type="checkbox"] { /* :root here acting as a filter for older browsers */ | |
| position: absolute; | |
| opacity: 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
| /** | |
| * iOS 6 style switch checkboxes | |
| * by Lea Verou http://lea.verou.me | |
| */ | |
| :root input[type="checkbox"] { /* :root here acting as a filter for older browsers */ | |
| position: absolute; | |
| opacity: 0; | |
| } |
wenjul
/ rAF.js
Created
November 29, 2013 01:46
— forked from paulirish/rAF.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
| // http://paulirish.com/2011/requestanimationframe-for-smart-animating/ | |
| // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating | |
| // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel | |
| // MIT license | |
| (function() { | |
| var lastTime = 0; | |
| var vendors = ['ms', 'moz', 'webkit', 'o']; |
wenjul
/ dabblet.css
Created
January 10, 2014 01:19
— forked from hiro288/dabblet.css
(C)Leanest CSS spinner ever
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
| /** | |
| * (C)Leanest CSS spinner ever | |
| */ | |
| @keyframes spin { | |
| to { transform: rotate(1turn); } | |
| } | |
| .progress { | |
| position: relative; |
wenjul
/ index.html
Created
November 22, 2012 15:22
— forked from anonymous/index.html
Advanced Checkbox Hack - This works for both iOS and Android! You can use almost the default checkbox-hack syntax and just need to add two things:## 1. Android smaller than / equal 4.1.2pseudo-class + general/adjacent siblin
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>Advanced Checkbox Hack</h1> | |
| <input type="checkbox" id="button" /> | |
| <label for="button" onclick>click / touch</label> | |
| <div> | |
| Change my color! | |
| <br> | |
| <span>even mine :D</span> | |
| </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
| ::-webkit-scrollbar{height:16px; width:16px;} | |
| ::-webkit-scrollbar-button{height:0; width:0;} | |
| ::-webkit-scrollbar-button:start:decrement, | |
| ::-webkit-scrollbar-button:end:increment{display:block;} | |
| ::-webkit-scrollbar-button:vertical:start:increment, | |
| ::-webkit-scrollbar-button:vertical:end:decrement{display:none;} | |
| ::-webkit-scrollbar-track:vertical, | |
| ::-webkit-scrollbar-track:horizontal, | |
| ::-webkit-scrollbar-thumb:vertical, | |
| ::-webkit-scrollbar-thumb:horizontal{border-style:solid; border-color:transparent;} |
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
| /*上，下边框*/ | |
| .tBor:before, | |
| .bBor:after{ | |
| position:absolute; | |
| content: ""; | |
| height:1px; | |
| background:red; | |
| left:0; | |
| right:0; | |
| } |