UNE OMBRE PORTÉE
UNE OMBRE PORTÉE
Techniques SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

XML

[SPIP 1.9 et GD 2] On veut créer et placer une ombre portée derrière une image. Cette image peut être une photographie rectangulaire (JPEG et non transparente), une image détourée (idéalement, un PNG 24 transparent, car placer une image derrière un GIF transparent est toujours risqué), ou encore une image typographique (du texte transformé en image).

Une ombre portée est une duplication de l’image, entièrement noircie, floutée, semi-transparente (une ombre entièrement noire n’est pas jolie, on préfère un noir semi-transparent, l’ombre rendant ainsi plus foncés les détails situés sous elle), et placée sous l’image d’origine avec un léger décalage.

Pour notre exemple, nous utiliserons une image installée en tant que document joint. On peut ainsi l’insérer avec #EMBED_DOCUMENT, ou filtrer le nom du fichier avec #FICHIER. (Note : dans la version actuelle de SPIP, il n’est pas possible d’appliquer des filtres après #EMBED_DOCUMENT, d’où l’utilisation de #FICHIER lorsqu’on veut utiliser les filtres graphiques.)

Pour que l’effet soit le plus intéressant possible, utilisons un PNG 24 transparent (par exemple un GNU jouant du pipeau).

Commençons notre série de filtrages.

Première étape : « brûler » l’image. Toutes les parties non transparentes de l’image doivent être complètement noires. Le filtre image_gamma modifie la luminosité d’une image. Avec la valeur extrême 254, l’image est brûlée :

Deuxième étape : flouter l’ombre. Le filtre image_flou est votre ami :

On peut régler l’intensité de image_flou en lui passant un paramètre en 1 (très peu de flou) et 11 (très flou). Ainsi :

Attention : plus ce chiffre est élevé, et plus le calcul est lourd. Si, au delà d’une certaine valeur de floutage, vous dépassez le temps limite de votre hébergement (timeout), mais que des valeurs inférieures « passent », vous pouvez enchaîner plusieurs image_flou :

Revenons à notre GNU. Troisième étape : rendre l’ombre semi-transparente. C’est exactement le rôle du filtre image_alpha :

C’est terminé. Il nous suffit maintenant de placer l’image de l’ombre sous l’image d’origine, avec un léger décalage. Ce qui peut se réaliser ainsi :

Octobre 2006
Une ombre portée

quel est la definition exate de l ombre porter et a quoi cela sert

Février 2007
Une ombre portée
JPC (jean-paul.chaumel chez wanadoo.fr)

Je souhaite utiliser ceci dans un modèle, utilisation des possibilités de spip v1.9.

Comment et où intégrer le code dans le modèle d’origine de spip img.html, que je mettrai en temps que modèle dans mon squelette ?

Avec quel raccourci je l’appele dans mon texte ?

Merci de votre aide, vous avez remarqué que je n’étais pas un pro de la programmation !!! JPC

Février 2007
Une ombre portée
Guy

Bonjour, Y a-t-il un moyen pour appliquer cette technique de manière automatique et systématique à toutes les images associées aux articles dans un même site ?

Juin 2007
Une ombre portée
safpb (firzen-x chez hotmail.fr)

ca sert a quoi ?

il y a 5 mois
Une ombre portée
Loiseau2nuit (l.oiseau2nuit chez gmail.com)

Merci Arno* :)

et bonne année 2008 bien sûr ! :D

Votre message :
Un message, un commentaire ?

(Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)