CSS3 Dropdown Menu While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down. CSS Code I’m not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image.
Media types 7.1 Introduction to media types One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc. Certain CSS properties are only designed for certain media (e.g., the 'page-break-before' property only applies to paged media). On occasion, however, style sheets for different media types may share a property, but require different values for that property. 7.2 Specifying media-dependent style sheets There are currently two ways to specify media dependencies for style sheets: Specify the target medium from a style sheet with the @media or @import at-rules. The @import rule is defined in the chapter on the cascade. 7.2.1 The @media rule An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). Style rules outside of @media rules apply to all media types that the style sheet applies to. all print
Le CSS - Tutoriel HTML & CSS La syntaxe Un fichier CSS permet de changer radicalement l'affichage de plusieurs pages HTML. La structure d'un fichier CSS est simple (plus que celle d'un fichier HTML). Expliquons cette structure avec quelques définitions : Chaque règle CSS sert à appliquer des styles à une balise HTML, certaines balises, ou un groupe de balises ; Chaque règle d'un fichier CSS débute par un sélecteur. Pour illustrer ce que nous venons de voir, nous allons voir comment centrer le titre de niveau 1 de nos pages Web. Si maintenant nous voulons une couleur bleue pour ce même titre, nous devons appliquer une seconde déclaration (couple "propriété: valeur") pour le même sélecteur h1 : il s'agit de la propriété "color", et nous lui donnons la valeur "blue". Avant de commencer la lecture, et pour vous donner l'envie d'apprendre, Découvrez Snaky 360, le jeu de serpent addictif réalisé par l'auteur de ce tutoriel... Lier le CSS au HTML <! Le fichier style.css, quand à lui, pourra ressembler à ceci : <! Les sélecteurs
Menu déroulant en CSS sans javascript, compatible IE et FF tout niveau - Peut-être une réponse ? Jeudi 10 novembre 4 10 /11 /Nov 00:00 Mise à jour le 08/06/2006 22:31 Ca y'est!!! L'astuce est d'écrire 2 fois le menu et sous-menu, 1 fois pour IE (caché de FF) et 1 fois pour FF (caché de IE). Si pour FF la gestion d'un menu déroulant est un jeu d'enfant, habituellement pour IE, on utilise du javascript. Toute la difficulté était de trouver une solution pour la gestion du "déroulement" du menu en CSS sous IE. Attention!! Le code CSS et HTML de ce menu n'est pas très compliqué, mais de par l'architecture du blog générée par Over-blog et sur laquelle on ne peut avoir la main, son intégration dans l'entête peut être assez complexe. Si vous avez accès au javascript, préféré ce dernier ou utilisé le compromis CSS/javascript d'alsacréations ou le menu "Suckerfish" d'HTMLDog dont on trouve une très belle mise en situation ici . Voili voilou, passons aux choses sérieuses Le menu Ci-dessous, l'exemple avec 2 boutons, vous pouvez aussi allez voir sur mon blog test son intégration dans l'entête:
CSS Box Model Basic Structure of a Web Page While this reference aims to provide a thorough breakdown of the various HTML elements and their respective attributes, you also need to understand how these items fit into the bigger picture. A web page is structured as follows. The Doctype The first item to appear in the source code of a web page is the doctype declaration. The doctype looks like this (as seen in the context of a very simple HTML 4.01 page without any content): <! In the example above, the doctype relates to HTML 4.01 Strict. The Document Tree A web page could be considered as a document tree that can contain any number of branches. Figure 1. If we look at this comparison, we can see that the html element in fact contains two elements: head and body. head has two subbranches—a meta element and a title. Note that there’s some symmetry in the way the tags are opened and closed. html Here’s an example of an XHTML transitional page: <! The html element breaks the document into two main sections: the head and the body. head <! body
CSS : on reprend tout à zéro ! (épisode 3) Par Joe Gillespie Cet article est le troisième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages. Troisième étape : appliquer du style au texte Nous nous sommes déjà débarrassés du côté brut du noir et blanc pour le remplacer par quelque chose de plus doux, mais on peut faire beaucoup plus. On peut changer la police d'écriture, la taille des caractères, la quantité d'espace entre les lignes et ajouter des détails de mise en valeur comme des retraits de paragraphes. La police d'écriture Nous allons commencer par le style de police, dans la mesure où c'est ce qui va apporter le plus grand changement. Ci-dessus : quelques polices courantes sur les ordinateurs Windows et Mac. Voici une indication courante de famille de polices sans-serif : font-family: Verdana, Geneva, Arial, sans-serif; Voici une famille de polices serif : font-family: Georgia, "Times New Roman", Times, serif; Ajoutons les polices sans-serif à nos styles et voyons ce que ça donne. Les titres