KooNDeLLiTcH²

Aujourd’hui, nous allons s’atteler au design d’un élément particulier d’un blog : le billet. Je vous propose de reproduire pas-à-pas le design ci-dessous. Jolie, hein ? Ca vous tente ? C’est parti !

Comme d’habitude on va commencer par le code HTML, que l’on habillera après à coup de CSS. Pour l’HTML on va choisir une structure très simple en se concentrant sur l’article, un titre mis en valeur et surtout une date qui flottera à gauche du titre. On va donc retrouver les différents éléments dans le template HTML suivant :

	

		

			What a title!
		
		

			27
			Apr
		
				
		

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[...]
Vivamus faucibus eleifend lorem in adipiscing.
		
	

J’ai choisi pour changer un petit peu de mettre le bloc « date » dans un tag p ce coup-ci. Une div aurait très bien pu faire l’affaire. Le texte a été généré sur lipsum.com, très pratique. Nous en avons fini avec l’HTML. Venons-en maintenant au CSS.

On va commencer par définit la police par défaut pour toute notre page en une ligne (font: 14px/1.5 Cambria,serif;) J’ai choisi une combinaison avec serif de base. C’est important de faire attention aux combinaisons de police de caractère dans vos design. Pour bien commencer, jetez donc un oeil à cette page que le W3C lui consacré. La directive font permet de déclarer pas mal de choses sur une seule ligne CSS. Elle configure dans l’ordre les directives « font-style font-variant font-weight font-size/line-height font-family ». J’ai donc mis ici les 3 dernières directives. size,line-height et family. Voilà pour le chapitre sur font.

Ensuite, nous allons dimensionné et placer notre contenant principal main. On lui donne 620px de largeur, le centre au milieu de la page et lui donne 10px de marge en haut et en bas (margin: 10px auto). C’est le auto sur les marges gauche et droite qui va centrer l’élément. C’est la meilleure façon de faire pour centrer un élément en CSS. Cela nous donne donc le code CSS suivant :

body {
	font: 14px/1.5 Cambria,serif;
}
#main {
	width: 620px;
	margin: 10px auto;
}

Maintenant, stylons l’article lui-même. Sachant que je vais vouloir positionner mon bloc de date en positionnement absolu (position:absolute) par rapport à article, je vais commencer par fixer la position de l’article en mettant la directive position:relative. Ainsi, les coordonnées des éléments enfants placés en coordonnées absolue seront relative à article. Compris ? Non ? Par exemple, je vais vouloir décaler de 40 pixels sur la gauche mon bloc date. Pour ce faire je vais lui donner la directive left:-40px. Oui mais 40 pixels par rapport à où ? Le navigateur va alors remonter dans le flux d’élément à la recherche du premier élément à positionnement fixe. Il trouvera article ! Voilà pour le chapitre de positionnement.

On va bien aérer notre billet avec de belles marges et de bons espacements un peu partout (margin & padding). On donne la couleur blanche en arrière plan (background-color: white). On dessine une bordure grise de 5px de large tout autour (border: 5px solid #EFEFEF) et on ajoute enfin une ombre portée en utilisant la notation CSS3 standardisée box-shadow. Cela nous donne donc :

article {
	position: relative;
	margin: 0 0 60px 0;
	padding: 50px 55px;
	background-color: white;
	border: 5px solid #EFEFEF;
	box-shadow: 2px 2px 2px #B7B7B7;
	-webkit-box-shadow: 2px 2px 2px #B7B7B7;
	-moz-box-shadow: 2px 2px 2px #B7B7B7;
	-o-box-shadow: 2px 2px 2px #B7B7B7;
}

Pour le titre de notre billet, on va l’aérer aussi, lui donner une couleur noire et l’écrire en grand italique et en Georgia qui s’accorde à merveille avec Cambria, en reprenant la notation font explicitée plus haut. On va de plus ajouter une ligne horizontale grise placée 25px au-dessous. Ici il faut comprendre la différence entre padding qui est à l’intérieur de l’élément et margin qui est à l’extérieur de l’élément. Cette différence tend enfin à s’harmoniser avec les dernières versions des différents navigateurs.

article .title {
	margin: 0 0 30px 0;
	padding: 0 0 25px 0;
	border-bottom: 1px solid #E7E7E7;
	font: italic 32px/1.5 Georgia, serif;
}
article .title a {
	color: black;
	text-decoration: none;
}

On y presque ! Il ne nous reste plus qu’à styler le bloc de date. A ce stade, vous devriez obtenir ce qui suit :

Alors pour la date, on va utiliser une belle image d’arrière-plan de notre p avec des couleurs s’accordant avec le reste de notre thème. Il ne nous restera plus qu’à positionner, dimensionner et écrire le jour et le mois de façon harmonieuse.

Commençons par le p qui définit tout le bloc « date ». On a vu plus haut que nous allons le positionner avec des coordonnées absolue par rapport à article (position: absolute). Ce qui nous permet donc d’utiliser les directives top et left à notre guise. Tâchons de placer notre bloc « date » au même niveau vertical que notre titre et au même niveau horizontal que la bordure de l’article. (top: 30px et left:-40px). On dimensionne notre bloc de façon à voir toute notre image (width et height:74px). Ensuite, on décale le contenu de 11px pour centrer verticalement le jour de la date (padding-top: 11px), on centre le texte horizontalement (text-align:center), on configure la couleur blanche du texte et on ajoute un petit effet d’ombre sur le texte (text-shadow: #4B7E83 1px 1px 0). Ce qui donne :

article .date {
	position: absolute;
	top: 30px;
	left: -40px;
	
	width: 74px;
	height: 74px;

	padding-top: 11px;
	text-align: center;
	color: white;
	text-shadow: #4B7E83 1px 1px 0;

	background: url(date.png) no-repeat left top;
}

On a quasi terminé. Il ne nous reste plus qu’à styler les deux textes pour le jour et le mois comme on le veut. Une chose importante à faire est de forcer un retour à la ligne après chaque élément en forçant les span à se comporter comme des éléments block (display:block) puisque de base ce sont des éléments inline. On ajoute de belles ombres pour donner ce petit effet web3.0 que l’on voit partout (text-shadow: black 0 1px 0). Voici donc les derniers morceaux de code CSS à ajouter :

article .date .day {
	display: block;
	font: italic 29px/32px Cambria, serif;
	text-shadow: black 0 1px 0;
}
article .date .month {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: black 0 1px 0;
}