Afficher un arrière-plan translucide sur une image de fond

C'est certainement du B-A-Ba pour les graphistes et autres web-designers, mais il a fallu que je trouve un blog utilisant l'effet que je cherchais pour comprendre. Vous avez trouvée une chouette image d'arrière-plan, mais l'on n'arrive plus à vous lire sur ce fond. L'idéal serait de pouvoir l'atténuer, le descendre (ah pardon c'est en papier ça), pour gagner en lisibilité sans trop perdre en décor.

En jetant un œil aux récents candidats du Very Nice Blog, j'ai découvert le blog Arkino 3.0 qui propose d'explorer le Concept Abstrait de l'Optimisme Relatif. Il n'y a pas que la poésie du titre pour valoir le détour, et je pourrais vous parler de sa mise en forme originale et sans trop de fioritures, d'un graphisme sympathique et soigné sans être précieux... Mais je ne vous parlerai que d'un détail, d'une anecdote, un rien du tout pourtant très utile.

Visitez-le et vous verrez, entre autres choses, que les éléments de colonne sont encadrés en pointillés (ça on sait faire) avec un fond translucide qui permet de voir l'image d'arrière plan. Et ça, je ne savais pas.

(Cette note créée le 15/09/09 a été mise à jour le 11/11/09, avec la publication de Créer une image image translucide)

Protéger ses photos de blog

Soyons lucide! Rien n'empêche un esprit mal intentionné de s'emparer d'une photo par une simple capture d'écran.

Ne devenons pas parano! Parmi les solutions ici testées, vous en trouverez une suffisamment dissuasive.

 

Créer et insérer une animation GIF avec Loogix.com

Le site Loogix.com vous aide à produire en ligne une animation simple pour l'insérer dans votre blog hautETfort.
Cette solution pour insérer un GIF animé s'ajoute à la note "Insérer une image transparente, animée, voire les deux"

** = niveau assez facile, nécessite de copier/coller un peu de code HTML

Insérer une image transparente, animée, voire les deux.

Insertion depuis un fichier, ou depuis une URL, il faut savoir bien choisir la méthode d'insertion d'une image pour en préserver l'intégrité.

Vous en avez peut-être déjà fait l'expérience. Vous aviez trouvé une image animée ou une image partiellement transparente, et après l'avoir inséré, cette dernière était figée, et sur fond noir. Sous ces lignes, deux images dont l'une était à l'origine un GIF animé, et l'autre avait un fond transparent. Vous voyez bien qu'elles ont toutes deux perdu une qualité essentielle, et peut-être même la seule qu'elles possédaient.

Quand on insère une image avec l'onglet "Depuis un fichier", on active un process de conversion qui va permettre la génération d'une image dans une dimension déterminée, avec la possibilité d'accéder à une copie de l'image d'origine. Nous avons vu ce processus dans la note qui ne veut pas que ça l'affiche mal.
C'est pendant cette conversion que l'on perd la transparence et ou l'animation. Plutôt que de leur faire traverser la vitrine, il faut donc livrer ces images par l'arrière-cour puis les faire venir en magasin.