Blog design : la tendance des « étiquettes / rubans »

Difficile de trouver un nom pour cette nouvelle tendance. J’appelle ça, surement à tords, des étiquettes. Les anglophones parlent de « isometric banner ». Ce que j’appelle étiquette, ce sont les images qui apparaissent avec un effet de superposition. Difficile à expliquer…

Voici quelques exemples pour vous inspirer ainsi qu’un tutoriel pour vous expliquer comment les mettre en place sur votre blog.

Galerie / Exemples :

Yoast.com

DesignMag.com

Webdesign Ne.ws

Marekting Alternatif.com

From the Couch.com (ancienne et nouvelle version)

Sarah Longnecker

Build Conference

Burker King Studio

Les thèmes WordPress

Evidemment le plus simple reste d’adopter un thème wordpress qui utilise ces petites étiquettes. Voici donc une sélection de thème wordpress :

ZinePress

Imprezz

eBusiness

LightWord

Pholio

Choloris

Blues Vintage

Comment faire ?

Vous ne souhaitez pas changer de thème wordpress, ou n’êtes pas sous wordpress, mais vous aimeriez tout de même adopter les étiquettes sur votre blog ? Voici quelques conseils pour les utiliser sur votre blog.

Afin de maximiser les compatibilités entre navigateurs, je vous conseil d’éviter la transparence pour gérer les ombres de l’étiquette. Si votre fond est d’une couleur unie cela ne posera pas de problème. En revanche, si votre fond est une image qui se répète, il faudra utiliser la transparence du format PNG et le hack qui va bien pour que votre blog s’affiche correctement sur IE6. Oubliez le format GIF qui ne gère pas les différents niveau de transparence (indispensable pour un dégradé d’ombre).

Si vous utilisez ces étiquettes pour vos titres d’articles, il faudra qu’elle puisse s’adapter en fonction de la longueur du titre. Pour cela je vous conseil de découper votre étiquette en 3 images : le coin gauche, le fond et le bout de l’étiquette. Prenons l’exemple du thème ebusiness :

Les 3 images utilisées : image de gauche / image centrale répétée / image de droite

Vous constaterez que le fond des étiquettes est sur chacune des images, ainsi pas besoin de gérer la transparence. Si votre fond est texturé (ou une image qui se répète) l’astuce peut-être de faire un angle d’étiquette très petit (comme sur l’exemple au dessus) et de mettre une couleur proche de votre texture de fond. Comme vous pouvez le contaster sur l’exemple avec l’image de gauche, la différence ne se remarque pas. Sinon, vous pouvez utiliser un hack qui vous permettra de gérer la transparence PNG 24bits sous IE6.

D’une manière générale, il est recommandé d’utiliser les étiquette en image de fond (via le CSS) et de mettre le texte en code et non en image. Tout simplement pour un meilleur référencement mais aussi pour que le texte soit modifiable facilement. Quoi qu’il en soit, si vous utilisez les étiquettes pour les titres de vos articles, vous serez obligé de procéder ainsi. Voici le code à utiliser pour afficher les étiquettes comme dans l’exemple :

Dans votre fichier index.php et single.php (et partout là ou votre titre s’affiche, archive.php etc.) :

[php]
<div class="post-info-wrap"> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-left-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> <span class="post-info">Post&eacute; par
<?php the_author() ?>
sur
<?php the_time(‘M jS, Y’) ?> <!– affiche la date –>
| <a href="#respond" title="<?php _e("Ecrire un commentaires"); ?>"> <!– commentaires –>
<?php comments_number(‘commentaire’,’1 commentaire’,'% commentaires’); ?>
</a></span> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-right-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> </div>
<div style="clear: both;"/>
[/php]

Dans votre feuille de style (style.css par exemple) :

[css]
.post-info-wrap {
margin-left: -39px;
float: left;
clear: both;
margin-bottom: 15px;
}
.post-info-wrap-home {
margin-left: -31px;
float: left;
clear: both;
margin-bottom: 15px;
}
.post-info {
float: left;
color: #fff;
margin: 0px;
display: block;
background-image: url(images/home-title-2-bg.gif);
height: 41px;
font-size: 19px;
padding: 8px 20px 0px 20px;
}
.post-info a:link, .post-info a:hover, .post-info a:visited {
color:     #ffe8a1;
}
.home-title-image {
float: left;
}
[/css]

Notez que dans l’exemple c’est l’auteur / la date / le nombre de commentaires qui s’affiche. Pour afficher le titre de l’article voici le code à insérer (le css ne change pas) :

[php]
<div class="post-info-wrap"> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-left-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> <span class="post-info">
<h2 class="titles"><a href="<?php the_permalink() ?>" title="Permanent Link to <?php the_title(); ?>">
<?php the_title() ?></a></h2>
| <a href="#respond" title="<?php _e("Ecrire un commentaires"); ?>">
<?php comments_number(‘commentaire’,’1 commentaire’,'% commentaires’); ?>
</a></span> <img src="<?php bloginfo(‘template_directory’); ?>/images/home-title-2-right-<?php echo $artsee_ebusiness_color; ?>.gif" alt="home title" class="home-title-image" /> </div>
<div style="clear: both;"/>
[/php]

Vous pouvez rajouter une class pour les titres dans le css :

[css]
.titles a:link, .titles a:visited, .titles a:active {<a>
</a>color:#FFFFFF;
float:left;
font-size:20px;
}
[/css]

N’hésitez pas à partager vos étiquettes :p. Et si vous trouvez mieux que « étiquette » dites moi !

Like it? Tweet it!