Изображение
Папка средствами CSS3, без использования изображений.

Структура папки очень простая и состоит всего из нескольких блоков:

Код: Выделить всё

<div class="folder">
	<div class="front"></div>
	<div class="back"></div>
</div>
Минимум разметки, только необходимые блоки для создания: передней, задней и верхней части нашего элемента. Теперь с помощью псевдо-классов :before и :after придадим разным элементам нужные детали.
Изображение
Рисунок для примера.
CSS:

Код: Выделить всё

.folder {
	/* Это позволит нам создать 3D эффект. Уменьшение этого значения
	* позволяет сделать открытую часть папки более выраженной: */

	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	perspective: 800px;

	top: 50%;
	left: 50%;
	z-index: 0;
	width: 160px;
	height: 120px;
	margin: -100px 0 0 -60px;
}
.folder div {
	width: 150px;
	height: 115px;
	background-color: #93bad8;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -75px;
}
.folder .front {
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;

	-moz-transform: rotateX(-30deg);
	-webkit-transform: rotateX(-30deg);
	transform: rotateX(-30deg);

	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;

	background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
	background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
	background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);

	-moz-box-shadow: 0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;
	-webkit-box-shadow: 0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;
	box-shadow: 0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;

	z-index: 10;
}
.folder .back {
	background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
	background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
	background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);

	-moz-border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;

	-moz-box-shadow: 0 -1px 1px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0 -1px 1px rgba(0,0,0,0.15);
	box-shadow: 0 -1px 1px rgba(0,0,0,0.15);
}

/* Верхняя часть */
.folder .back:before {
	content: '';
	width: 60px;
	height: 10px;

	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;

	background-color: #93bad8;
	position: absolute;
	top: -10px;
	left: 0px;
	-moz-box-shadow: 0 -1px 1px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0 -1px 1px rgba(0,0,0,0.15);
	box-shadow: 0 -1px 1px rgba(0,0,0,0.15);
}

/* Тень */
.folder .back:after {
	content: '';
	width: 100%;
	height: 4px;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	position: absolute;
	bottom: 5px;
	left: 0px;

	-moz-box-shadow: 0 4px 8px #333;
	-webkit-box-shadow: 0 4px 8px #333;
	box-shadow: 0 4px 8px #333;
}

Как обычно, папка будет выглядеть так, как её задумал автор, только в современных браузерах, поддерживающих CSS3.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.