Accueil

Utilisation semi-automatique d'un masque en CSS

Dans le cadre d'un projet, j'avais besoin d'avoir un système extremement simple, automatique, et transparent pour pouvoir mettre en place un affichage de vignette en ayant des coin arrondis.

Donc exit le "Tu ouvres photoshop et tu fais tes bords arrondis" ou autre astuce bien compliqué à mettre en place.

Après réflexion, il semble que le système d'utilisation de "masque" à l'aide d'un première image ayant une gestion de la transparence (donc png ou gif) qui viendra se superposer à la vignette à mettre en place.

Donc, voici à quoi j'arrive, pour l'appel de l'image de base :

<img src="fond.png" < ?php style(image, jpg, 150, 113); ? >>

Dans ce code, fond.png représente le masque, image est le nom de notre vignette, jpg est bien entendu l'extension, 150 la largeur de l'image et 133 sa hauteur.

Maintenant, le code php derriere tout ça, qui gere la mise en place du style CSS adapté au besoin

function style($img , $ext, $w, $h) {
       
        $o =  'style="background: white url('.$img.'.'.$ext.'); width: '.$w.'px; height: '.$h.'px;" width="'.$w.'" height="'.$h.'"';
        echo $o;
}

Les puristes vont hurler : un echo dans une fonction. Oui, je sais. C'est moche. Mais c'est toujours dans le but de simplifier au maximum l'appel d'une image, dans le code précédent.

A rajouter, pour les utilisateur de IE6 (bouh), dans le head de notre page :

 <!--[if lt IE 7.]>
  <script defer type="text/javascript" src="pngfix.js"></script>
  <![endif]-->

(le fichier est disponible en téléchargement en bas de page)

Pour finir, Un exemple concret avec 2 images
Le masque :

La photo à masquer :

Réuni, donne :

<img src="/files/fond_0.png" < ?php style(photo_reunion, jpg, 200, 164); ? >>

Simple, non ?

Fichier attachéTaille
pngfix.js.txt1.5 Ko
PERECil (non vérifié) Says:
15 October, 2007 - 21:32

OUI IE6, LE Navigateur des feignasses qui veulent PAS changer.

»

Poster un nouveau commentaire

Le contenu de ce champ est gardé secret et ne sera pas montré publiquement.
CAPTCHA
Suite a de nombreux spam (plusieurs centaines/heure), je suis dans l'obligation d'imposer un captcha, en attendant de trouver une parade