Skip to content

Instantly share code, notes, and snippets.

Clément P yukulele

  • France
Block or report user

Report or block yukulele

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@yukulele
yukulele / dabblet.css
Created Feb 4, 2014 — forked from LeaVerou/dabblet.css
urlencoded SVG checkerboard
View dabblet.css
/**
* urlencoded SVG checkerboard
*/
html{
min-height: 300px;
background: tan center url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%2358a"><rect x="50" width="50" height="50" /><rect y="50" width="50" height="50" /></svg>');
background-size: 20px;
transition:2s all;
}
@yukulele
yukulele / jquery.wordify.js
Created Jan 28, 2014
wrap each word in a span
View jquery.wordify.js
$.fn.wordify = function(){
this.find(":not(iframe,textarea)").addBack().contents().filter(function() {
return this.nodeType === 3;
}).each(function() {
var textnode = $(this);
var text = textnode.text();
text = text.replace(/([^\s-.,;:!?()[\]{}<>"]+)/g,'<span>$1</span>');
textnode.replaceWith(text);
});
return this;
@yukulele
yukulele / jquery.removeinlinecss.js
Created Jan 17, 2014
jQuery Inline CSS remover
View jquery.removeinlinecss.js
jQuery.fn.removeInlineCss = function(property){
if(property == null)
return this.removeAttr('style');
var proporties = property.split(/\s+/);
return this.each(function(){
var remover =
this.style.removeProperty // modern browsers
@yukulele
yukulele / dabblet.css
Created Jan 11, 2014 — forked from LeaVerou/dabblet.css
(C)Leanest CSS spinner ever
View dabblet.css
/**
* (C)Leanest CSS spinner ever
*/
@keyframes spin {
to { transform: rotate(1turn); }
}
.progress {
position: relative;
@yukulele
yukulele / dabblet.css
Created Jun 5, 2013
Psuedo element test on <img>
View dabblet.css
/*
Psuedo element test on <img>
*/
h1:after{
content:"h1 after";
color:pink;
}
h1:before{
content:"h1 before";
color:blue;
View performance.now()-polyfill.js
// if Navigation Timing is not supported, fallback to Date.naw() called on start (sufficient in many cases)
// Date.now is also polyfilled
(function(p){
if(!Date.now)
Date.now = function(){return +new Date};
if (!p.now){
var start = (p.timing && p.timing.navigationStart) || Date.now();
p.now = function now(){
return Date.now() - start;
View dabblet.css
/*matrix experiments*/
div{
width:200px;
height:200px;
margin:50px;
background:grey;
transition:transform 1s ease;
border-top-right-radius:100px;
transform:matrix(1,0,0,1,0,0);
View dabblet.css
/*matrix transform experiments*/
div{
width:200px;
height:200px;
margin:50px;
background:grey;
transition:transform 1s ease;
border-top-right-radius:100px;
transform:matrix(1,0,0,1,0,0);
View dabblet.css
h1 {color: #345; text-shadow: 1px 1px 2px #aaa; font-size:1.8em}
h2 {color: #567; text-shadow: 1px 1px 2px #aaa; font-size:1.1em}
h3 {margin-bottom: 0; color: #678; text-shadow: 1px 1px 2px #aaa; font-size:1em}
#sizer{
resize:horizontal;
max-width:800px;
background:#ccc;
padding:40px;
border-radius:20px;
overflow:hidden;
@yukulele
yukulele / dabblet.css
Created Mar 13, 2013 — forked from LeaVerou/dabblet.css
Hexagon kitty - By @LeaVerou
View dabblet.css
/* Hexagon kitty - By @LeaVerou
Disappointingly inflexible, but still interesting methinks.
*/
.hexagon {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
transform: scale(1.25,.707) rotate(-45deg);
You can’t perform that action at this time.