background preloader

Menu déroulant en CSS3 avec transition et max-height - CSS / CSS3

Menu déroulant en CSS3 avec transition et max-height - CSS / CSS3
Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Démonstration Le sujet du menu déroulant est très sensible. Un bout de HTML Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonnées. <ul id="menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Level 1.1</a></li> <li><a href="#">Level 1.2</a></li> </ul> </li><li><a href="#">Menu 2</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> </ul> </li><li><a href="#">Menu 3</a> <ul> <li><a href="#">Level 3.1</a></li> <li><a href="#">Level 3.2</a></li> <li><a href="#">Level 3.3</a></li> </ul> </li> </ul> Place au CSS

Créer un menu horizontal centré en CSS (sans JavaScript) - CSS / CSS3 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. 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. Il nous faut maintenant simplement annuler les styles par défaut de la liste pour obtenir des liens alignés sans puce de liste. Démonstration simple Démonstration stylée Écrit par Geoffrey Crofte

Pompage.net - Inline-block est-il un substitut aux floats ? Par Steven Bradley Quand vient le moment de développer la mise en page avec CSS, float fait le plus gros du travail. Nous utilisons les éléments flottants pour les blocs importants comme une zone de contenu principale ou une colonne latérale ; nous y avons aussi recours pour les blocs de moindre taille à l’intérieur de ces blocs principaux. Mais les floats sont-ils toujours le meilleur choix? Si les floats fonctionnent généralement sans problème, il peut parfois être délicat de les manipuler. Les inline-block n’ont rien d’une nouveauté et il est possible que vous les utilisiez déjà. Qu’est ce qu’un inline-block ? Inline-block est l’une des valeurs possibles pouvant être assignées à la propriété display d’un élément. Les éléments de type bloc génèrent des boîtes selon le modèle de boîtes CSS. Lorsqu’on y pense, ce comportement n’est pas si éloigné de celui des éléments flottants. La différence entre float et inline-block Tous les blocs ci-dessus ont une déclaration display: inline-block.

KNACSS, un framework CSS minimaliste qui claque sous la dent ! CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules.

Créer un menu vertical latéral en css II - Copier coller Deuxième petit mémo pour créer un menu latéral dans son wordpress. Dans l’autre tuto, on fait apparaitre les sous menus au survol, en les faisant apparaître sur le coté.Ca peut être plus ou moins joli selon les sites. Une autre façon de procéder et de faire apparaitre les sous menus, sous les menus, donnant ainsi un petit effet sympa, très proche des menus jQuery. On fait appel au menu wordpress: <div id="menu_dynamique"><?php wp_nav_menu( array( 'theme_location' => 'primary') ); ? On va ensuite dans le backoffice de son site pour créer son menu : on va dans Apparence, Menu, et on place les pages, liens ou catégories que l’on aura crée au préalable. Ici j’entoure mon menu d’un id “menu_dynamique” qui va me servir à le pointer et le styliser en css.Wordpress génère automatiquement des ul li avec des noms de classes génériques.En faisant control Maj I sur son site, on retrouve notre menu, généré par notre fonction wp_nav_menu().

50+ Useful CSS3 Tutorials to Enhance Your Skills People in the web design community now has been talking about the wonders brought about by CSS3. Obviously, it is does not only control the styling of the web page as what CSS2 does, but also the behavioral attributes of the design. This novel technology certainly makes it convenient for you to add animations and transitions right on your stylesheet. Although it is hoped to be the technology that can perform a multi-faceted role in web designing, CSS3 unfortunately is not yet a w3C standard. When the newest stylesheet language however reaches its full potential, it will surely change the way we do things in the industry. CSS3 Tutorials on Sliders, Carousels, Galleries and Accordions Responsive CSS3 Slider Without Javascript The actual slider is much like any JavaScript slider. How to Create a Content Accordion in Pure CSS3 In this tutorial you will learn how to create a pure CSS3 content accordion. Image Accordion with CSS3 Fullscreen Slit Slider with jQuery and CSS3 CSS3 ordered list styles

Sélecteurs css - Tais toi et code Nous l’avons vu, la mise en forme css se définit par un ensemble de règles, composées de déclarations, appliquées aux balises html. La première partie d’une règle, celle qui indique l’élément ou les éléments html à laquelle elle s’applique, soit la partie dans la règle correspond à ce que l’on appelle le sélecteur. Sous sa forme la plus simple, un sélecteur désigne une balise. La règle ci-dessus indique que, dans la page html, tous les éléments dont la balise est <div> auront un fond de couleur rouge. Sélecteur de type id Hors, il arrive que plusieurs éléments partageant la même balise doivent être mis en forme différemment. et de pointer vers cet élément précis dans le css à l’aide du sélecteur la règle css deviendra donc Cette manière de faire nécessite que l’élément html à mettre en forme ait un identifiant unique, spécifié dans le code html (ici « bloc »). Sélecteur de type class et de pointer vers ces éléments à l’aide du sélecteur Chemin d’éléments et les règles css Sélecteurs combinés

All you need to know about CSS Transitions CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye. In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU. Browser support CSS transitions are supported in practically every version of Firefox, Safari and Chrome. Webkit based browsers (Safari and Chrome), still require -webkit prefixes for animations and gradients, but these are soon being removed. Applying transitions A simple way of applying transitions is with CSS pseudo-classes, such as :hover. When the :hover pseudo-class is activated, the height will be transitioned linearly from 100px to 200px over a period of 2 seconds. Transitioning gradients Clipping

Les sélecteurs CSS 2 et 3 Les règles des feuilles de styles sont composées d'un sélecteur qui désigne l'élément du code HTML et d'une définition comportant une liste de propriétés relatives à cet élément HTML ou cette classe d'éléments. Un sélecteur peut être un sélecteur simple ou un sélecteur composé, ou une chaîne de sélecteurs simples ou composés séparés par des combinateurs. Ceux-ci sont les signes > ou + ou espace blanc. Le sélecteur simple Ce peut être le nom d'une balise, celui d'une classe précédé d'un point, celui d'un identifieur précédé du symbole dièse. Exemple, un code HTML: La feuille de style associée: Tous les calques auront un fond blanc. Le seul calque dont l'identifieur est "identifieur" aura un texte de couleur rouge. Tous les calques appartenant à la classe "box" auront un bord gris d'un pixel d'épaisseur. En conclusion, les sélecteurs permettent d'associer un style à un élément unique, à une balise ou à des balises différentes mais ayant une même classe. Le sélecteur universel La règle: Syntaxe: ou:

Related: