background preloader

Les préfixes vendeurs en CSS

Les préfixes vendeurs en CSS
Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Quelques inconvénients font surface : Recommandation d'usage courant

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.

Slideshow en CSS3 Un slideshow automatique grâce aux keyframes Je vous ai fait débuter par le plus complexe avec le concept de :target, juste pour vous faire souffrir ;) Vous allez vraiment apprécier cette technique un peu plus simple qui consiste à laisser tourner l'animation en la faisant passer par différentes étapes. Notre CSS va ensuite définir une animation par images-clefs. Dans un premier temps nous annonçons l'utilisation des keyframes. Une autre manière d'écrire cette même animation serait celle-ci: Cette syntaxe permet de gagner en place en regroupant les points d'étape. Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.) - Il est aussi possible de remplacer 0% et 100% respectivement par from et to. - Il est également possible d'utiliser des valeurs en pourcentage pour left. Continuons en réattribuant les styles précédemment utilisés à notre slide : Puis les styles concernant l'élément qui défile dans son conteneur : Voir l'exemple

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.

How to Style Input Type Range in Chrome, Firefox, and IE | Brenna O'Brien The syntax differs from vendor to vendor, but in all cases, you have two components that need to be styled. The track is the long piece representing the range, and the thumb is the nub you slide to pick a value. It is possible to apply styles directly to input[type=range], but you may run into cross-browser troubles. Best to take advantage of the vendor specific track and thumb selectors as much as possible. We'll be using them to recreate this custom styled range slider. Webkit based browsers (Chrome, Safari, Opera) In webkit based browsers, the track is styled with a special pseudo selector ::-webkit-slider-runnable-track, and the thumb with ::webkit-slider-thumb. Custom focus styles can also be applied on the thumb and the track. Gotchas You'll need to tell webkit you want nothing to do with their default styles by including a -webkit-appearance: none; on both the input and the thumb. Firefox There's currently a little bug in Firefox where outline: none doesn't remove focus styles. Bonus

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)

CSS: Centrer un objet Centrer des lignes de texte Le plus fréquent (et donc) le plus facile des types de centrage est de centrer des lignes de texte dans un paragraphe ou dans un titre. CSS possède la propriété 'text-align' pour cela: Chaque ligne d'un P ou d'un H2 est centrée entre les marges, comme ceci: Les lignes à l'intérieur de ce paragraphe sont toutes centrées entre les marges du paragraphe, grâce à la valeur 'center' de la propriété CSS 'text-align'. Centrer un bloc ou une image Quelquefois, ce n'est pas le texte qui doit être centré, mais le bloc dans son ensemble qui doit l'être. Cet étroit bloc de texte est centré. C'est également la façon de centrer une image: placez-la dans un bloc spécifique et appliquez lui la propriété margin. L'image suivante est centrée: Centrer verticalement CSS niveau 2 ne possède pas de propriété pour centrer des objets verticalement. L'exemple ci-dessous montre comment centrer un paragraphe à l'intérieur d'un bloc qui possède une certaine hauteur donnée.

Related: