Css | Le pingouin de l'Oise

Css

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

9 janvier

Rotation d'une photo

Comment faire pivoter des photos dans les pages Web. L’image est insérée avec un identifiant : <img src="photo.jpg" alt="" id="rotation" /> Il faudra indiquer au css : #rotation { transform: rotate(-10deg); } Ici la transformation se fait à partir du centre de la photo, mais ceci est modifiable : Pour que la photo pivote à partir du coin en haut à …

lire la suite

9 janvier

Effets de couleur en css3

Modifier la couleur d’un bloc au survol de la souris Placer un <div > avec une classe couleur dans la page <div class="couleur"></div> Créer le css adapté div.couleur{ width: 200px; height: 150px; background-color: #795548; transition-property: background-color; /* Active la transition sur background-color */ transition-duration: 1s; /* La transition dure 1s */ …

lire la suite

2017

5 décembre

Une fenêtre modale

Très utilisée pour afficher des informations, pour avoir une aide, cette fenêtre surgit au premier plan. Il est désormais possible de la réaliser sans utiliser le javascript : le CSS 3 suffira. Exemple Cliquer sur Information pour ouvrir la fenêtre. X Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus a sapien id blandit. Pellentesque in porta odio. Proin …

lire la suite

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

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