Zoom
Trash
Related:
Emmanuel B. :: Un menu horizontal déroulant (CSS) - Iceweasel Nous allons voir comment faire un menu horizontal déroulant, avec plusieurs sous-niveaux, uniquement en HTML/CSS Vous pouvez voir un exemple ici. Voyons d'abord le code html : Pour l'instant, nous obtenons un rendu tout à fait normal d'une liste html à plusieurs niveaux. Vous pouvez constater qu'il n'y a pas de classes, car tout va se passer en CSS ! Et maintenant, du CSS ! Tout d'abord, il faut enlever les marges automatiques des listes, et supprimer les puces devant chaque élément : Vous avez peut-être noté la présence de font-size: 0; ? Vous trouverez d'autres solutions au problème de white-space sur Alsacréactions. Voyons maintenant les propriétés à donner aux éléments de liste : Comme annoncé, les éléments de liste sont déclarés comme inline-block, et on donne une taille au texte. Définissons maintenant les liens : Pour pouvoir appliquer une largeur et une hauteur, il faut donner au lien la propriété display: block;. Il faut enfin masquer les sous-menu par défaut : Simple n'est-ce pas ?
Creative CSS3 Animation Menus | Codrops - Iceweasel Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements. View demo Download source Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The Markup The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title: As we are using a symbol font for the icons, we write letters for the icons. The CSS The common style for all the examples will be the inclusion of the symbol typeface: Example 1 Example 2
CSS Transitions - Iceweasel Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Status of this document This section describes the status of this document at the time of its publication. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. This document is expected to be relatively close to last call. Table of Contents 1. This section is not normative. This document introduces new CSS features to enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration. 2. Transitions of ‘left’ and ‘background-color’ Transitions are a presentational effect. Example(s): 2.1. 2.2. .
CSS Transitions - Iceweasel Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. This document is expected to be relatively close to last call. Table of Contents 1. This section is not normative. This document introduces new CSS features to enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration. 2. Transitions of ‘left’ and ‘background-color’ Example(s): 2.1. 3.
Media Queries - Iceweasel Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. 1. 3. 5.