menu 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 ! Avec les CSS, on peut réaliser un menu horizontal avec une liste à puces dont chaque item sera un bouton. 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. Code CSS Résultat attendu Astuce Haut
Blur Menu with CSS3 Transitions There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering. View demo Download source There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. The images in the demos are by fabulous Mark Sebastian and they are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License. Please note that this will only work properly in modern browsers and unfortunately Internet Explorer does not belong to that category yet since it does not support transitions (and many other suggested CSS3 properties that others do support). The Markup Let’s create the HTML structure for our menu first. Now we’ll add some style!
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. 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 : N'oubliez pas le Doctype !
jInvertScroll - A lightweight jQuery horizontal Parallax scrolling plugin jInvertScroll - A lightweight jQuery horizontal Parallax Plugin What is it? It's a lightweight plugin for jQuery that allows you to move in horizontal with a parallax effect while scrolling down. It's extremely easy to setup and requires nearly no configuration. Note: By using this plugin, we expect that you know the limitations of horizontal parallax scrolling, for instance if the screen height is smaller than the content, the content will be clipped, but this plugin is intended anyway for webdesigners and -developers, so we think that you know what you're doing. ;-) Quickstart 1.) position: fixed; // All scrollable elements have to be position:fixed bottom: 0; // Make it stick to the bottom (or top) width: xxxxpx; // I recommend to assign the width in px, prevents preloading issues 4.) $.jInvertScroll(['yourselector1', 'yourselector2' Options You can tweak some options if you like: Download You can download the script as a zip file here: jInvertScroll.zip ..or get it from our GitHub repository.
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
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
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.
Initiation au positionnement CSS : 3. position absolue et fixe La position absolue et la position fixe permettent de placer une boîte par rapport aux limites de la zone d’affichage ou du conteneur. Comment les utiliser dans une mise en page CSS ? Cet article fait suite à l'initiation au positionnement CSS: 2.position float. Une boîte en positionnement absolu peut être placée n'importe-où dans le code HTML et s'afficher à l'endroit de votre choix. Ceci s'avère très utile en particulier pour : placer les menus de navigation en fin de page, pour améliorer l'accessibilité de votre site en donnant un accès immédiat à son contenu dans les navigateurs textes, tout en les faisant apparaître en haut de page ou encore dans une colonne pour les navigateurs graphiques ; créer plusieurs colonnes au positionnement indépendant de l'ordre dans lequel elles se trouvent en HTML. Le fonctionnement de la position absolue Le positionnement absolu « retire » totalement du flux le contenu concerné : sa position est déterminée par référence aux limites du conteneur. En CSS :