Ricreare il desktop di Mac OS X con i CSS non è un'impresa ardua. La maggior parte del lavoro, infatti, consiste nel cercare e collezionare le varie icone e gli sfondi da usare con i CSS. Le tecniche CSS richieste si riducono alle proprietà degli sfondi, al floating e al posizionamento. Il risultato finale è di sicuro impatto visivo e ci ripaga del tempo speso su Google Images e su Photoshop. Vediamo l'implementazione.
Il nostro desktop sarà composto da quattro parti principali:
- Barra superiore, a sua volta composta da
- Barra del menu Finder
- Barra delle applicazioni e dei servizi
- Barra inferiore del Dock
Ecco la marcatura:
<div id="desktop">
<div id="menu-bar">
<ul id="menu-actions">
<li id="apple"><a href="#">System commands</a></li>
<li><a href="#"><strong>Finder</strong></a></li>
<li><a href="#">File</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">View</a></li>
<li><a href="#">Go</a></li>
<li><a href="#">Window</a></li>
<li><a href="#">Help</a></li>
</ul>
<ul id="menu-utilities">
<li id="time-machine"><a href="#">Time Machine</a></li>
<li id="bluetooth"><a href="#">Bluetooth</a></li>
<li id="airport"><a href="#">Airport</a></li>
<li id="volume"><a href="#">Volume</a></li>
<li id="spotlight"><a href="#">Spotlight</a></li>
</ul>
</div>
<div id="dock">
<ul>
<li id="finder"><a href="#">Finder</a></li>
<li id="mail"><a href="#">Mail</a></li>
<li id="safari"><a href="#">Safari</a></li>
<li id="trash"><a href="#">Trash</a></li>
</ul>
</div>
</div>
Cominciamo col dare gli stili CSS generali:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
font: 100% Tahoma, sans-serif;
}
body {
background: navy url(css-mac/desktop-bg.png);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
#desktop {
width: 100%;
height: 100%;
min-height: 100%;
position: relative;
}
Il nostro contenitore generale avrà una larghezza ed un'altezza piena e sarà posizionato in modo relativo. Questo ci consentirà in seguito di posizionare in basso la barra del Dock.
La barra superiore è costituita da due menu posizionati uno a sinistra e l'altro a destra. Useremo il floating per ottenere questo effetto e per allineare gli elementi al loro interno:
#menu-bar {
height: 20px;
background: #f7f7f5 url(css-mac/topbar-bg.png) repeat-x;
}
#menu-actions {
float: left;
padding: 0 1em;
color: #000;
font-weight: bold;
}
#menu-actions li {
float: left;
margin-right: 1em;
height: 100%;
line-height: 20px;
}
#menu-actions li a {
text-decoration: none;
color: #000;
text-shadow: 0 2px 2px #f7f7f7;
}
#menu-actions li#apple {
width: 19px;
height: 100%;
}
#menu-actions li#apple a {
display: block;
width: 100%;
height: 100%;
text-indent: -1000em;
background: url(css-mac/apple.png) no-repeat 0 50%;
float: left;
}
#menu-utilities {
float: right;
height: 100%;
padding: 0 1em;
}
#menu-utilities li {
float: left;
height: 100%;
width: 30px;
}
#menu-utilities li a {
display: block;
width: 100%;
height: 100%;
float: left;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 50% 50%;
}
#menu-utilities #time-machine a {
background-image: url(css-mac/time-machine.png);
}
#menu-utilities #bluetooth a {
background-image: url(css-mac/blue-tooth.png);
}
#menu-utilities #airport a {
background-image: url(css-mac/airport.png);
}
#menu-utilities #volume a {
background-image: url(css-mac/volume.png);
}
#menu-utilities #spotlight a {
background-image: url(css-mac/spotlight.png);
}
Per sostituire il testo con le immagini di sfondo abbiamo utilizzato la proprietà text-indent
con un valore negativo molto elevato. A questo punto dobbiamo posizionare la barra del Dock in basso e allineare le icone al suo interno:
#dock {
width: 800px;
height: 119px;
background: url(css-mac/dock.png) no-repeat 0 100%;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -400px;
}
#dock ul {
width: 600px;
height: 100%;
margin: 0 auto;
}
#dock ul li {
float: left;
height: 100%;
width: 119px;
margin-right: 1em;
}
#dock ul li a {
float: left;
height: 100%;
width: 100%;
text-indent: -1000em;
background-repeat: no-repeat;
background-position: 0 0;
}
#dock ul #finder a {
background-image: url(css-mac/finder.png);
}
#dock ul #mail a {
background-image: url(css-mac/mail.png);
}
#dock ul #safari a {
background-image: url(css-mac/safari.png);
}
#dock ul #trash a {
background-image: url(css-mac/trash.png);
}
Anche in questo caso abbiamo utilizzato il floating per allineare le icone all'interno del Dock. Il Dock è stato centrato orizzontalmente combinando il valore 50% della proprietà left
con un valore negativo pari alla metà della sua larghezza per il suo margine sinistro. Dato che la proprietà bottom
è impostata su 0, il Dock si posizionerà in fondo alla pagina.
Potete visionare l'esempio finale in questa pagina.