V tomto krátkém tutoriálu vytvoříme složku podobnou OSX s CSS3 pomocí 3D transformací, přechodů a stínů rámečků. Kromě toho použijeme uživatelské rozhraní jQuery a jeho interakce přetažením k vytvoření pěkné interaktivní ukázky.
HTML
HTML složky je tak jednoduché, jak jen může být – potřebujeme pouze div pro přední obálku a jednu ze zadní strany:
<div class="folder">
<div class="front"></div>
<div class="back"></div>
</div>
Ve skvělém duchu tradic CSS3 udržujeme potřebné značkování na minimu a jsme závislí na pseudo :before a :after prvky pro přidání jemnějších detailů. Příklad naleznete na obrázku níže.
A zde je stránka, na které budeme pracovat. Uvnitř #main div je složka a ikony, které nastavíme jako přetahovatelné pomocí uživatelského rozhraní jQuery:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to Make a OSX-like Animated Folder with CSS3 | Tutorialzine </title>
<!-- The jQuery UI Styles -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<!-- Our stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<div id="main">
<div class="folder">
<div class="front"></div>
<div class="back"></div>
</div>
<img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" />
<!-- More icons here .. -->
</div>
<!-- JavaScript Includes -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> Před závěrečnou značkou těla také vkládám knihovnu jQuery a uživatelské rozhraní jQuery spolu se souborem script.js, který uvidíte později. Nejprve si proberme nejdůležitější část – CSS.
CSS
Nejprve upravíme styl div s třídou složky, kterou jste viděli výše. Zde také definujeme nastavení perspektivy, které je důležité pro 3D CSS efekt. Tuto vlastnost si můžete představit jako vaši vzdálenost od prvku (čím blíže jste, tím výraznější je perspektiva).
assets/css/styles.css
.folder {
/* This will enable the 3D effect. Decrease this value
* to make the perspective more pronounced: */
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
width: 160px;
height: 120px;
margin: -100px 0 0 -60px;
}
Poté upravíme styl .front a .zpět divs, které tvoří složku. Pravidla, která mají tyto prvky společná, jsem seskupil do .folder div blokovat:
.folder div{
width:150px;
height:115px;
background-color:#93bad8;
/* Enabling 3d space for the transforms */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
/* Enabling a smooth animated transition */
-webkit-transition:0.5s;
-moz-transition:0.5s;
transition:0.5s;
/* Disable text seleltion on the folder */
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position:absolute;
top:0;
left:50%;
margin-left:-75px;
} Pomocí vlastnosti přechodu sděluji prohlížeči, že by měl animovat mezi změnami hodnot ostatních vlastností CSS. To způsobí, že se složka otevře plynule, když začneme přetahovat jednu z ikon. Další je přední div:
.folder .front{
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%);
box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;
z-index:10;
font: bold 26px sans-serif;
color: #5A88A9;
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
line-height: 115px;
} Zde nastavíme pozadí předního krytu a použijeme počáteční otočení. Tím zůstane zadní kryt:
.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%);
border-radius:0 5px 0 0;
box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
/* The top part */
.folder .back:before{
content:'';
width:60px;
height:10px;
border-radius:4px 4px 0 0;
background-color:#93bad8;
position:absolute;
top:-10px;
left:0px;
box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
/* The shadow */
.folder .back:after{
content:'';
width:100%;
height:4px;
border-radius:5px;
position:absolute;
bottom:5px;
left:0px;
box-shadow:0 4px 8px #333;
} Jediné, co zbývá, je definovat otevřené třídy na složce. Když je tato třída přidána, přední část se nakloní dopředu o větší hodnotu rotationX.
.folder.open .front{
-moz-transform:rotateX(-50deg);
-webkit-transform:rotateX(-50deg);
transform:rotateX(-50deg);
} Skvělý! Nyní si nasypeme nějakou dobrotu jQuery, aby příklad fungoval:
jQuery
Jak jsem již zmínil, používáme uživatelské rozhraní jQuery a interakci drag&drop, abychom uživatelům umožnili přesouvat ikony. Když začne přetahování, použijeme otevření třídy do složky, která spustí přechod CSS3.
assets/js/script.js
$(function() {
var folder = $("#main .folder"),
front = folder.find('.front'),
img = $("#main img"),
droppedCount = 0;
img.draggable();
folder.droppable({
drop : function(event, ui) {
// Remove the dragged icon
ui.draggable.remove();
// update the counters
front.text(++droppedCount);
},
activate : function(){
// When the user starts draggin an icon
folder.addClass('open');
},
deactivate : function(){
// Close the folder
folder.removeClass('open');
}
});
}); A tím jsme skončili!
Sbalit
Je skvělé, že s CSS3 lze udělat tolik bez velkého úsilí. Ale mohlo by to být ještě chladnější – můžete použít HTML5 File APIs a umožnit uživatelům nahrávat soubory přetažením z jejich plochy (nápověda:pamatujete si tuto tutu?). Jsem si jistý, že vás lidi napadnou skvělé způsoby, jak tento kód vylepšit.