Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript
Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS. Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme au «mouseout». Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol différent de l’effet de transition au moment où la souris quitte l’élément. Les propriétés CSS 3 demandent un préfixe pour les navigateurs (-moz-, -webkit-, etc.) que je n’ai pas précisé ici. Rappel sur transition en CSS 3 Pour créer une transition en CSS 3, vous aurez besoin de plusieurs informations, dont : l’effet recherché (et sa correspondance en propriété CSS), la durée et éventuellement le scénario. Je ne vais pas refaire un article complet sur les détails de ces propriétés, il y en a un très bien fait sur Alsacréations.com par Antoine Cailliau.
Nivo Slider, un slideshow jQuery avec de belles transitions
Nombreux sont les plugins jQuery qui font office de slideshow. En voici un qui sort du lot de par ses superbes transitions ! Nivo Slider gère plus d’une quinzaine de transitions, aussi réussies les unes que les autres. Des transitions impressionnantes ! Commencez par importer la feuille de style, le plugin Nivo Slider (deux fichiers : le script jQuery et la feuille de style) et la bibliothèque jQuery dans l’entête de votre document HTML. Côté CSS, la feuille de style est minimaliste. Et pour finir, la fonction nivoSlider() qui doit être appelée avec la séléction de la div « slider ». A vous maintenant de mettre en forme votre slider comme vous le souhaitez en modifiant la feuille de style. Options, thèmes, miniatures… Plus d’une vingtaine d’options existe ! [EDIT] : Nivo Slider a beaucoup évolué depuis cet article, le code ci-dessus n’est donc pas à jour. Requis : jQueryDémonstration : : MIT
CSS3 : animations et transitions d'images ou d'objets
L'ère des gifs animés est morte, celle de flash est en déclin. La faute à... ? Aux CSS3 et à HTML5 qui apportent leur floppée de nouveaux outils pour animer nos sites ! animation et transition permettent d'apporter du mouvement aux pages web en quelques lignes de code. Propriétés utilisées : animation transition Sommaire Avertissement préliminaire : les trucs qui bougent pourtout, qui scintillent, qui clignotent sans arrêt, ont un haut pouvoir de nuisance sur la concentration et la sérénité du visiteur. Réaliser une transition Fonctionne avec : Chrome 4, Safari 3.1 Firefox 4 MSIE 10 Opera 10.5 Un changement de couleur de fond au survol de la souris, ou au focus d'un lien, se fait par défaut de façon binaire : on passe du tout au rien. L'exemple ci-dessous permet de modifier la transparence de la couleur déclarée en rgba en la faisant passer de 60% (une opacité de 0,4) à une opacité totale. Code HTML <p id="doigt"><a href="#doigt">On ne montre pas du doigt ! Code CSS Haut Réaliser une animation
Menu horizontal en CSS - CSS Debutant
Les menus sont logiquement des listes à puces. Oui, mais voilà, si on veut un menu horizontal, on ne voit pas bien comment faire devenir une liste verticale en liste horizontale... Et bien si ! Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : background-color border-color ; border-style ; border-width color float height list-style-type padding text-align ; text-decoration width Code (x)html <ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item plus long</a></li></ul> Ce code html va donc être stylisé afin d'obtenir un menu horizontal, soit sous forme de boutons simples sans images, soit avec des images de fond qui changeront au survol de la souris par effet rollover. Mise en forme de boutons CSS simples Le principe est donc de transformer cette liste à puces verticale en liste (sans puces) horizontale. Chaque item (li) devra néanmoins être légèrement écarté de son voisin, on va donc déclarer une marge droite à 2 pixels (margin-left:2px).
Centrer les éléments ou un site web en CSS
Il existe plusieurs méthodes d'alignement et de centrage en CSS, qui dépendent de la structure des balises (bloc, en-ligne) et le type (vertical, horizontal). Le centrage horizontal des éléments de type en-ligne Vous voulez centrer horizontalement un élément de type "en-ligne" au sein d'un bloc. La propriété CSS text-align est prévue pour s'appliquer sur un élément bloc (conteneur) et contrôlera l'alignement (gauche, droite, centré, justifié) de tous les élements de type "en-ligne" contenus dans ce bloc conteneur. C'est exactement ce qu'il nous faut ! Il vous suffit donc par exemple de procéder ainsi pour centrer une image au sein d'un élément <div> : Le centrage horizontal des éléments de type bloc Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales. Donnons à notre bloc l'id global : De cette manière, il équilibrera automatiquement les marges latérales. Donc :
Créer un menu horizontal centré en CSS (sans JavaScript)
Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 93 383 fois. C’est une chose qui peut paraître très simple à faire, mais sur laquelle beaucoup de personnes se sont cassés les dents. Aujourd’hui encore je trouve des solutions en JavaScript qui permettent d’attribuer une marge à gauche de l’élément ul pour centrer les li qu’il contient. Solution avec li en inline Vous savez sous doute que l’affichage des éléments de liste se fait par défaut en display: list-item;, qui procure à la liste ce comportement particulier, notamment l’attribution de puces de liste. Considérons le code HTML suivant : <ul id="nav"> <li><a href="#">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Contact</a></li> </ul> Les commentaires HTML entre chaque élément de liste permettent de supprimer l’espace blanc (white-space) indésirable, visible sur certaines mises en forme. Solution avec li en inline-block
