Aller au contenu | Aller à la recherche | Navigation  

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

Calendrier

« mai 2007
lunmarmerjeuvensamdim
123456
78910111213
14151617181920
21222324252627
28293031

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/

Mise en page du début d'un article du type de la presse papier

Pour faire tout simplement un effet de la presse papier (première lettre d'un article en grosse majuscule :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis vestibulum, sem ac ultrices molestie, nunc nulla sollicitudin metus, vel viverra velit ipsum ut justo. Sed ut nisl. Proin eu est. Cras pulvinar, mauris id condimentum porta, augue orci tempus purus, id dignissim turpis sem et massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras in mi eget nunc consequat euismod. Donec suscipit quam in diam.

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

Animation en CSS - Flick Animations with CSS

Vous avez un objet 3D a montrer sous toutes ces coutures? vous voulez donner a l'internaute la possibilité de choisir son point de vue? Vous ne voulez pas faire un "vulgaire gif animé"! Voici une solution simple en full CSS.
Baladez votre souris de gauche a droite sur la photo ci dessous pour voir le rendu possible.

frame 1 frame 2 frame 3 frame 4 frame 5 frame 6 frame 7 frame 8

Lire la suite

TypeTester - Comparer les affichages écran de Polices (typo - fonts)


http://typetester.maratz.com/

< 1 2 3 >