aurelkurtula

/**
 * box with fine border shadow
 */
/* got it from @LeaVerou via http://www.youtube.com/watch?v=3ikye7Qc7Ak&list=WL32E91C6871EAFE00 */
div{
overflow: scroll;
width: 200px;
height: 300px;

margin-top: 100px;

aurelkurtula

/**
 * center content without wrapper
 * got it from @LeaVerou via http://www.youtube.com/watch?v=3ikye7Qc7Ak&list=WL32E91C6871EAFE00
 */

section{
width: 300px;
padding: 0 calc(50% - 150px);
}

aurelkurtula

/**
 * text lines
 * got it from @LeaVerou via http://www.youtube.com/watch?v=3ikye7Qc7Ak&list=WL32E91C6871EAFE00
 */


p{


width: 70%;

aurelkurtula

/**
 * Typing animation with pure CSS. 
 * Works best in browsers supporting the ch unit.
 */

@keyframes typing { from { width: 0; } /*width of the h1 as container */ }
@keyframes blink-caret { 50% { border-color: transparent; } }

h1 { 
	font: bold 200% Consolas, Monaco, monospace;

aurelkurtula

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

div{
	width: 200px;
	height: 200px; 
	background: red;
	margin: 80px;
	border-radius: 20px;

aurelkurtula

/**
 * tooltip with inner shadow
 */

div{
	width: 200px;
	height: 200px; 
	background: red;
	margin: 80px;
	border-radius: 20px;

aurelkurtula

/**
 * The first commented line is your dabblet’s title
 */
#c{
margin: 100px;}
.powerL{
width: 50px;
height: 50px;
background: red;
display:block;

aurelkurtula

/**
 * css half background
 */


body{
background:
-webkit-linear-gradient(
left, white, white 50%, #1f2024 50%, #1f2024

aurelkurtula

/**
 * hover effect
 http://www.diesel.com/campaign/#/
 */
body{
background: gray;
}

#container{
	width: 300px; 

aurelkurtula

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


ul{
    padding: 0;
    margin: 0;
    height: 150px;
    width: 400px;