Sul PV.M Garage focalizziamo spesso l’attenzione su quelle che sono le nuove tendenze del Web Design moderno e sulle nuove tecniche utili per creare siti web accattivanti e usabili.
In uno dei nostri tutorial abbiamo imparato come realizzare simpatici nastri e come giocare con la “drop shadow” di Photoshop per donare profondità ai nostri layout. Creare una percezione 3D in un sito e simulare un “mondo” in tre dimensioni è una tendenza molto diffusa nella creazione di layout grafici per il web.

Grazie a utilissimi software di grafica siamo in grado di disegnare con relativa facilità elementi in tre dimensioni, inoltre è anche possibile donare profondità utilizzando la prospettiva e un mix intelligente di gradienti e opacità. Senza dimenticare che esistono programmi, come Blender, che permetto la costruzione di oggetti 3D e immagini anche molto complesse da poter utilizzare nei nostri design.
C’è un interessante articolo che descrive diverse tecniche per simulare una percezione 3D nei lavori di Web Design su CreativityDen, consiglio un’attenta lettura: The six fundamental ways of adding depth in web design works.

Molti siti web evidenziano una bilanciata percezione della profondità ed è chiaro che questi tipi di layout richiedono l’utilizzo opportuno ed intelligente di immagini (generalmente richiamate attraverso la proprietà background dei CSS), linee e alcune tecniche CSS al fine di creare l’illusione della terza dimensione (Henry Jones, su Web Design Ledger, ha scritto un brillante articolo sull’utilizzo di linee da 1 pixel per esaltare distanze e bassorilievi; altra lettura consigliata: Adding depth with pixel perfect line work). Qui in basso è possibile apprezzare alcuni esempi di siti web che utilizzano diverse soluzioni per creare effetti 3D.

DesignM.ag

Blogof.FrancescoMugnai.com

Yoast.com

From-The-Couch.com

Calma. Siamo web designer, giusto? Abbiamo due grandi alleati per portare a termine i nostri progetti quotidiani: HTML e CSS ed evidente che i miglioramenti di questi due linguaggi sono stati considerevoli negli ultimi tempi. Dopo aver letto diversi articoli su come i CSS3 potrebbero migliorare e semplificare lo sviluppo delle interfacce per il web, mi sono chiesto fino a che punto sia possibile realizzare un layout in tre dimensioni semplicemente utilizzando HTML e alcune nuove proprietà dei CSS.

Nuove Proprietà dei CSS Utili nella Realizzazione di Elementi 3D

Ci sono alcune nuove proprietà dei CSS che ci aiuteranno a raggiungere il nostro scopo.

Utilizzeremo box-shadow, per creare la famosa “drop-shadow”, con l’aiuto di RGBa, un “color model” supportato dai nuovi browser che permette di ottimizzare il contrasto tra l’ombra e lo sfondo.

background: rgba(196,89,30,0.65);

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

Un’altra grande proprietà dei CSS è il border-radius che ci permette di aggiungere angoli arrotondati, specificandone il raggio, a diversi elementi.

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;

Utilizzeremo anche bordi particolari per generare forme triangolari e costruire il nostro “ribbon”. Di seguito è possibile dare uno sguardo al codice che ci permette di disegnare triangoli utilizzando i CSS (per saperne di più su questa tecnica è opportuno leggere Creating Triangles in CSS su DinnerMint)

.triangle {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
}

Il triangolo, o la freccia, è utile per dare profondità ad alcuni elementi 3D. Box-shadow ci permette di aggiungere ombre a nostro piacimento. Border-radius, invece, ammorbidisce gli angoli spigolosi di forme rettangolari ovunque lo desideriamo.

Inoltre costruiremo un semplice menu, attraverso una “unordered list”, usando la proprietà transform per le singole voci della lista.

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);

In basso è possibile analizzare il risultato finale dei nostri sforzi, scaricare l’archivio contenente i file sorgenti e visualizzare la demo.

Come costruire un layout 3D solo con i CSS

Prima di ogni cosa, impostiamo la cartella con i nostri file: index.html e style.css

Prepariamo il documento HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Ribbon</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- 3D Stuff -->

</body>
</html>

Osservando l’immagine seguente, è possibile capire come costruiremo la struttura nella nostra pagina index.

E’ evidente che abbiamo bisogno di un “main container” (centrato), una “bolla” per i contenuti, e tre elementi per il nastro: un rettangolo e due triangoli.

<div id="container"> <!-- Main Container -->    

<div class="bubble"> <!-- Bubble -->
<div class="rectangle"><h2>3D CSS Ribbon</h2></div> <!-- Rectangle with a title -->
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

Il codice CSS per gli elementi base (container, bubble and rectangle) è riportato in basso.

/* Reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, font, img, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}

:focus {
	outline: 0;
}
/* // Reset */

body {
	background: url(bck.jpg); /* image for body made with Photoshop using noise filter (gaussian monochromatic) on #ccc */
	font-family: Georgia, Verdana, “Lucida Sans Unicode”, sans-serif;
	font-size: 12px;
	color: #999;
}

h2 {
	font-style: italic;
	font-weight: normal;
	line-height: 1.2em;
}

div#container {
	margin: 50px auto 0px auto; /* centered */
	width: 400px;
}

.bubble {
	clear: both;
	margin: 0px auto;
	width: 350px;
	background: #fff;
	-moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #7f9db9;
	height: 50px;
	width: 380px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}

.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 6px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}

Qui, invece, il risultato delle dichiarazioni precedenti.

Ora è il momento di aggiungere i due triangoli per completare il nastro. Questi devono essere posizionati al di sotto della bolla lungo l’asse immaginaria z, quella perpendicolare al nostro schermo. Useremo lo z-index per determinare l’ordine.

<div id="container">

<div class="bubble">
<div class="rectangle"><h2>3D CSS Ribbon</h2></div>
<div class="triangle-l"></div> <!-- Left triangle -->
<div class="triangle-r"></div> <!-- Right triangle -->
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

Aggiungiamo le due classi in style.css per creare e posizionare i triangoli… e aggiungiamo anche lo stile per il contenuto (classe info).

.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-color: transparent transparent transparent #7d90a3;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 350px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}

.info {
	padding: 60px 25px 35px 25px;
}

.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}

L’immagine seguente ci mostra il risultato delle operazioni appena effettuate.

A questo punto strutturiamo una buona lista per il top-menu.

<div id="container">

<div class="menu">
<ul>
<li class="l1"><a href="#">CSS3</a></li>
<li class="l2"><a href="#">is really</a></li>
<li class="l3"><a href="#">powerful</a></li>
</ul>
<span>by PV.M Garage</span>
</div>

<div class="bubble">
<div class="rectangle"><h2>3D CSS Ribbon</h2></div>
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="info">
<h2>I Have Used Only CSS, friends!</h2>
<p>
For this tutorial I have used some new properties of the CSS3. You can realize a nice 3D effect using only CSS, it's really fantastic.<br />It doesn't work with IE!
</p>
<p>
<a href="#">Go to the tutorial!</a>
</p>
</div>
</div>

</div>

E’ proprio qui che faremo il nostro esperimento con la proprietà transfrom.

.menu {
	position: relative;
	top:3px;
	left: 50px;
	z-index: 80; /* the stack order: displayed under bubble (90) */
}

.menu ul li {
	-webkit-transform: rotate(-45deg); /* rotate the list item */
	-moz-transform: rotate(-45deg); /* rotate the list item */
	width: 50px;
	overflow: hidden;
	margin: 10px 0px;
	padding: 5px 5px 5px 18px;
	float: left;
	background: #7f9db9;
	text-align: right;
}

.menu ul li a {
	color: #fff;
	text-decoration: none;
	display:block;
}

.menu ul li.l1 {
	background: rgba(131,178,51,0.65);
}

.menu ul li.l1:hover {
	background: rgb(131,178,51);
}

.menu ul li.l2 {
	background: rgba(196,89,30,0.65);
}

.menu ul li.l2:hover {
	background: rgb(196,89,30);
}

.menu ul li.l3 {
	background: rgba(65,117,160,0.65);
}

.menu ul li.l3:hover {
	background: rgb(65,117,160);
}

.menu span {
	margin: 15px 80px 0px 0px;
	float:right;
}

Eccolo, il menù per come lo abbiamo costruito.

Fine. Il nostro semplice layout 3D è pronto.

Conclusioni

Credo che questa possa essere una ottima soluzione per migliorare le performance del nostro sito web pur mantenendo un fantastico disegno tridimensionale.
Il problema? Funziona, per come dovrebbe, solo con i browser di ultima generazione, inoltre Internet Explorer e Opera non renderizzano in modo opportuno le nuove proprietà dei CSS. In basso è possibile capire come i vari browser reagiscono al nostro codice.

Per chiudere è una buona idea validare il codice HTML.

W3C Validation

Responso: “This document was successfully checked as XHTML 1.0 Strict!”