Skip to content

Instantly share code, notes, and snippets.

@zincplusplus
zincplusplus / dabblet.css
Created December 28, 2011 15:49
heart shape thumbnail
/**
* heart shape thumbnail
**/
body {
background: #eee;
counter-reset:section;
}
li {
background: url(http://dl.dropbox.com/u/10214082/heart3-back.png) no-repeat 50% 1px;/*url(http://f.cl.ly/items/3i1z343e1G1A1x2O3L3L/Untitled-2.png) no-repeat 20px 20px*/
/**
* kremlin
**/
background:
linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 50%) 20em 0em,
linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.2) 50%) 20em 0em,
linear-gradient(45deg, transparent 10%, green 10%, green 35%, transparent 35%, transparent 60%, green 60%, green 85%, transparent 85%);
background-size: 50em 50em, 50em 50em, 100em 100em;
background-color: yellow;
font-size: 1px;
/**
* candy
*/
background:
radial-gradient(circle, #ED1F68 40%, transparent 40%) 0 -43px,
linear-gradient(left, transparent 46%, #ED4B78 46%, #ED1F68 54%, transparent 54%);
background-size: 200px 200px;
/**
* candy
*/
background:
radial-gradient(circle, #fff 38%, transparent 38%) 50px 57px,
radial-gradient(circle, #E21777 9%, transparent 9%) 50px -305px,
linear-gradient(left, transparent 45%, #fff 45%, #fff 55%, transparent 55%) 50px 0,
radial-gradient(circle, #000 38%, transparent 38%) 0 -43px,
radial-gradient(circle, #E21777 9%, transparent 9%) 0 -81px,
@zincplusplus
zincplusplus / dabblet.css
Created December 30, 2011 10:06
gist to dabblet
/*
* gist to dabblet
*/
body {
background: #2E3538 url("http://dabblet.com/img/noise.png");
color: #eee;
font-family: Helvetica, Arial, sans;
height: 100%;
margin: 50px 0 0;
position: relative;
/**
* twisted
**/
body {
background:
linear-gradient(-45deg, transparent 49%, rgba(0,0,0,0.1) 49%, rgba(0,0,0,0.2) 50%, #ffff00 50%, #ffcc00 63%, transparent 63%) 34em 0,
linear-gradient(-45deg, transparent 48%, rgba(0,0,0,0.2) 48%, rgba(0,0,0,0.2) 50%, #ff5300 50%, #ff3300 63%, rgba(0,0,0,0.1) 63%, rgba(0,0,0,0.1) 64%, transparent 64%) 60em 0,
linear-gradient(45deg, transparent 50%, #ffcc00 50%, #ffcc00 63%, transparent 63%) -26em 0,
linear-gradient(45deg, transparent 50%, #ff3300 50%, #ff3300 63%, transparent 63%);
background-color: #333;
@zincplusplus
zincplusplus / dabblet.css
Created January 2, 2012 10:34
The -Webkit-scrollbar challenge
/**
* The -Webkit-scrollbar challenge
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Make the first div’s scrollbar like the second’s
* without changing the styling of the div (i.e. you
* can only change the ::-webkit-scrollbar-* rules
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
* It doesn't matter if the second div doesn't look the same
* after your changes, it's only there to show you how the
@zincplusplus
zincplusplus / dabblet.css
Created January 2, 2012 11:04
The save-as window
/**
* The save-as window
* start: 1h 19:35
* end:
*/
/*----------------------------------------------------------------------------------
* tools
---------------------------------------------------------------------------------*/
/**
* fashion
*/
background:
linear-gradient(45deg, rgba(0,0,0,.1), rgba(255,255,255,.1) 25%, rgba(0,0,0,.1) 50%, rgba(255,255,255,.1) 75%, rgba(0,0,0,.1)),
radial-gradient(circle, #254383 8%, transparent 8%, transparent 30%, #254383 30%, #254383 35%, transparent 35%),
radial-gradient(circle, #254383 6%, transparent 6%) 25em 25em;
background-size: 100% 100%, 50em 50em, 50em 50em;
background-color: #112564;
font-size:1px;
/**
* cheetah
*/
background:
radial-gradient(circle, #3F2204 20%, transparent 20%) 0em 51em,
radial-gradient(circle, #3F2204 21%, transparent 21%) 67em 10em,
radial-gradient(circle, #472b0e 20%, transparent 20%) 145em 0em,
radial-gradient(circle, #3F2204 17%, transparent 17%) -8em 60em,
radial-gradient(circle, #3F2204 20%, transparent 20%) 66em 21em,
radial-gradient(circle, #472b0e 22%, transparent 22%) 120em 84em,