Css | Le pingouin de l'Oise

Css

2019

11 mars

Un moteur de recherche dans Hugo

Comment utiliser un moteur de recherche Google pour votre site ? Celui-ci recherchera uniquement vos articles en ouvrant dans un autre onglet les résultats de sa recherche. Comment procéder ? Dans le fichier header.html, qui se trouve dans le répertoire layouts/partials de votre thème, il faut placer (pour que la barre de recherche soit toujours visible) le code HTML suivant : <form …

lire la suite

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

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