tathagata6

tathagata6 / dabblet.css

Created January 14, 2016 09:43 — forked from csssecrets/dabblet.css

Translucent borders

	/**
	* Translucent borders
	*/

	body {
	background: url('http://csssecrets.io/images/stone-art.jpg');
	}

	div {
	border: 10px solid red;

tathagata6 / dabblet.css

Created January 13, 2016 07:08 — forked from csssecrets/dabblet.css

Bouncing animation

	/**
	* Bouncing animation
	*/

	@keyframes bounce {
	60%, 80%, to {
	transform: translateY(400px);
	animation-timing-function: ease;
	}
	70% { transform: translateY(300px); }

tathagata6 / dabblet.css

Created January 12, 2016 09:03 — forked from csssecrets/dabblet.css

Text on a circle

	/**
	* Text on a circle
	*/

	body {
	font: bold 120% Helvetica, sans-serif;
	}

	.circular {
	width: 30em;

tathagata6 / dabblet.css

Created January 12, 2016 07:55

Custom checkboxes

	/**
	* Custom checkboxes
	*/

	input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
	}

	input[type="checkbox"] + label::before {

tathagata6 / dabblet.css

Created January 12, 2016 07:55 — forked from csssecrets/dabblet.css

Custom checkboxes

	/**
	* Custom checkboxes
	*/

	input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
	}

	input[type="checkbox"] + label::before {

tathagata6 / dabblet.css

Last active January 12, 2016 07:56

The first commented line is your dabblet’s title

	/* The first commented line is your dabblet’s title
	*/
	input[type="checkbox"] {
	position: absolute;
	clip: rect(0,0,0,0);
	}
	input[type="checkbox"] + label::before {
	content:"\a0\a0\a0\a0";
	width:20px;
	height:20px;

tathagata6 / dabblet.css

Last active January 12, 2016 06:56 — forked from csssecrets/dabblet.css

Beveled corners — with clip-path

	/**
	* Beveled corners — with clip-path
	*/

	div {
	background: #58a;
	-webkit-clip-path:
	polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
	calc(100% - 20px) 100%,
	20px 100%, 0 calc(100% - 20px), 0 20px);