Color Hex - ColorHexa.com CSS3 Drop Shadows Generator An Introduction to the CSS Flexbox Module CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive layouts possible and revolutionized front-end development? Well, today, we're going to talk about a new layout mode, called flexbox - new in CSS3. I'm sure you're raring to go! Let's get started after the jump. Subsequent Changes to Techniques & Software Certain aspects of applications or techniques used in this tutorial have changed since it was originally published. CSS Flexbox Support Currently, the CSS Flexbox specification is a working draft and things will change! Please note that this tutorial will use webkit/non-vendor-prefixed examples for the sake of brevity. Background on Layout Modes CSS Flexbox is essentially a layout mode. Occasionally, when an element is not block, it's likely to be inline. Here's a quick tip for accessing the computed style of an element using JavaScript's window.getComputedStyle method. A Quickie Example
Selectors Level 3 Abstract Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. This document describes the selectors that already exist in CSS1 [CSS1] and CSS2 [CSS21], and further introduces new selectors for CSS3 and other languages that may need them. Selectors define the following function: expression ∗ element → boolean That is, given an element and a selector, this specification defines whether that element matches the selector. These expressions can also be used, for instance, to select a set of elements, or a single element from a set of elements, by evaluating the expression across all the elements in a subtree. Status of this document 1. 1.1. 2.
Le CSS Orienté Objet La Programmation Orientée Objet est un concept qui a fait ses preuves dans la conception de sites internet. En effet, elle permet d’avoir un code structuré , facilement réutilisable et dont la mise à jour est rapide et aisée . Pourquoi ne pas l’adapter au CSS ? A priori, le CSS n’a pas grand chose à voir avec de la POO . Pourtant, à y regarder de plus près, on y retrouve des concepts bien familiers: Système de Classes Propriétés Héritage Comment l’appliquer au CSS Les classes CSS Plutôt que d’attribuer à chaque élément de mise en page une classe CSS dont les propriétés sont spécifiques à cet élément précis, on peut tout à fait prévoir de créer des classes génériques que l’on utilisera au besoin selon la mise en page souhaitée. Exemple ci-dessous d’une mise en page dite « spécifique »: index.html style.css Il est évident que le code CSS ci-dessous est exclusivement réservé à cet élément « photo ». Exemple ci-dessous d’une mise en page dite « orientée objet » Ici au contraire, le code est: Mais Ainsi:
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...) 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 Opera 10.5 l'a implémentée directement sans préfixe, puis suite à sa finalisation, l'ont fait également Safari 5.0, Chrome 5.0, Firefox 4.0 et Internet Explorer 9.
CSS3 . Info - All you ever needed to know about CSS3 CSS3 : dégradés sans image à l'aide de background et gradient Avant les CSS3, pour réaliser de jolis boutons ou tout autre fond de couleur en dégradé, il convenait de réaliser une image que l'on déclarait en image de fond à l'aide de background-image. On peut maintenant s'en passer grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient. Sommaire Principe de base Fonctionne avec : Chrome 3, Safari 5.0 Firefox 3.6, SeaMonkey MSIE 10 Opera 11.6 Propriétés et valeurs : background-image: linear-gradient() radial-gradient() Le principe de base est très simple : On définit le type de dégradé voulu : linéaire (linear-gradient) ou radial (radial-gradient) ; On indique les couleurs de départ et d'arrivée et, éventuellement, leurs proportions de mélange. Attention : Les codes CSS indiqués ci-après ne tiennent compte que ponctuellement des préfixes propriétaires à rajouter selon le navigateur (-moz- pour Firefox, -webkit- pour Safari et Chrome, et -o- pour Opera). Le code HTML utilisé pour ce tutoriel sera le suivant : Dégradés linéaires Haut
Les effets graphiques (très) avancés en CSS Vincent De Oliveira · Kiwiparty 2012 t.co/Vw9tDej Vincent De Oliveira Les effets (presque) courants Quoi de plus? Trois fois rien... Commençons par la poudre aux yeux! Background and Borders border-corner-shape: curve | bevel | scoop | notch Au sein de CSS4, pas de support actuellement border-clip: 10px 1fr 10px Au sein de CSS4, pas de support actuellement Quoi de neuf dans la gestion des textes? font-variant · font-feature-settings Contrôle de l'affichage des glyphes Ligatures, crénage, fractions, variantes styllistiques, etc. font-variant Propriété raccourcie Aucun support actuellement font-feature-settings font-feature-settings Ligatures standards: efficaceefficace Ligatures optionnelles: AbbayeAbbaye Chiffres elzéviriens: 482482 Fractions: 1/3 1/41/3 1/4 Ordinaux: 13th13th Attention, fonctionne avec Firefox 4+, IE10 · Police Contenu Book Display Regular Variantes styllistiques: ArbreArbre Variantes contextuelles: ArbreArbre Crénage: WAVEWAVE Petites capitales: CapitalesCapitales Ornements: abcabc
CSS3 Flexbox Layout module Positionner correctement des éléments en CSS s'est toujours révélé être une mission aussi palpitante que fastidieuse en raison d'un lourd passé de navigateurs assez peu enclins à suivre des standards communs. Depuis sa création, CSS propose officiellement quatre types de rendus d'éléments : Le rendu «bloc» Le rendu «inline» Le rendu «tabulaire» Le rendu «positionné» Chacune des valeurs de la propriété display (par exemple inline-block), de float, ou de position, renvoie à l'un de ces quatre types de rendus. CSS3 étend ce périmètre en introduisant un nouveau modèle de boîte «flexible» : flexbox, ou Flexible Box Layout Module. Flexbox est un nouveau mode de positionnement, introduit via la propriété display, permettant de créer un contexte général d'affichage sur un parent et d'en faire hériter ses enfants : Compatibilité de Flexbox module Commençons par calmer les plus optimistes d'entre vous et ceux que je vois déjà en train de se ruer sur leur éditeur HTML préféré. Appliquer Flexbox
IE6 et Z-index la solution ! | Bidouilleur août 23 Puisque nous allons nous « payer » IE6 jusqu’en 2014 (date de fin support de micro$oft..), j’ai décidé de faire une série de posts sur les bugs de IE6 en donnant la solution pour chacun d’eux. Celui-ci concerne z-index qui permet de gérer l’empilement (profondeur) des éléments HTML sur une page. On rencontre ce bug la plupart du temps en créant un menu déroulant,quant le menu se déroule sous le contenu. Pour le résoudre il suffit d’associer les styles CSS : position:relative; et : z-index:1; à la balise parente. Exemple :