En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Images avec inContent Effects
 
 
 
    Imprimer la page...
    Imprimer la section...

Images avec inContent Effects

Des images avec InContent Effects

Ces propositions ci-dessous sont de Bruno Rodrigues, malheureusement, je ne trouve pas de liens valides vers son (ou ses) site(s). Mais on peut trouver le dossier ici : http://itbruno.github.io/InContent/

info licence : Distribué sous licence MIT.

Je me suis contenté de jouer avec et de modifier à la marge les propositions en permettant, notamment des fonds différents sur chaque image.

pict01

Bottom to Top *1

font

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict02

Top to Bottom *2

archery

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict03

Left to Right *3

thread-and-needle

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict04

Right to Left *4

drawing-pad

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict05

Rotate In *5

guitar

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict06

Rotate Out *6

icon

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict07

Open Up *7

paint

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict08

Open Down *8

bike

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict09

Open Left *9

note

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict10

Open Right *10

sound

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict11

Come Left *11

weave

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

pict12

Come Right *12

write

Imagettes issues de OpenClipArt

Images de fond issues de Pixabay

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant à chaque effet en adaptant les contenus, bien sûr.

Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Les lignes surlignées en bleu ne servent qu'à centrer les images de ce tutoriel. Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Les parties surlignées en jaune servent à montrer comment placer des liens à différents endroits du code (dans le titre, dans le texte, sur des images...). Mes images (300*225px) sont dans un dossier images placé dans le dossier img à la racine de GuppY. Les imagettes (50*50px) sont dans un dossier vignt situé dans ce dossier images. Il faut évidemment adapter les sources à votre configuration.

Dans le code simplifié, je n'ai placé que l'essentiel. C'est juste pour montrer l'enchainement le plus simple.

ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.


Date de création : 06/10/2018 @ 14:15
Catégorie : Astuces - Changements au survol
Page lue 5718 fois


Réactions à cet article


Réaction n°1 

par jac83 le 11/10/2018 @ 19:22

Encore de beaux effets ,faciles à mettre en place dans une boîte libre grâce aux explications commentées  cool


Merci pour tes commentaires,

Cordialement,

Jean-Denis