background preloader


Facebook Twitter

25 techniques CSS pour ne pas avoir à réinventer la roue (partie 1) Dynamic Page / Replacing Content. By Chris Coyier On This article is an update to this old article, which had an ugly demo and a variety of techniques in it no longer probably considered good practices.

Dynamic Page / Replacing Content

This new demo is much cleaner, up to date, and fuller featured. Because the old article was a bit of a different scope, I'll leave it alone, just refer to this one. Update January 2013: There are better practices now, detailed here. Let's say you wanted to make a website where clicking buttons in the nav would dynamically load some content. View Demo Download Files. Downloads. 100+ Massive CSS Layout Toolbox. In this article you will get access to one of the largest collections ever of CSS Tools, Tutorials, Cheat Sheets etc.

100+ Massive CSS Layout Toolbox

It builds on previous CSS posts in tripwire magazine with the purpose of creating a one stop fit all CSS resource. Several new resources have been added. Please comment if you know a great CSS resource that didn’t make it on the list and I will add it ASAP. Advertisement Index.

Css menus

3D Ribbon Generator - +++CSS3 Minimalistic Navigation Menu. Martin Angelov As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page.

+++CSS3 Minimalistic Navigation Menu

What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari). But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique.

So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers. The XHTML The menu is organized as an unordered list.

CSS3_txt effects

Tips to Write Better CSS Code. CSS is a language that is not difficult to master, but if you use it for a large project, it can be very difficult to manage if you do not follow a defined approach while writing CSS code. Here are few tips that will help you write better and easy to manage CSS code. 1. Don’t Use Global Reset Using global reset to remove default margin and padding from all HTML elements is a strict no-no. Not only it is slow and inefficient way but you’ll have to define margin and padding for each element that needs it.

Définition css white-space (feuille de style css) et compatiblité navigateurs. [CSS] Enlever les pointillés des liens - Guillaume Bizet. Coins arrondis en CSS avec une image coulissante et des div. Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques.

Coins arrondis en CSS avec une image coulissante et des div

Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide. Les trois méthodes courantes pour créer des coins arrondis sont : La propriété CSS 3 border-radius ;La technique positionnant 4 images de coins à l'aide de 4 div imbriqués ;La technique de l'image coulissante en hauteur. Chacune de ces méthodes a ses avantages et ses inconvénients.

Cette 4ème méthode, utilisant une seule image adaptable en hauteur et en largeur pour un design fluide, s'inspire des deux dernières pré-citées. Créer des menus simples en CSS. Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style.

Créer des menus simples en CSS

Sommaire. 40 + Générateurs de CSS. De temps en temps on vous parle de générateur de css.

40 + Générateurs de CSS

Pour alléger un site, optimiser son code ou créer quelques éléments graphiques, les générateurs ne manquent pas. Css 3.0 Generateur. RGBA colors. Home / CSS3 Previews / RGBA colors CSS3 has added a new feature to color setting.

RGBA colors

Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha. A brief introduction to Opacity and RGBA. The Opacity declaration sets how opaque an element is.

A brief introduction to Opacity and RGBA

An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent. Webkit, Gecko and Opera browsers all support Opacity. The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value. This is supported in Webkit and the first alpha of Firefox 3. The key difference between the two declarations is this: Opacity sets the opacity value for an element and all of its children; RGBA sets the opacity value only for a single declaration.

Here’s an example. background-color: rgb(0,0,255); opacity: 0.5; The background color of the second div has been set to blue, and the opacity set to half. Background-color: rgba(0,0,255,0.5); The background color has been set to blue, and the opacity set to half. Elegant Dark CSS3 Menu Template. Elegant Dark CSS3 Menu Template For troubleshooting, feature requests, and general help, contact Customer Support at .

Elegant Dark CSS3 Menu Template

Make sure to include details on your browser, operating system, CSS3 Menu version, link to your page. E-mail: Nouveau tutoriel: Maîtriser le positionnement CSS dans toutes les situations. Les flottants font de la magie ! probleme de float avec internet explorer. Containing Floats (Complex Spiral Consulting) As powerful and useful as they are, floats can make for tricky layout tools.

Containing Floats (Complex Spiral Consulting)

Chances are that you may have seen something like the situation shown in Figure 1, which is accomplished with just two div elements, each with a floated image inside it. CSS Float Theory: Things You Should Know - Smashing Magazine. Min-height sur Internet Explorer. HasLayout et bugs de rendu dans Internet Explorer 6-7. Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Attribut target et standards du W3C.

Fonction de l'attribut target L'attribut target a été introduit en HTML 4. C'est un attribut de l'élément a (hyperlien) permettant de désigner le cadre dans lequel la ressource spécifiée par l'hyperlien doit s'ouvrir. Il est possible de désigner le cadre cible par son nom, ou par l'un des quatre termes réservés: _blank, _self, _parent, _top. "target=_blank" n'est pas valide en doctype strict. Que faire  ? L'attribut target est une façon d'imposer une navigation aux visiteurs. Elle n'est pas acceptée par le W3C dans les versions strictes de HTML et XHTML. Elle fait par contre son retour dans HTML5 pour l'élément a car très utile en combinaison avec les <iframe> et les applications web. Plusieurs solutions Utiliser un équivalent en JavaScript (mais l'esprit reste le même, cela force le comportement de l'utilisateur) : onclick="; return false;" Choisir, comme le recommande le W3C dans ce cas, un doctype transitionnel.