Réaliser une maquette web avec le CSS 3

csssass

Le CSS depuis sa version 3 constitue une bonne évolution technologique pour palier l’utilisation abusive d’images dans la réalisation d’une application web.

Il n’est ainsi plus nécessaire de recourir à des images pour réaliser des ombres, des dégradés, des bordures arrondis ou encore utiliser des polices spécifiques.

L’avenir du CSS3 nous promet encore plus : il est d’ores et déjà possible sur certains navigateurs d’effectuer des animations, des transitions, des effets de reflets,… sans devoir recourir au javascript, au canvas ou, pire encore, au flash.

Généralités

Pourquoi ?

Quelques raisons pour utiliser le CSS 3…

dans une optique de maintenabilité

En utilisant des images pour réaliser des effets simples, il faut mettre à jour l’image à chaque fois. Si bien qu’il est nécessaire d’utiliser un logiciel de dessin et de garder les sources pour pouvoir facilement modifier les couleurs à l’avenir.
La modification d’un thème est alors pénible : Pour chaque image du thème : il faut ouvrir la source de l’image avec son logiciel préféré (GIMP, Photoshop, …), modifier la couleur, exporter l’image, recharger la page,… A contrario, il ne suffit que de modifier une ligne de code CSS pour changer sa couleur (l’utilisation de variable avec SASS est intéréssant).

par simplicité

Le CSS 3 offre plus de possibilités donc simplifie bien des tâches qui étaient complexe à réaliser auparavant. Bordures arrondis, ombres, dégradés, animations, reflets,… sont maintenant facilement réalisables avec le CSS 3.

Voici un exemple frappant parmi tant d’autres :
Auparavant, on voyait fleurir à foison des tableaux pour réaliser de simples bordures arrondis.

On voyait auparavant
<table class="radius">
<tr>
<td class="topleft"></td>
<td class="top"></td>
<td class="topright"></td>
</tr>
<tr>
<td class="left"></td>
<td class="content">content here...</td>
<td class="right"></td>
</tr><tr>
<td class="bottomleft"></td>
<td class="bottom"></td>
<td class="bottomright"></td>
</tr>
</table>
<style>
table.radius .topleft {
background: url(topleft.png);
width: 20px;
height: 20px;
}
/* DE MEME pour les 8 autres cases ... */
</style>
Maintenant avec le CSS3
<div class="radius">content here...</div>
<style>
.radius {
  border-radius: 20px;
}
</style>

dans un objectif de scalabilité des thèmes

L’utilisation des possibilités du CSS 3 au lieu d’images va permettre d’étendre rapidement son application web à plusieurs thèmes et de modifier facilement ces thèmes. Il suffira d’avoir un fichier pour chaque thème.

SASS et le framework Compass

Afin de résoudre les problèmes de cross-navigateur abordés précédemment, je vous conseille l’utilisation du SASS et du framework Compass.
Pour plus de renseignements sur le SASS, n’hésitez pas à lire cet article.

Principales nouveautés du CSS 3

Dans la suite de cet article, pour plus de simplicités, nous nous arrêtons à la compatibilité de Firefox (préfixé par -moz) mais bien entendu, il est possible de les rendre compatibles avec tous les navigateurs récents. Comme précisé avant, l’utilisation du framework Compass permet entre autres de résoudre ce problème.

Les bordures arrondis

.exemple {  
  -moz-border-radius: 10px;  
  border: 1px solid black;  
  padding: 2px 5px;  
}  

Les dégradés

Compatibles depuis Firefox 3.6.

.exemple {  
  -moz-border-radius: 10px;  
  border: 1px solid black;  
  padding: 2px 5px;  
  background: -moz-linear-gradient(-90deg, green, yellow);  
}  

Les ombres

Sous les textes

.exemple {  
  -moz-border-radius: 10px;  
  border: 1px solid black;  
  padding: 2px 5px;  
  background: -moz-linear-gradient(-90deg, green, yellow);  
  text-shadow: -1px -1px 1px yellow;  
}
Sous les éléments

.exemple {  
  -moz-border-radius: 10px;  
  border: 1px solid black;  
  padding: 2px 5px;  
  background: -moz-linear-gradient(-90deg, green, yellow);  
  text-shadow: -1px -1px 1px yellow;  
  -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  
}  

A noter d’ailleurs que la couleur de format rgba(r, g, b, a) est une nouveauté du CSS 3.

Optimiser la compatibilité avec les navigateurs plus anciens

Voici une utilisation intelligente des dégradés (avec SASS) pour permettre une meilleure compatibilité avec, en dernier recours, une couleur ou une image alternative :

=vertical-gradient(!from, !to, !alt=(!from/2   !to/2))  
  background = !alt  
  background = -webkit-gradient(linear, left top, left bottom, from(!from), to(!to))  
  background = -moz-linear-gradient(-90deg, !from, !to)  
  
/* exemples d'utilisation : */  
#main > header  
   vertical-gradient(#719369, #587451, url(header.png))  
  
#main > header  
   vertical-gradient(green, yellow, #80FF80)

Exemple de maquette

Voici un exemple d’utilisation du CSS3 utilisé sur un projet récent (réalisé à l’université).

Il n’y a aucune image (sauf l’avatar tux) et l’application est entièrement compatible avec au minimum Firefox et Chrome.
Si l’application vous intéresse, elle est sur github.

Extrait du code SASS

@import compass.sass  
@import compass/reset.sass  
@import theme.sass  
  
=vertical-gradient(!from, !to, !alt=(!from/2   !to/2))  
  background = !alt  
  background = -webkit-gradient(linear, left top, left bottom, from(!from), to(!to))  
  background = -moz-linear-gradient(-90deg, !from, !to)  
  
!back = #e9f3e7  
!back_aside = #F8FAF5  
!back\_header\_from=#719369  
!back\_header\_to=#587451  
!back\_footer\_from=#b4c1b1  
!back\_footer\_to=#9da89a  
  
#wrapper  
   border-radius(!global\_border\_radius)  
  :border 1px solid !back-#111  
  >nav  
     border-top-radius(10px)  
    :background white  
  >header  
     vertical-gradient(!back\_header\_from, !back\_header\_to, url(/public/images/header.png))  
    :color white  
    :z-index 1  
  >footer  
     vertical-gradient(!back\_footer\_from, !back\_footer\_to)  
     border-bottom-radius(10px)  
  
  #main  
    background = !back_aside  
     box-shadow(0px, -1px, 2px, rgba(,,,0.25))  
    :z-index 2  
    >section  
      :background white

Un triangle en css ???

Ce n’est pas de la magie mais il est possible de faire des triangles en CSS (même en CSS2) grâce à une petite astuce. Explication en images :

Une boite avec une couleur pour chaque bordure

.box {  
  background: black;  
  width: 40px;  
  height: 40px;  
  border-width: 15px;  
  border-color: yellow red blue green;  
  border-style: solid;  
}

width et height à 0

Bordures transparentes

.box {  
  background: black;  
  width: 0;  
  height: 0;  
  border-width: 15px;  
  border-color: transparent red transparent transparent;  
  border-style: solid;  
}  

Autre utilisation des triangles

Le même procédé m’a permis de faire ceci :

As a generative plotter artist, I use code to generate art (creative coding) and physically create it with pen plotters, which is itself a generative process – each physical plot is a unique variant. I love dualities, like digital vs analog physical, abstract vs figurative, orthogonal vs polar, photo vs noise,...