Images | Le pingouin de l'Oise

Images

2018

21 septembre

Des effets au survol d'images

La fonction hover permet de modifier un élément (un lien, une image) lors du survol de la souris. En utilisant le CSS voici quelques exemples d’effets à réaliser simplement. Un zoom sur image Le html <a class="zoom"><img src="url_de_l_image" /></a> Le css a.zoom{ display: inline-block; overflow: hidden; position: relative; text-decoration: none; } …

lire la suite

2017

15 mars

Un slideshow avec légende

Comment mettre une légende sur un diaporama. Un diaporama Ella Fitzgerald Nina Simone Sarah Vaughan Billie Holliday #slideshow { position: relative; margin: 0 auto 0; } #slideshow .container { position:relative; height: 600px; width: 800px; overflow: hidden; } #slideshow .slider { position: absolute; left:0; top:0; width: 3200px; height: 600px; -webkit-animation: slider 24s infinite; …

lire la suite

27 janvier

La propriété « background »

La propriété background est un raccourci qui définit les différentes valeurs des propriétés liées à la gestion des arrière-plans d’un élément. Un fond d’écran extensible Les marges sont mises à zéro, l’image (image.png) est appelée, centrée et couvrira l’écran. Le css html { margin:0; padding:0; background: url(image.png) no-repeat center fixed; -webkit-background-size: …

lire la suite

16 janvier

Le codage des couleurs

Nous pouvons spécifier les couleurs des éléments qui composent un document web de plusieurs manières. La notation hexadécimale est actuellement la plus utilisée dans les feuilles de style (CSS). Cette notation produire 256 × 256 × 256 = 16 777 216 codes différents. La recommandation CSS permet une notation plus courte basée sur un seul chiffre hexadécimal par couleur. Le programme interprète le …

lire la suite

7 janvier

Une lightbox simple en CSS

L’effet lightbox permet d’afficher des images, du contenu, des pages au premier plan d’une page Web sans avoir à quitter la page. Il assombrit le reste de la page et met en évidence le contenu en surbrillance. Utilisons un shortcode Il faut composer un fichier lightbox.html dans le répertoire layouts/shortcodes de votre thème. Lightbox.html <a href="#{{ .Get "href" }}"> …

lire la suite

© 2018 - 90v3Z - L3 P1n90U1n - Propulsé par Hugo