Папка средствами CSS3, без использования изображений.
Структура папки очень простая и состоит всего из нескольких блоков:
Минимум разметки, только необходимые блоки для создания: передней, задней и верхней части нашего элемента. Теперь с помощью псевдо-классов
Рисунок для примера.
CSS:
Как обычно, папка будет выглядеть так, как её задумал автор, только в современных браузерах, поддерживающих CSS3.
Структура папки очень простая и состоит всего из нескольких блоков:
Код: Выделить всё
<div class="folder">
<div class="front"></div>
<div class="back"></div>
</div>
:before
и :after
придадим разным элементам нужные детали.Рисунок для примера.
Код: Выделить всё
.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.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.