PUBLIC MARKS from decembre with tags tutorial & tutoriel

Helps you understand how the nth-child, nth-last-child, nth-of-type and nth-last-of-type CSS3 selectors work.

In a nutshell, named function expressions are useful for one thing only — descriptive function names in debuggers and profilers. Well, there is also a possibility of using function names for recursion, but you will soon see that this is often impractical nowadays. If you don’t care about debugging experience, you have nothing to worry about. Otherwise, read on to see some of the cross-browser glitches you would have to deal with and tips on how work around them.

/* For image replacement */ .ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

Boilerplate + Mobile CSS

What to do with these boxes? The six colored boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page. The input elements in the colored fieldsets let you set z-index and position values for each one of these six boxes. These fieldsets are color coded, which means a fieldset's background color matches the background color of the box it is supposed to style. Use Firebug to monitor in real time how these elements get styled.

Avec ces 3 (ou 4) étapes, en particulier en jouant sur la résolution (étape 2) et la compression (étape 3), vous devriez trouver le réglage optimal. À vous de faire des essais pour trouver le bon équilibre entre résolution, qualité d'image et taille du fichier. Voici une vidéo de démonstration des étapes 2 et 3 avec le logiciel The Gimp: sebsauvage.net/temp/wink/gimp_jpeg_compress.html (Vidéo Flash, 5 Mo) Lire aussi : Réduire la taille de photos avec Image Resizer

Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations.

Make the Footer Stick to the Bottom of a Page

L'essentiel de la technique est de retirer la classe hover du body LORS du défilement et tous vos . hover sélecteurs ne correspond pas jusqu'à ce que l'utilisateur cesse de faire défiler la page , la classe étant alors ajoutée a body. About avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class.

Cas des cellules de tableau. Le comportement des cellules de tableaux est souvent radicalement différent des autres éléments du document. Ainsi, dans son modèle de rendu par défaut, le contenu prime et décide de la largeur des cellules et du tableau. Pour rendre word-wrap et text-overflow fonctionnels sur la majorité des navigateurs, il suffit de mettre en pratique le second mode de rendu des tableaux, mal connu : table-layout: fixed : table { width: 100%; /* à adapter selon vos contraintes */ table-layout: fixed; }

Une expression régulière (abrégé expreg), en anglais regular expression (abrégé regexp), est une chaîne de caractères permettant de décrire un ensemble variable par l'utilisation d'une syntaxe précise. Cette chaîne de caractères est appelée motif, en anglais pattern.

Quand un élément est flottant, son parent ne contient plus parce que le flotteur est retiré de la circulation. Pour savoir pourquoi cela se produit, lire Contenant Flotteurs Eric Meyer (Fortement recommandé). Puis, une fois que vous comprenez ce qui se passe, utilisez l'une des méthodes ci-dessous pour «fixer».

Aussi puissant et utile comme ils sont, les flotteurs peuvent faire produire des effets difficiles.Le résultat montre la figure 1 se produit parce que le div éléments ne "stretch" pas pour contenir les images flottantes en leur sein. Pour regarder la situation sous l'angle inverse, il arrive que les images flottantes "tiennent le coup" comme fond du div éléments

Attention cependant, les navigateurs ne permettent pas de jeter des valeurs arbitrairement grandes sur eux. Ils ont des limites. Dépasser cette limite et les colonnes se développeront à la valeur padding-bottom et vous finirez avec de très longues pages. Heureusement, nous connaissons cette limite (par Safari; le plus conservateur à ce sujet): 32767px. Cela devrait suffire pour la plupart des cas (se sentir si libre d'utiliser une valeur inférieure) et des rendements nous code comme ceci: # Block_1, # block_2, # block_3 { padding-bottom: 32767px; margin-bottom:-32767px; } # Wrapper { overflow: hidden; }

:before et :after, avec valeurs 'compact' et 'run-in'. Guillemets: 'quotes'ou 'content'. Compteurs et numérotage automatiques, avec 'display: none'. Marqueurs et les listes : la propriété 'marker-offset'.Propriétés 'list-style-type', 'list-style-image', 'list-style-position' et 'list-style'.

Ce chapitre 9 et le suivant décrivent le modèle de mise en forme visuel : l'interprétation par un agent utilisateur de l'arbre du document et du rendu de celui-ci par un média visuel

Tutorial : How to create different interesting hover effects on circles with CSS transitions and 3D rotations.Border radius property, we can create circular shapes. Seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

Javascript non-intrusif, chapitre 1 : le grand nettoyage ! Par Christian Heilmann. Cet article est le premier d'une série qui en compte 5.

Comment faites-vous pour que la couleur d'arrière-plan de la colonne de droite s'étende jusqu'en bas de la page ?. Le secret, embarrassant de simplicité, est d'utiliser une image d'arrière-plan qui se répète verticalement pour créer l'illusion de colonnes en couleur

Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie. E

The following is a guest post by Parker Bennett. Parker has written for CSS-Tricks before, in his article Crop Top dealing with the positioning of fluid images. This is a great follow up to that, presenting another option in the never-ending responsive images saga. It's also an interesting contrast to yesterday's post on responsive images - so you can see how very different the approaches to this problem can be.

calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy. But is it useful? I've strained my brain in the past trying to think of obviously useful cases. There definitely are some though.

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.

If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the width and height of the element you're trying to center, but what if they are percentages?