background preloader


Facebook Twitter

Persistent Headers. This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content.

Persistent Headers

Then go away when you've scrolled past that relevant section. Couple things to know before we get started: There are many like it, but this one is mine.This doesn't work (yet) on mobile (at least mobile Safari that I looked at). Because I don't know that much about JavaScript on mobile and how to detect scroll events and scroll position and stuff. For the sake of demo purposes, we'll identify areas we wish to apply persistent headers to via a class name "persist-area" and the header within we indent to be persistent with "persist-header".

jQuery JavaScript This is the plain English of what we are going to do: Loop through each persistent area and clone the header. The whole kit and kaboodle: The only CSS we're directly changing with JavaScript is the visibility of the persistent header. And so... Use as you will. View Demo Download Files Share On. The “inherit” Value for CSS Properties.

In CSS, there are some properties that are naturally inherited from parent to child.

The “inherit” Value for CSS Properties

This is useful because it prevents needing to define that same property for all children. Full Browser Width Bars. Block level elements are naturally as wide as their parent element. So let's say you put an <h2>in your <body> (and you've used reset CSS so there is no padding on the body) that <h2>is automatically the full width of the browser window.

It doesn't need any help. But it's pretty rare (and stupid) these days to set text at the full browser window width (for desktop/laptop size screens). It's just too wide, the line length is too long to be readable. It's reasonable that we would want an element to stretch the full width of the browser window, for aesthetic reasons, but limit the text inside to a readable width. One way to accomplish that is to have inner wrappers for the headers, like: <h2><div>Header</div><h2><p>... text ... That way the <h2>could be left to be full-width, but the <div> could be used to limit the width to the same width as the <p>'s. But you know what that is: Nonsemantic!!!! With pseudo elements, we can! Convertir une image en CSS. Convertir une image en CSS Si vous pratiquez l'envoi de newsletters dans lesquelles vous avez mis des images, vous avez peut être remarqué que la plupart des webmails et clients mails bloquaient les images.

Convertir une image en CSS

Gmail, Yahoo! , Hotmail, c'est toujours à vous d'autoriser l'affichage des images dans les emails. Et pourtant il existe un moyen de les afficher quand même malgré ce blocage. Create CSS Sprite Images Easily with Sprite Cow. CSS Lint. Sélecteur CSS de frère adjacent (Dirty Grids Done Dirt Cheap) Astuce CSS3 et RGBA avec les outils de développement de Google Chrome. CSS Reset – All the most common CSS Resets in one place with one-click copy/paste, documentation and tutorials.

Timelines CSS - 7 astuces. Présenter une histoire, une succession d’événements, bref toute une vie et pourquoi pas une navigation, telle est la raison d’être d’une timeline.

Timelines CSS - 7 astuces

Découvrez 7 astuces pour réaliser la votre en CSS. Une timeline en CSS permet de se dispenser d’une image, difficilement évolutive dans un site web dynamique. En débutant avec le CSS, il n’est pas toujours aisé de « coder » sa propre timeline. Quelles balises HTML utiliser ? CSS Tools: Reset CSS. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

CSS Tools: Reset CSS

The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example.

I don't particularly recommend that you just use this in its unaltered state in your own projects. In other words, this is a starting point, not a self-contained black box of no-touchiness. If you want to use my reset styles, then feel free! Previous Versions v1.0 (200802) Acknowledgments Thanks to Paul Chaplin for the blockquote / q rules. 10 techniques avancées et secrets de CSS2 - Alsacréations. 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.

10 techniques avancées et secrets de CSS2 - Alsacréations

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.