Skip to content

Instantly share code, notes, and snippets.

@wenjul
wenjul / dabblet.css
Created November 7, 2013 15:30 — forked from LeaVerou/dabblet.css
iOS 6 style switch checkboxes
/**
* 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;
}
@-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;}
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
wenjul / 0_reuse_code.js
Created October 21, 2013 13:42
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@wenjul
wenjul / google scrollbar.css
Created July 1, 2013 07:35
google scrollbar style
::-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;}
@wenjul
wenjul / placeholder.css
Created June 19, 2013 11:10
兼容不支持placeholder的浏览器
.placeholder{color:#A2A2A2;}
::-webkit-input-placeholder { /* WebKit browsers */
color:#A2A2A2;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#A2A2A2;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#A2A2A2;
}
(function() {
var divs = $('.page'),
$next = $('.next'),
$prev = $('.prev'),
that = this,
loc, page;
for (var i = divs.length - 1; i >= 0; i--) {
var z = i + 1;
divs[i].style.left = i * 100 + '%';
divs[i].id = 'page-' + (i + 1);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS responsive images</title>
<style>
/* Doesn't stop original source image being
downloaded too */
@media (min-device-width:600px) {
@wenjul
wenjul / rAF.js
Created March 6, 2013 07:55 — forked from paulirish/rAF.js
// 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
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
@wenjul
wenjul / ie10hack.css
Created February 27, 2013 03:19 — forked from atk/ie10hack.css
/*
#ie10 will only be red in MSIE 10,
both in high contrast (display setting) and default mode
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#ie10 { color: red; }
}