Aller au contenu | Aller à la recherche | Navigation  

CSS, XHTML, Standards du web, Tutoriaux, Techniques Web, Astuces. Eniris : Post-it™ on line

Calendrier

« mars 2006 »
lunmarmerjeuvensamdim
12345
6789101112
13141516171819
20212223242526
2728293031

CSS optimizer

Voici quelques liens pour vous permettre de formatter et optimizer voc CSS :

Spiffy corners (coins arrondis)

créer des coins arrondis (avec Anti-Aliasing), sans images, sans javascript, mais seulement avec du CSS

Le resultat est bleufant :

 

Exemple Eniris

 


Attention si vous désirez mettre des balises "p" il vous faudra mettre le "margin:0" sinon le résultat sera le suivant :

Ici le texte est contenu dans un paragraphe ("p") sans paramettrage de la marge (margin) à "0"

Dégradé haut et bas sur un bloc (div) avec scroll-bare

Pour créer une illusion de fondu sur un texte dans un bloc (div) avec ascenceur

Lorem lipsum

Integer augue orci, egestas in, mollis at, cursus et, mauris. Maecenas dictum nunc vel nulla. Vivamus nisi diam, imperdiet a, venenatis eu, aliquet nec, libero. Sed dapibus quam et nibh. Nulla a nunc. Vestibulum cursus pede non mi. Nunc aliquam felis et massa. Fusce malesuada, diam vitae scelerisque feugiat, quam massa imperdiet ipsum, elementum laoreet odio tellus vitae lectus. Nulla dapibus tortor scelerisque tellus. Nullam leo sapien, fermentum sit amet, aliquet vel, laoreet eget, enim. Vestibulum dapibus libero sed lacus. Ut mattis euismod sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec lacinia. Cras pharetra tincidunt sapien.

source : CSS Playground - http://www.cssplay.co.uk/

NICHOLLS ACTIVE/FOCUS IMAGE REPLACEMENT NAF-IR

IMAGE 1

Technique classique de remplacement d'image de Phark avec l'erreur pointillées s'affichant dans Firefox

DotClear

IMAGE 2

Technique révisée pour supprimer le bug de pointillées...

DotClear

source : CSS Playground - http://www.cssplay.co.uk/

CSS images maps

Pour mettre en évidence une zone d'une image et/ou pour mettre un lien dans une zone définie.
C'est une alternative CSS + Xhtml, à la balise html :

<map name="Map" id="Map">
<area shape="rect" coords="x,x,x,x" href="#" alt="title" />
</map>

MAP 1

Snow white and the seven dwarfs
Snow White
Sleepy
Happy
Doc
Dopey
Grumpy
Bashful
Sneezy

BUG avec Opera

MAP 2

A Group of People
Nancy
Betty
Andy
Mike
Phil
Bob
Jill
Tom

BUG avec Opera

MAP 3
Colours of the Rainbow

COLOURS
OF THE
RAINBOW
Red
Orange
Yellow
Green
Blue
Indigo
Violet

source : CSS Playground - http://www.cssplay.co.uk/

1 2 >