Logo site Des Geeks et des lettres

L'application pour surveiller / sauvegarder vos smartphonesL'oeil inquisiteur de Bibispy

Image de fond avec colonne centrale transparente

Le but de ce billet est de vous présenter un moyen simple et rapide de faire apparaître sur vos pages une colonne centrale transparente tout en laissant apparaître l’image de fond.

Cette colonne a pour vocation d’identifier d’un coup d’oeil le contenu central de vos pages de l’image de fond, en la faisant apparaître en filigrane.

Opacity

La première chose à laquelle j’ai tout de suite pensé est la propriété css « opacity », qui permet justement de spécifier l’effet transparence d’un élément (l’opacité) :

Cette propriété peut prendre la valeur d’un nombre compris entre 0.0 et 1, 0.0 étant totalement transparent et 1 totalement opaque.

image_zoning_transparent_opacity

Visuellement l’effet filigrane est réussie, cependant l’opacité de la colonne va s’appliquer automatiquement à tout son contenu … ce qui rend cette solution inutilisable.

Image

L’utilisation d’une image transparente au format PNG permet de résoudre le problème cité ci-dessus.
L’effet transparent étant porté par une nouvelle image superposée à l’image de fond, les éléments insérés à l’intérieur de cette colonne « transparente » n’hériteront pas de cette propriété.

image_zoning_transparent_image

Je vois deux légers bémols à cette solution :

  1. L’ajout d’une requête HTTP supplémentaire afin de télécharger l’image transparente (20 pixels x 20 pixels pour 940  bytes)
  2. L’ajout d’une seconde image au format .gif à prévoir pour le navigateur IE6 qui ne gère pas nativement la transparence des images .png

RGBa

Finalement la solution la plus propre reste la nouveauté incluse dans la spécificité CSS3 nommé RGBA : cette composante de la couleur permet de jouer sur les effets d’opacité entre les différentes couches d’éléments HTML.
Contrairement à la propriété « opacity » vu plus haut qui s’applique à l’élément dans son intégralité et tous ses descendants, la notion RGBa est une valeur qui s’applique à une propriété de l’élément sélectionné uniquement, ce qui est exactement ce que nous souhaitons :

L’image au final est là même qu’avec la solution « image », sauf que tout est à présent fait nativement en CSS sans requête HTTP supplémentaire, le cas d’IE reste contournable avec le filtre propriétaire Microsoft comme suit :

Vous aurez compris, c’est la solution que j’ai choisie.

Structure HTML et CSS

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 4 janvier 2013, 14 02

    Je vois que tu t’es bien remis à coder 🙂

    Réponds !

  • Mimie 5 janvier 2013, 20 08

    Article mis à jour, 3ème solution encore meilleure (RGBa).

    Réponds !

Article suivant:

Article précédent:

Recherche

A vos stylos !

  • Greg: “Ahah. Tu m'étonnes.Déc 8, 21:19
  • Benjamin: “Ahah ! J'aime ces coups de gueule, pour la peine je verrai pas ce film, fuck !Déc 8, 19:52
  • Greg: “Non, j'ai l'impression que Pinterest empêche l'utilisation de plugin annexes (je me trompe peut-être)Déc 8, 18:26
  • danielle: “vous avez réussi à afficher? j'ai le meme problème avec Safari je n'arrive pas à afficher certaines photosDéc 8, 18:12
  • Greg: “Salut Ben, Peut-être, je ne me souvenais plus que tu m'en avais parlé, mais bonne perle sympathique en effet…Déc 7, 21:33
  • etienne minsongo mendo: “Bsr à tousje suis Etienne Minsongo apprenti programmeur! je voudrais savoir: le serveur local XAMPP.... aurait-il des inconvénients?Déc 7, 15:45
Share This