oksushi

span, div {
border: 4px solid hotpink;
text-align: right;
}

oksushi

/**
 * The first commented line is your dabblet’s title
 */

div {
width: 100px;
height: 100px;
background: hotpink;
margin: 200px;
box-shadow: 0 0 14px 2px rgba(0,0,0,.5);

oksushi

/**
 * The first commented line is your dabblet’s title
 */
body {background: black;}
ul {list-style: none; overflow: hidden; display: inline-block; margin-top: 10px;} ul {display: block;}
			ul li {float: left; position: relative; border: 5px solid #fff; margin-right: 10px; overflow: hidden;}
				ul li img {display: block;}
				ul li div.caption {position: absolute; top: -100%; background: #fff; padding: 10px; color: #666;}
					ul li:hover {cursor: pointer;}
					ul li:hover div.caption {top: 0;}

oksushi

/**
 * The first commented line is your dabblet’s title
 */
body {
background: url(http://www.placecage.com/1000/1000) center no-repeat fixed;
}
.cont {
position: fixed; 
width: 200px;
height: 100px;

oksushi

/**
 * Playing with counters
 */

section {
    counter-reset: myIndex 1962;
}
p
{
counter-increment: myIndex;

oksushi

/**
 * Overflowing text
 */
div {
white-space: nowrap;
border: 5px solid hotpink;
padding: 1em;
text-overflow: ellipsis;
overflow: hidden;
}

oksushi

/**
 * The first commented line is your dabblet’s title
 */

.out {width: 200px;
height: 200px;
position: relative;
background: lime;}
.slide {position: absolute;
left: 100%;

oksushi

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
	<rect x="-1" y="1" fill="#FFFFFF" width="58" height="57"/>
	<g>
		<polyline fill="none" stroke="#000000" stroke-linejoin="round" points="57.5,52 57.5,57.5 51,57.5 		"/>
		<line fill="none" stroke="#000000" stroke-linejoin="round" stroke-dasharray="15,15" x1="36" y1="57.5" x2="13" y2="57.5"/>

oksushi

/**
 * Hiding overflowing sharp edges
 */

div {padding: 1em;}
.inner {height: 100px; background: hotpink;}
.outer {background: lime; border-radius: 50%; padding: 1em}
.special {overflow: hidden;}

oksushi

/**
 * Showing that you cannot use an empty declaration.
 */

div {
position: relative;
z-index: 2;
width: 100px;
height: 100px;
background: hotpink;