Donne des effets aux photos avec HTML

HTML et CSS

Hyper Text Markup Language (HTML ou en espagnol "langage des marques hypertextes") est un langage auteur courant utilisé par les développeurs Web pour créer des sites Web statiques. La structure d'une page Web est établie avec HTML. Bien qu’il soit efficace pour créer le squelette de votre projet Web, il n’est pas aussi bon pour l’utiliser comme style ou pour créer des effets. Pour cela, les feuilles de style en cascade (CSS) sont utilisées et complétées par votre code HTML, ce qui vous permet d'ajouter des éléments graphiques et des styles à votre page Web. Par exemple, si vous souhaitez que le texte apparaisse en gras dans tous les en-têtes de chaque page, vous pouvez le faire avec CSS.

Opacité de l'image

L’opacité est l’un des effets graphiques les plus courants. L'opacité détermine le degré de transparence d'une image trouvée sur le site. Si vous souhaitez placer une image d'arrière-plan sur votre page Web et que vous devez réduire l'opacité pour créer un effet plus transparent, vous pouvez le faire avec CSS. Placez le code CSS correspondant dans la balise HTML :

Dans cet exemple, l'opacité sur "50" a été définie, ce qui a réduit de moitié la visibilité des images de la page Web.

Effet "survol"

Vous pouvez appliquer l’opacité un peu plus loin et modifier l’opacité d’une photo lorsque le curseur de l’utilisateur le survole. C'est un effet de "survol". Le code est similaire à un simple changement d'opacité et est également placé dans la balise HTML . C'est un bon effet d'utiliser les boutons de navigation.

Vous pouvez voir les commandes "onmouseout" et "onmouseover". Lors du chargement de la page, ce code réduit l'opacité de l'image de 50%. Lorsque vous passez le curseur dessus, il augmente à 100%. Lorsque vous suivez les parcours, l'image est réduite à 50%.

Flotter

"Float" est un autre effet HTML et CSS simple pour une photo. Le "float" définit l'endroit où une image apparaîtra dans un tableau, une cellule ou un document. La commande "float" utilise les propriétés gauche, droite et centre. Vous pouvez l'utiliser pour placer une image dans le texte ou pour créer une série d'images correctement placées dans une galerie. Vous pouvez définir ceci dans la balise HTML head comme suit:

Dans l'exemple précédent, il était indiqué que tous les éléments HTML avec la balise flotter à gauche dans le document.