Il n’est pas compliqué de créer des motifs transparents pour les utiliser dans nos sites web. Tant que le motif se superpose à la grille de pixels, nous pouvons le découper sans problème. Il en existe d’ailleurs de nombreux sets à télécharger sur le web mais, malgré mes recherches, je n’ai pas trouvé de texture bruit transparente.

La structure du bruit est en effet bien plus complèxe que celle des motifs géométriques (lignes, points, carrés etc.). Pour obtenir un bruit transparent il faut réussir à isoler le motif de la couleur de fond. Cependant, l’effet granuleux de ce type de texture n’est pas régulier et, si l’on y regarde de plus près, il présente même différents niveaux de transparence.

Grace aux possibilités offerte par Photoshop, j’ai finalement trouvé un moyen de parvenir au résultat escompté et je voulais partager ma méthode avec vous dans cet article.

Vous pouvez télécharger les fichiers dès maintenant :

Télécharger : texture bruit transparente

Application de la texture avec les css

Grace à la transparence du format png nous allons pouvoir superposer notre motif à une couleur.

Exemple : un paragraphe de fond beige (background-color:#cccc99) sur lequel viendra s’ajouter le bruit.

le code HTML :

Pour appliquer facilement notre texture nous allons créer une classe css : .noize.

<p class="noize"> Ceci est un paragraphe d'exemple avec une texture bruit </p>

Le code css associé

Nous allons appliquer notre texture avec la propriété background-image.

Note : L’image de fond va se répéter par défaut, inutile d’ajouter : background-repeat:repeat à notre texture.

.noize{background-image: url(noize.png);}

Le résultat de notre exemple :

Ceci est un paragraphe d’exemple avec texture bruit

Téléchargez les fichiers du tutoriel :

Télécharger : texture bruit transparente

Conclusion

Cette méthode permet d’utiliser cette texture « bruit » de façon plus flexible. Plus besoin de repasser par Photoshop (ou autre) pour changer de couleur de fond. Notons qu’il est aussi possible de l’employer avec un fond en dégradé pour les navigateurs supportant les multiple-background. Couplé avec un sélecteur de couleurs dans une interface d’administration, cette technique permet à l’utilisateur de changer la couleur de certains éléments tout en conservant la texture des éléments.

Une petite remarque au niveau du format .png qui peut poser un problème avec certains navigateurs qui gèrent difficilement (voir pas du tout) la transparence. Dans ce cas nous pourrions par exemple utiliser des commentaires conditionnels pour servir une texture format « .gif » beaucoup moins détaillée ou bien nous en passer tout simplement. Répétons-le, inutile d’avoir un rendu strictement identique sur tous les navigateurs, l’essentiel étant de conserver l’accessibilité du contenu de nos sites web.

Le but de ce tutoriel est d’arriver à créer un fil d’ariane constitué d’images et qui s’adapte au contenu (technique des sliding-door ou portes-coulissantes).

Démonstration

Vous pouvez dès maintenant télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS.

Une version de démo est visible sur cette page : Démo : fil d’ariane avancé en css.

Explications

Pour réaliser notre fil d’ariane nous allons nous servir des balises html <ul> et <li> et nous allons y placer des images de fond.

L’important ici c’est de repérer les ensembles d’éléments. Ici il y en a trois :

• Le premier élément de la liste : l’image de fond est différente des autres
• Tous les éléments de la liste sauf le premier et le dernier : l’image de fond est identique à chaque fois
• Le dernier élément de la liste : ne contient pas de lien

Un petit schéma pour mieux comprendre la construction html de notre fil d’ariane :

Pour chaque élément de la liste il y a trois images. Puisque les « multiple-backgrounds » n’en sont encore qu’à leur début en CSS3, il faudra se contenter d’une seule image de fond par élément html. Il faut donc nécessairement 2 éléments html en plus du <li>. J’ai utilisé les balises <a> et <span>.

Puisque le dernier élément de la liste n’est pas cliquable, j’utiliserai deux balises <span> côte à côte.

Venons-en au cœur du problème à savoir le code…

Le code html

<div id="breadcrumb">
 <ul>
  <li class="first"><a href="#" title="Back to item1">item 1</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 2">item 2</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 3">item 3</a><span class="end"> </span></li>
  <li><a href="#" title="Back to item 4">item 4</a><span class="end"> </span></li>
  <li><span>item 5</span><span class="end"> </span></li>
 </ul>
</div><!-- /breadcrumb-->

Le code CSS

/*Largeur du div englobant*/
#breadcrumb{width:500px;}

/*Reset sur les éléments de la liste*/
#breadcrumb ul, #breadcrumb li {
list-style-type:none;
margin:0;
padding:0;
}  

/*Style de la liste*/  
#breadcrumb ul{
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
margin:10px auto;
padding:10px;
}  

/*Premier élément de la liste*/
#breadcrumb li.first {
background:url(../images/first-left.png) 0 0 no-repeat;
height:33px;
}

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}  

/*Style de élément central : a (pour tous les éléments sauf le dernier) et span(pour dernier élément de la liste)*/
#breadcrumb li a, #breadcrumb li span {
float:left;
background:url(../images/bg-gradient.jpg) 0 0 repeat-x;
height:33px;
margin:0;
padding:0 0 0 5px;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.02em;
}  

/*Style du span.end pour image de droite*/
#breadcrumb li span.end {
float:left;
background:url(../images/general-right.png) 0 0 no-repeat;
width:15px;
height:33px;
}

Quelques explications complémentaires…

<div id="breadcrumb"> ...</div>

Ce div englobant peut vous permettre d’éviter les soucis d’interprétation du modèle de boite par les différents navigateurs… Ainsi vous pouvez donner une largeur au div#breadcrumb et donner les valeurs de padding/margin à votre liste ul. Aucun de ces deux éléments ne couple width+margin+padding. En codant ainsi, vous ne rencontrerez aucune différence de rendu entre navigateurs.

/*Tous les éléments de la liste sauf premier et dernier*/
#breadcrumb li {
float:left;
background:url(../images/general-left.png) 0 0 no-repeat;
line-height:33px;
margin:5px -5px 0 0;
padding-left:13px;
}

Ici on place l’image de fond située sur la partie gauche des <li> principaux. Pour ne pas que le contenu empiète sur l’image de fond, on donne un padding-left de la même largeur que l’image de fond soit 13px.

Pour centrer verticalement le contenu d’un élément de type « inline » on utilise la formule : height = line-height.

Compatibilité IE6…

J’ai volontairement utilisé des images transparentes en png pour cet exemple puisque les navigateurs sont maintenant capables de très bien gérer ce format. Cependant, le format png n’est pas pris en compte par IE6 et cet exemple ne fonctionnera donc pas vraiment sur ce navigateur.

Pour ceux qui sont pour le progrès, laissez tombez ce qui va suivre…

Pour ceux qui sont souhaitent encore optimiser leur contenu web pour les utilisateurs d’IE6, voici 3 solutions pour gérer correctement la transparence du format png sur ce navigateur :

Vous trouverez une solution qui fonctionne parfaitement en allant voir de ce côté : IE PNG Alpha Fix v2.0 Alpha 4.

Vous pouvez aussi utiliser des images en gif en plus de vos images png et faire en sorte qu’elles ne soient prisent en compte que pour IE6 grâce à la propriété : «!important». Je vous renvoie à l’article de Gopal Raju sur son blog ProductiveDreams : IE CSS hack without using any hacks!

La troisième et dernière solution consiste à utiliser les filtres Alphaimageloader. Elle est à bannir si vous voulez passer la validation du W3C mais s’avère être tout à fait fonctionnelle. Pour plus d’infos à ce sujet je vous renvoie à l’article d’Alsacreations : Obtenir la transparence PNG avec Internet Explorer 6.

Conclusion

Cet article touche à sa fin ! N’hésitez pas à me faire des retours. J’ai essayé de trouver un moyen fonctionnel pour arriver à mes fins mais il y a peut-être mieux ?! Pour finir je vous donne les deux liens de téléchargement et de démonstration :

Télécharger le zip comprenant les images, le code html et les css : Télécharger Breadcrumbs CSS. Le contenu du zip est visible sur cette page : Démo : fil d’ariane avancé en css.

Tout le monde n’étant pas né avec un manuel de php entre les mains, je présenterai dans cette rubrique des snippets s’adressant essentiellement aux débutants. Des questions simples pour des réponses simples. Vous débutez avec Wordpress, vous rencontrez un problème php, peut-être trouverez-vous une solution dans cette nouvelle série d’articles…

Exclure une catégorie de vos flux RSS

Dans function.php

<?php
  //La fonction
  function ExcludeFeed($query) {
    if ($query->is_feed) {
      //Exemple de suppression de la catégorie ayant l'id 1
      $query->set('cat','-1');
    }
    return $query;
  }
  //Le filtre
  add_filter('pre_get_posts','ExcludeFeed');
?>

Exclure une catégorie de la recherche

Dans function.php

<?php
  //La fonction
  function SearchFilter($query) {
    if ($query->is_search) {
      //Exemple d'exclusion des catégories ayant les id 16 et 17
      $query->set('cat','-16,-17');
    }
    return $query;
  }
  //le filtre
  add_filter('pre_get_posts','SearchFilter');
?>

Ajouter un nuage de tags sans utiliser de widget

Ajouter ce code à l’endroit où le nuage de tags doit s’afficher

<p>
  <?php wp_tag_cloud('smallest=8&largest=32&unit=px&number=50'); ?>
</p>

• smallest = la taille du plus petit tag (en fonction de votre unité de mesure)
• largest = la taille du plus grand tag (en fonction de votre unité de mesure)
• number = le nombre de tag maximum à afficher (0 affichera tous les tags)
• unit = l’unité de mesure (peut prendre la valeur « px », « pt », « em », « % »)

Depuis la version 2.8 de Wordpress, vous pouvez choisir d’afficher les catégories plutôt que des tags. Pour cela, utilisez la variable taxonomy comme suit :

<p>
  <?php wp_tag_cloud('smallest=8&largest=28&unit=px&number=50&taxonomy=category'); ?>
</p>

La variable taxonomy peut prendre les valeurs suivantes

• post_tag = affiche les noms des tags
• category = affiche les noms des catégories
• link_category = affiche les liens des catégories

Bien gérer la pagination et query_posts

Si vous utilisez la fonction query_posts() avant votre boucle, vous avez peut-être rencontré des soucis de pagination.

Pour éviter ce désagrément, il faut ajouter le paramètre query_string dans votre requête.

<?php
  //On empêche l'affichage des articles appartenant à la catégorie ayant l'id 17
  query_posts('query_string&cat=-17');
?>

Le code avec la boucle :

<?php
  query_posts('query_string&cat=-17');
    //La boucle affichera les articles selon les conditions fixées par la fonction query_post();
    if (have_posts()) :
      while (have_posts()) : the_post();
        ...Le contenu d'un article ici...
      endwhile;
    endif;
?>

Afficher les titres de vos futurs articles

Ajouter ce code là où la liste doit s’afficher

<?php
  $my_query = new WP_Query('post_status=future&showposts=3');
    if ($my_query->have_posts()) {
      while ($my_query->have_posts()) : $my_query->the_post();
        the_title();
      endwhile;
    }
?>

Il existe de nombreuses méthodes pour effectuer ce genre de tâches mais je vais opter pour les couches RVB car c’est, selon moi, la solution la plus rapide et la plus polyvalente dans le sens où on pourra les utiliser pour sélectionner n’importe quel type d’objet, dans presque tous les environnements.

Pour illustrer ce petit tutoriel je vais utiliser la photographie d’une araignée (disponible ici) dont les fins poils pourraient sembler assez laborieux à détourer un à un sans l’utilisation des couches RVB…Vous pouvez cliquer sur les images pour les visualiser en taille réelle.

Lorsque vous ouvrez l’image dans Photoshop, vous êtes par défaut sur la fenêtre « Calques ». Vous pouvez constater que le détourage de cet animal n’est pas forcément aisé même si cela est facilité par le fond blanc. Un zoom important met en évidence de nombreux petits détails (comme les poils des pattes) qu’il serait difficile de sélectionner avec des outils tels que la baguette magique, la plume ou encore en mode masque. Je vous propose d’utiliser les couches RVB pour sélectionner notre animal.

Nous allons donc cliquer sur l’onglet « Couches » pour visualiser les couches Rouge, Vert et Bleu composant cette image. Pour ce travail de sélection en utilisant les couches, je vous conseille d’opter pour leur affichage en niveau de gris plutôt qu’en couleur. Pour basculer d’un mode d’affichage à l’autre allez dans « Edition » > « Préférences » > « Interface » > « Afficher les couches en couleur », et décochez la case pour afficher les couches en niveau de gris.

Lorsqu’on travaille avec les couches, le but est d’isoler l’objet que l’on souhaite sélectionner en augmentant son contraste avec l’arrière plan. Dans notre cas, nous allons donc « remplir » notre araignée avec la couleur noire, tandis que nous allons rendre l’arrière plan complètement blanc. Ainsi, le contraste entre l’animal et la fond sera maximum, la sélection sera donc quasi parfaite. Dans un premier temps, nous allons donc chercher laquelle des 3 couches Rouge, Vert ou Bleu, présente le plus grand contraste entre l’araignée et le fond. Nous allons donc cliquer successivement sur chacune des 3 couches pour observer le résultat. L’image ci-dessus représente le rendu en fonction de la couche sélectionnée.

Nous voyons donc que c’est sur la couche Bleue que le contraste est le plus grand. Pour ne pas détériorer notre image, nous allons travailler sur une copie de cette couche. Pour celà, soit : clic droit sur la couche Bleue : « Dupliquer la couche », soit on fait glisser la couche Bleue sur l’icone de duplication (à côté de la corbeille). Nous avons donc maintenant une couche « Bleue Copie » en bas de la pile de couches.

Rappelez-vous que la finalité de ce travail est d’obtenir une araignée entièrement noire sur un fond blanc. Pour améliorer encore le contraste, nous allons utiliser une fonction de Photoshop assez peu connue : « Appliquer une image ». Le but sera de fusionner la couche « Bleu copie » sur elle-même afin d’augmenter son contraste. Pour appliquer des opérations de fusion sur les couches, une autre solution consiste à passer par la fonction « Opérations » de Photoshop (« Images » > « Opérations »).

Après avoir choisi « Appliquer une image » vous devez définir quelle couche fusionner. Pour nous ce sera la couche « Bleue copie ». Et vous devez choisir l’opération à appliquer, cela correspond aux modes de fusion. Nous allons opter pour le mode améliorant au mieux le contraste de l’animal. Nous choisirons l’opération « Produit » car le résultat (directement visible dans l’aperçu) semble correct. Vous pouvez maintenant valider en cliquant sur ok. La valeur chromatique de chaque pixel de la couche va donc être multipliée par elle-même. Le résultat sera donc une couche plus foncée. Attention, même si certains modes de fusion permettent un contraste maximum, ils vont engendrer la perte de certains détails de l’image. Il faudra donc trouver le meilleur compromis entre un contraste élevé et la conservation des détails de l’image.

Voici à quoi ressemble notre image après produit de la couche « Bleu copie » sur elle-même. Il reste encore certains détails à corriger car le contraste n’est pas parfait. Même s’il est difficile de s’en rendre compte sur le screenshot ci-dessus, le fond n’est pas complètement blanc et certaines parties de l’animal tirent plus sur le gris foncé que sur le noir. Nous allons donc utiliser les niveaux pour améliorer le rendu.

Pour faire apparaître les niveaux : « Image » > « Réglages » > « Niveaux » ou Ctrl + L. Pour augmenter le contraste nous allons faire glisser le curseur noir vers la droite et déplacer le curseur blanc vers la gauche. L’image ci-dessus vous présente le rendu avant-après. Même si ce n’est pas flagrant sur ce screenshot, cette opération de correction via les niveaux est très efficace lorsque vous utilisez les couches pour sélectionner vos objets.

Après correction via les niveaux, il faudra parfois apporter de petites corrections. Dans notre cas, nous voyons qu’il reste encore des parties claires sur notre araignée. Pour corriger cela, prenez le pinceau (B), opacité 100%, taille 15px, dureté 100% en mode « Normal » et peignez en noir sur les parties blanches. Petite astuce : Pour ne pas détériorer les parties déjà sélectionnées, utilisez le mode « Lumière tamisée » pour révéler les parties noires sans abîmer les parties blanches. A l’inverse, utilisez le mode « Incrustation » pour révéler les parties blanches sans modifier les parties noires. Ces 2 modes sont très efficaces lorsque vous devez améliorer le contraste d’un petit détail de l’image. On utilisera le pinceau en mode « Lumière tamisée » pour noircir un cheveux sur un fond blanc. A l’inverse on utilisera le mode « Incrustation » pour blanchir un fond gris-clair sans détériorer les parties noires de la couche.

Après le passage du pinceau, voici à quoi ressemble notre image. A première vue c’est bien! Nous avons un contraste quasi parfait. Maintenant, souvenez-vous que lorsque nous travaillons sur les couches, les parties blanches représentent les zones sélectionnées. En l’état actuel, la sélection se fera donc sur notre contour. Il va donc falloir inverser les couleurs des couches.

Pour inverser les couleurs, utilisez le raccourci « Ctrl+i ». Notre araignée passe en blanc sur fond noir.

Avant de récupérer la sélection, vous pouvez corriger les derniers détails mis en évidence par l’inversion des couleurs. Si vous agissez au milieu d’une large zone noire ou blanche, utilisez le pinceau(B) en mode normal, opacité 100%. En revanche, si vous devez peindre à la frontière entre une zone noire et une zone blanche, préférez le mode « lumière tamisée » ou « incrustation » selon si vous peignez une zone noire ou blanche (cf : paragraphe plus haut). Petite astuce : voici 2 raccourcis utiles lorsque le pinceau (B) est sélectionné : Pour avoir le noir comme couleur de premier plan c’est la touche (D), pour faire basculer le noir en arrière plan et utiliser la couleur blanche en premier plan, c’est la touche (X).

Maintenant que notre contraste est parfait, nous allons transformer notre couche en sélection en cliquant sur l’icone représentée par un petit rond en pointillés en bas de la fenêtre de couches. Attention à bien cliquer sur la couche « Bleu copie » auparavant afin de l’activer.

L’araignée étant à présent sélectionnée, nous allons réactiver la couche RVB, en cliquant dessus. L’image repasse en couleurs, la sélection est toujours visible.

Afin d’utiliser cette sélection, il faut revenir sur la fenêtre « Calques » (F7).

Maintenant, utilisez l’outil de sélection (M), placez-vous à l’intérieur de la sélection et faite un clic droit : « Calque par Copier ». Autre possibilité, placez-vous sur le calque de fond et utilisez le raccourci : Ctrl+J. Cela va copier l’araignée détourée sur un nouveau calque situé en haut de la pile. Pour mieux visualiser la qualité de la sélection, vous pouvez créer un nouveau calque placé sous l’araignée détourée et le remplir d’une couleur vive. J’ai utilisé du rose pour visualiser le résultat. Petite astuce : Il arrive qu’il reste une frange de 1px autour de votre sélection. Pour corriger cela, allez dans : « Calques » > « Cache » > « Retirer le cache Noir » ou « Retirez le cache Blanc ». Cela aura pour effet de supprimer le surplus noir ou blanc autour de votre objet.

Ce tutoriel est maintenant terminé, le but était de mettre en évidence la puissance des couches RVB pour effectuer des sélections complexes. Si certaines parties ne sont pas assez claires, n’hésitez pas à m’envoyer un mail pour toutes explications supplémentaires. Vous pourrez télécharger l’image utilisée pour le tutoriel sur la banque d’images « Stock X-Change » à cette adresse : http://www.sxc.hu/photo/964417. Les techniques décrites dans l’article ont été mises en évidence par Scott Kelby, formateur Photoshop aux USA, rédacteur en chef du magazine « Photoshop user » et président de la NAPP (National Association of Photoshop Professionals).

La difficulté arrive lorsque l’image comporte plusieurs calques et que vous souhaitez ajouter un halo sur toute l’image. Le problème réside dans le fait qu’un halo ne peut-être appliqué que sur un seul calque et qu’il s’étendra sur les éléments qui le composent mais pas au delà.

Une première possibilité consiste à créer un nouveau calque en aplatissant les éléments existant [Maj+Ctrl.Alt+E un raccourci très utile]. Le problème c’est qu’avec cette opération, vous ne pourrez plus modifier votre image…

Il existe une petite astuce qui vous permet d’ajouter un halo sur un calque « invisible ». Seul la lumière du halo se verra et elle s’étendra sur la surface que vous souhaitez.

Pour cet exemple on va imaginer que le halo devra pouvoir s’étendre sur toute l’image. Donc, voici la marche à suivre en 5 étapes…

Premièrement on sélectionne toute l’image [ctrl+A]