HTML
<div class="shelf">

  <div class="bookend_left"></div>
	<div class="bookend_right"></div>
	<div class="reflection"></div>

</div>
//Colors

@color1: #d1d8de; //top surface
@color2: #596c7c; //front edge
@color3: #ffffff; //page color

//Mixins

.box-shadow (@shadow1, @shadow2: transparent 0 0 0, @shadow3: transparent 0 0 0, @shadow4: transparent 0 0 0, @shadow5: transparent 0 0 0, @shadow6: transparent 0 0 0) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6;
  	-moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6;
		box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5, @shadow6;
}

.4-color-gradient (@colorStart, @colorStop1, @colorStop2, @colorEnd, @position1: 0%, @position2: 50%, @position3: 50%, @position4: 100%, @angle: 90deg, @oldangle1: left top, @oldangle2: right bottom, @iegradtype: 0) {
		background-image: -moz-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4); /*FF3.6+ */
		background-image: -webkit-gradient(linear, @oldangle1, @oldangle2, color-stop(@position1,@colorStart), color-stop(@position2, @colorStop1), color-stop(@position3,@colorStop2), color-stop(@position4,@colorEnd)); /*Chrome,Safari4+ */
		background-image: -webkit-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4);/* Chrome10+,Safari5.1+ */
		background-image: -o-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4); /* Opera 11.10+ */
		background-image: -ms-linear-gradient(@angle, @colorStart @position1, @colorStop1 @position2, @colorStop2 @position3, @colorEnd @position4); /*IE10+ */
		filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{colorEnd}', endColorstr='@{colorStart}', GradientType='@{iegradtype}' )"; /* IE6-9 */
}

.2-color-gradient (@colorStart, @colorEnd, @position1: 0%, @position2: 100%, @angle: 90deg, @oldangle1: left top, @oldangle2: right bottom, @iegradtype: 0) {
		background-image: -moz-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /*FF3.6+ */
		background-image: -webkit-gradient(@angle, @oldangle1, @oldangle2, color-stop(@position1, @colorStart), color-stop(@position2, @colorEnd)); /*Chrome,Safari4+ */
		background-image: -webkit-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /*Chrome10+,Safari5.1+ */
		background-image: -o-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /* Opera 11.10+ */
		background-image: -ms-linear-gradient(@angle,  @colorStart @position1, @colorEnd @position2); /*IE10+ */
		filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{colorEnd}', endColorstr='@{colorStart}', GradientType='@{iegradtype}' )"; /* IE6-9 */
}

.transform (@transform) {
		-webkit-transform: @transform;
		-moz-transform: @transform;
		-ms-transform: @transform;
		-o-transform: @transform;
}

//CSS

body {
		background-color: @color3;
}

.shelf {
		display: block;
		position: relative;
		width: 60%;
		height: 20px;
  	margin: 100px auto 0;
//LESS Mixins
		.2-color-gradient (@color1, lighten(@color1, 10%), 0%, 100%);
		.box-shadow (0 2px 2px lighten(@color2, 10%), 0 4px 0 lighten(@color2, 30%), 0 20px 30px -8px #000000);
}

.bookend_left {
		display: block;
		position: absolute;
		left: -25px;
		top: -18px;
		width: 36px;
		height: 36px;
		background-color: @color3;
//LESS Mixins
		.transform (rotate(35deg));
}

.bookend_left:before {
		position: absolute;
		top: 31px;
		left: 17px;
		width: 20px;
		height: 10px;
		background-color: @color3;
		content:"";
//LESS Mixins
		.transform (rotate(-35deg));
}		

.bookend_right {
		display: block;
		position: absolute;
		right: -25px;
		top: -18px;
		width: 36px;
		height: 36px;
		background-color: @color3;
//LESS Mixins
		.transform (rotate(-35deg));
}

.bookend_right:before {
		position: absolute;
		top: 31px;
		right: 17px;
		width: 20px;
		height: 10px;
		background-color: @color3;
		content:"";
//LESS Mixins
		.transform (rotate(35deg));
}

.shelf .reflection {
		display: block;
		position: absolute;
		top: 20px;
		left: 1px;
		width: 99.8%;
		height: 1px;
//LESS Mixins
		.4-color-gradient (rgba(255,255,255,1.0), rgba(255,255,255,0.5), rgba(255,255,255,1.0), rgba(255,255,255,0.7), 0%, 35%, 65%, 100%, 0deg, left top, right top);
}
JavaScript

				

Recently Added

Social Icons

SCSS social icon with hover effect and active state.

Loader

SCSS loader fade in and fade out.

Keyboard

CSS keyboard with beautiful color and effect.

Randomize

Showing random numbers mixed up.

Buttons

Buttons with beautiful hover effect.

Glass Effect

Beautiful glass effect with css.

Clip Animation

Creating clip animation with css.

Google Icons

Google logos with css.

Abstract Art

Abstract art with pure css. Combination of shapes created with css.