Aller au contenu | Aller à la recherche | Navigation  

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

Calendrier

« décembre 2007
lunmarmerjeuvensamdim
12
3456789
10111213141516
17181920212223
24252627282930
31

Par |ben|, dimanche 19 mars 2006 à 17:55 :: XHTML & CSS

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/

>> aucun commentaire :: aucun trackback

Par |ben|, dimanche 19 mars 2006 à 17:37 :: XHTML & CSS

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/

>> aucun commentaire :: aucun trackback

Par |ben|, dimanche 19 mars 2006 à 17:07 :: Web Développement

Lire la suite via l'extension (expand, collapse) d'un bloc (div)

, , , , , , ,

Pour n'afficher qu'un résumer dans un premier temps, puis l'internaute est intéressé il clic pour lire la suite.

Vestibulum diam tellus

Vestibulum diam tellus, rhoncus sit amet, molestie vitae, tempor ac, metus. Quisque tincidunt sem eget leo. Nam arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam magna. In vestibulum. Vivamus ut diam. Proin non purus nec eros consectetuer pharetra.

more » Vestibulum dapibus justo sed magna. In at nisl. Maecenas enim metus, interdum id, lacinia ac, aliquam a, odio. Mauris euismod ante. In hendrerit. Nunc eget eros. Etiam magna nibh, pellentesque pretium, dictum id, consectetuer nec, enim. Phasellus lacinia adipiscing est. Nunc rutrum libero et velit. Vivamus rhoncus. Quisque turpis. Nullam fringilla risus sed nisl.

Donec faucibus mauris

Donec faucibus mauris quis turpis. Integer ac nulla. Etiam suscipit. Mauris lectus. Curabitur pharetra, sapien ut dictum pretium, nibh odio ullamcorper mauris, ac dignissim ligula urna at augue. In ipsum nibh, rhoncus blandit, sollicitudin a, interdum quis, tellus.

more » Aenean nunc odio, bibendum at, pellentesque in, feugiat mollis, purus. Pellentesque ut dolor sit amet tellus viverra tincidunt. Etiam sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur nec purus. Vestibulum quis elit vehicula ligula molestie tincidunt. Cras mi nunc, ornare fringilla, vestibulum at, dapibus ut, enim. Fusce ante tellus, ornare a, eleifend a, faucibus vitae, felis. Vestibulum pretium, leo sed dignissim porttitor, lorem massa tempus felis, at suscipit eros urna eu risus.

* BUG avec Opera

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

>> aucun commentaire :: aucun trackback

Par |ben|, dimanche 19 mars 2006 à 16:21 :: XHTML & CSS

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/

>> aucun commentaire :: aucun trackback

Par |ben|, dimanche 19 mars 2006 à 16:05 :: XHTML & CSS

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/

>> aucun commentaire :: aucun trackback