Ces derniers mois (cette dernière année ?), mon gros side-project a été de concevoir la charte graphique du Webdesign Friday et son intégration — aidé par Matthieu Bué, Clément Roy, Christophe Béghin et Nicolas Birckel notamment, le tout supervisé par l’ami Francis Chouquet — et quand on bosse sur un projet aussi énorme et surtout avec des gens comme eux, ça te fais prendre conscience de ce que tu aimes vraiment dans la conception de site Web. Moi c’est tout cette partie brainstorming, recherche de pistes graphiques, design et intégration, qui m’a vraiment plu.

Aussi, ces dernières années on a vu de nombreux sites proposant des templates de site Web « prêts-à-porter », notamment les thèmes payants pour le CMS WordPress – n’hésitez d’ailleurs surtout pas à aller jeter un oeil chez Peaxl (ça parle anglais mais c’est des p’tits francophones qui gèrent la boutique ! )

Ok, WordPress c’est cool, mais trouver de bons templates qui se soient pas spécifiques à un CMS, j’ai l’impression que c’est un mission impossible dès que tu sort du très populaire ThemeForest… Et encore, les templates qu’ils vendent se ressemblent tous à bien y regarder. Un peu comme sur Dribbble, où lorsque tu sort des plates-bandes, t’es bof.

Mon idée

Proposer des templates conçus en HTML5 et CSS3, adaptatifs et gratuits.

Pourquoi gratuit ? Tout simplement parce que je ne souhaite pas entreprendre cette démarche pour m’en mettre plein les poches, je ne courrai pas non plus dernière le nombre de téléchargement des templates proposés.

Cette démarche, bien qu’elle soit là pour vous rendre service, est purement et simplement égoïste. L’argent ne m’intéresse pas ici, j’ai déjà un salaire, ce que je veux c’est simplement pouvoir pratiquer, expérimenter et m’améliorer pendant que je vous rend service.

Que pensez vous de ma démarche ? Quel type de template souhaiteriez vous voir, Pour quelle utilisation ? Portfolio, carte electronique, Curriculum Vitae, etc…?

J’attend vos retours sur le sujet !

À prendre en compte

Le marquage CSS

.button {
	/* style du texte */
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5); /* ombre décalée de 0px à droite, 1px en haut, un flou de 0px, de couleur noir et d'opacité 50% */
	/* fond dégradé pour le bouton */
	background: -moz-linear-gradient(top, #b50000, #6d0000); /* Firefox */
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#b50000), to(#6d0000)); /* Safari et Chrome*/
	/* style général du bouton */
	display: inline-block;
	padding: 8px 10px 8px;
	-moz-border-radius: 4px; /* coins arrondi pour Firefox */
	-webkit-border-radius: 4px; /* coins arrondi pour Safari et Chrome */
	border-radius: 4px;
	border-bottom: 1px solid rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	margin: 2px;
}
.button.medium { font-size: 12px; }
.button.small { font-size: 10px; }
.button.blue {
	background: -moz-linear-gradient(top, #6d93c0, #3d5b78); /* Firefox */
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#6d93c0), to(#3d5b78)); /* Safari et Chrome*/
}
.button:hover {
	background: -moz-linear-gradient(top, #333333, #000000); /* Firefox */
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#000000)); /* Safari et Chrome*/
}
.button.arrondi {
	-moz-border-radius: 20px; /* coins arrondi pour Firefox */
	-webkit-border-radius: 20px; /* coins arrondi pour Safari et Chrome */
	border-radius: 20px;
}

Fichiers de démonstration

Qu’est-ce que la technique des Sprites CSS?

Les sprites CSS, sont en fait une sorte d’extension de la technique du Rollover CSS. En effet, à l’instar du Rollover CSS, les Sprites permettent de n’avoir qu’une seule image pour les différents états (normal, survolé, etc…) d’un bouton, d’une image, ou tout autre élement graphique. Là où les sprites vont plus loins c’est la possibilités de n’avoir qu’un seul gros fichier image contenant toutes les icones, et autre éléments d’interface. Cette technique est notamment utilisée par des sites dits « user-friendly ».

Les Sprites appliquées à un menu horizontal

Appliquer la technique des Sprites pour réaliser un menu horizontal (ou vertucal) est une chose vraiment aisée. En effet, grâce à cette technique on pourra mettre les differents états des différents élément du menu dans un seul fichier. L’exemple même de cette technique est le menu horizontal du site d’Apple :

Ici on voit que chaque éléments du menu à quatre états : normal, survolé, cliqué, actif.

Dans notre exemple nous allons utiliser un menu avec seulement deux états : normal, survolé. notre troisième état (actif) utilisera la même image que notre état survolé.

Allez, c’est parti.

Le code HTML

<ul id="nav">
<li id="nav_home"><a href="menu.html">Home</a></li>
<li id="nav_services"><a href="menu_s.html">Services</a></li>
<li id="nav_references"><a href="menu_r.html">Références</a></li>
<li id="nav_contact"><a href="menu_c.html">Contact</a></li>
</ul>

Ici on engloble notre menu dans une structure de liste non-ordonnée (<ul></ul>) avec un identifiant #nav, on aurait aussi pu utiliser une classe .nav pour l’élément ul. Chaque élément de liste (<li></li>) a ensuite son propre identifiant, ce qui va nous permettre de bien positionner notre image pour chaque élément.

La feuille de style

#nav {
width: 726px;
height: 30px;
position: relative;
background:url(nav_main.png);
margin: 0;
padding: 0;
list-style-type:none;
margin-bottom:10px;
}
#nav li {
float: left;
}
#nav li a {
position: absolute;
top: 0;
margin: 0;
padding: 0;
display: block;
height: 30px;
background: url(nav_main.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
}
/*normal state*/
li#nav_home a {
left: 0;
width: 97px;
background-position: 0 0;
}
li#nav_services a {
left: 97px;
width: 97px;
background-position: -97px 0;
}
li#nav_references a {
left: 194px;
width: 97px;
background-position: -194px 0;
}
li#nav_contact a {
left: 291px;
width: 97px;
background-position: -291px 0;
}
/*hover state*/
li#nav_home a:hover {
background-position: 0 -30px;
}
li#nav_services a:hover {
background-position: -97px -30px;
}
li#nav_references a:hover {
background-position: -194px -30px;
}
li#nav_contact a:hover {
background-position: -291px -30px;
}
/*current state*/
#body_home li#nav_home a{
background-position: 0 -30px;
}
#body_services li#nav_services a {
background-position: -97px -30px;
}
#body_references li#nav_references a {
background-position: -194px -30px;
}
#body_contact li#nav_contact a {
background-position: -291px -30px;
}

On voit ici que tout ce joue avec l’attribut background-position qui permet de donner les coordonnées permettant d’afficher la bonne partie de l’image. Ainsi, comme chaque bouton a les dimensions 97×30, si l’on veu afficher l’état survolé du troisième élément, nous devrons postionner l’image à -30px pour l’axe verticale de l’image, et -194px pour l’axe horizontal (97×97) ainsi on affichera 97px à partir du 195ième pixel de notre image.

Pour que le bouton du menu soit activé lorsque l’on se trouve sur la page active, il suffit, grâce à notre CSS, de définir un identifiant pour la balise de notre page, ainsi si l’on se trouve sur la page Références, notre balise sera :

<body id="body_references">