Les propriétés CSS :nth-child et :first-child Afin de styliser en CSS une liste d’éléments, que ce soit pour la navigation de votre site web ou pour une liste dans vos contenus, vous pouvez utiliser un « ID » différent pour chacun de vos items. Cependant, cela aura comme inconvénient de vous créer plusieurs lignes de codes qui auraient pu être évitées à l’aide de différentes propriétés telles que :nth-child, :nth-of-type, :first-child et :last-child. Ces propriétés sont également très utiles lorsque vous avez une liste avec énormément d’éléments. Voici un article illustrant à merveille l’utilisation de chacune de ces propriétés CSS dans différents contextes afin d’avoir un contrôle absolu sur vos listes HTML. L’article suivant a été écrit par Chris Coyier du site web CSS-Tricks.com Sélectionner seulement le 5e élément Si vous devez sélectionner seulement le 1er élément de la liste, vous pouvez utiliser ceci li:first-child ou tout simplement li:nth-child(1). Tout sélectionner sauf les cinq premiers Sélectionner seulement les cinq premiers
Un IDE pour créer des animations CSS3 Sencha Animator se propose de créer des animations CSS3 grâce à une interface utilisateur conviviale, proche d'un programme de dessin vectoriel. Il est possible d'intégrer des objets, de les déplacer, redimensionner, avec différents niveaux d'imbrication. Des transformations de rotation et de déformation sont disponibles ainsi que les dégradés, les flous, et les ombrages. La ligne de temps permet de s'y retrouver. L'avantage est de gagner du terrain face à des outils tels que Flash qui disposent déjà depuis de nombreuses années d'un environnement tout-en-un permettant de produire des animations sans devoir toucher à une quelconque ligne de code. Les animations en CSS3 sont récentes, et jusqu'à présent il était nécessaire de les paramétrer soi même, ce qui pouvait s'avérer intéressant pour des démonstrations technologiques mais très fastidieux dans un usage plus classique. Ne manquez pas les démonstrations pour avoir un aperçu de ce qu'il est possible de réaliser.
40 Creative Navigation Menus One of the first things to do when planning out a new website is to work out all of the content that will be in the site. You then divide that up into sections and then into various levels of navigation. The result is a boring list of links. That list of links is one of the most important part of your website though, it goes without saying that every visitor to the site will be using them to get around. In this post we’ve pulled together some of the best designed navigation bars (both horizontal and vertical) to help give you ideas to enhance your own. Horizontal Menus 1. A beautiful minimalist menu with fast colors and a compact design. 2. Sleek looking tabs with drop shadow and a beautiful background pattern. 3. iPhone style menu for an Iphone app. 4. Simple, compact and sleek. 5. Light colors and creative symbols make this menu stand out from the crowd. 6. Solid colors and simple MouseOver effects make this menu pretty. 7. A nice multi-colored menu. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.
CSS Overflow Module Level 3 Abstract CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. This module contains the features of CSS relating to new mechanisms of overflow handling in visual media (e.g., screen or paper). Status of this document This is a public copy of the editors' draft. 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. The following features are at risk: … Table of contents 1. In CSS Level 1 [CSS1], placing more content than would fit inside an element with a specified size was generally an authoring error. CSS Level 2 [CSS21] introduced the ‘overflow’ property, which allows authors to have overflow be handled by scrolling, which means it is no longer an authoring error. 2. 2.1.
Empêcher les flottants de dépasser de leur conteneur Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottants «dépassent». C'est ainsi qu'on se retrouve avec des conteneurs qui font zéro pixel de hauteur, des colonnes qui passent à travers un pied de page, et autres résultats peu souhaitables. Par exemple, avec ce code HTML et CSS les «colonnes» flottantes dépasseront de leur conteneur: <div id="conteneur"><div class="colonne">AAA</div><div class="colonne">BBB</div><div class="colonne">CCC</div></div> Comment bloquer ponctuellement le dépassement des flottants? La propriété overflow La propriété CSS overflow définit comment un bloc doit se comporter lorsqu'un contenu dépasse de ce bloc. Cette propriété a aussi pour caractéristique, lorsqu'on utilise les valeurs autres que visible, de créer ce qu'on appelle un contexte de formatage de bloc. Avantage: technique efficace, tient en une ligne.
50 Gorgeous Navigation Menus – Part 2 If you’re looking to learn more about design websites, please see our post Learn Web Design for plenty of resources to help your educational pursuit. Last week I published a collection of over 50 excellent navigational menus for your design inspiration. Because I found more examples than I used in that post, and because others seemed to share my appreciation for menu design, I’ve decided to put together a second collection. Looking for hosting? 10 techniques avancées et secrets de CSS2 A l'heure où les anciennes versions d'Internet Explorer disparaissent, il devient plus que temps de s'ouvrir aux secrets d'un langage malheureusement trop peu connu : CSS2, ou plus précisément CSS2.1. De larges parties de CSS2 ont été occultées en raison des faiblesses d'IE6 puis d'IE7. Le marché actuel nous offre enfin la possibilité, au cas par cas, de négliger ces anciennes versions du navigateur de Microsoft. Les possibilités offertes par CSS2 sont bien plus vastes que vous ne l'imaginez… Un monde sans Internet Explorer 6 Selon les statistiques européennes, le vénérable ancêtre IE6 ne représenterait aujourd'hui que 2% du marché. min-width, max-width, min-height, max-height Les propriétés de minima et maxima, reconnues dès IE7, facilitent la vie et évitent l'usage de JavaScript dans de nombreux cas de figure : :first-child La pseudo-classe CSS2 :first-child offre la possibilité de cibler uniquement le premier élémént au sein de son parent. :hover Sélecteur d'enfants (A > B)
Le contenu est maitre et le design est son serviteur Que souhaitez-vous trouver lorsque vous cliquez sur les résultats d’une recherche dans Google ? Un beau site ?Ou bien un site où vous trouverez l’information recherchée ? Pour la plupart d’entre nous, notre première attente est le contenu pertinent en rapport avec la requête que nous avons formulée. Pourtant, le design revêt une importance capitale dans la satisfaction de l’utilisateur d’un site web, a condition d’être au service du contenu. Sans contenu utile, le design n’est rien. Le plus beau des sites web sera jugé avec déception s’il ne tient pas la promesse qui nous a amenés à celui-ci. Que ce contenu soit relatif à un produit que vous souhaitez acheter, une vidéo que vous souhaitez regarder, une information que vous souhaitez connaître, vous venez pour lui, le maitre, le contenu. Et pourtant encore presque en 2011, de nombreux sites sont conçus à l’envers. Tous les designers que j’ai pu rencontrer me disent tous la même chose. Dit comme cela, ça nous paraît évident. En résumé
Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite)
Créer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !