Effets de liens avec le css ~ ou voir peut etre le css XD

Hmhm ce fut en voyant Popoland (un chtit sitouh ^^) et sont pitit n'effet de liens css qui ma donner envie de vous en montrer quelque un que je connais ^^
(ATTENTION certains effets ne marche que sous IE ^^)

Deja la base d'un lien en css ^^ :

Code:

<style>
A:link{color:couleur;text-decoration:none;cursor:none;}
A:visited{color:couleur;text-decoration:none;cursor:none;}
<A:active{color:couleur;text-decoration:none;cursor:none;}
A:hover{color:couleur;text decoration:fade;cursor:none;}
</style>

Voila ! apres on y ajoute les petits effets ^^
A savoir :
Certains IE-teur (traduit du language ribonniens ca donne utilisateur d'internet explorer) mettent <!--A: link{ etc etc --!> au lieu de A:link etc etc, ce qui fait que, <!-- étant pris pour un commentaires, ca ne marchera pas sous firefox =( (et la c'est les firefox teurs qui seront pas content =( )


APRES la base du lien css, voici la base d l'effet de lien CSS !!! XD
J'ai nommer... le lien sourligner au passage de la souris ^^

Code:

<STYLE TYPE="text/css">
A:link{color:#couleur; text-decoration:none;font-weight:normal;}
A:visited{color:#couleur;text-decoration:none;font-weight:normal;}
A:active{color:#couleur;text-decoration:none;font-weight:normal;}
A:hover{color:# couleur;cursor:hand;text-decoration:underline;font-weight:normal;}
</style>

>> TOUS LES LIENS CHANGERONS AU PASSAGE DE LA SOURIS <<

Pour que le liens soivent surligner :

Code:

<STYLE TYPE="text/css">
A:link{color:# COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:overline;font-weight:normal;}-->
</style>

A mon avis vous avez compris comment on fait surligner et souligner ? ^^ je met quand meme :

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:underline overline;font-weight:normal;}
</style>

(ca va jusque la? vous avez pas a apprendre tous par coeur ^^' juste faire votre petit copier coller ici quand vous en avez besoin ^^)

Pour que les liens soivent souligner par des pointillés : *

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none;font-weight:normal;border-bottom:1 dashed #000000;}
</style>

Nous en avons terminer avec notre soulignage ~~

Pour que les liens soivent en majuscule :

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none; text-transform:uppercase;}
</style>

Pour qu'ils soivent en minuscule

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:help;text-decoration:none; text-transform: lowercase;}
</style>

Pour que les liens grossissent :

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none;font-size:20pt;}
</style>

Pour qu'ils ce mettent en gras :

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none;font-weight:bold;}
</style>

--

Pour que les liens soivent ombrés :

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none;filter:dropshadow(color=#couleurdel'ombre,offX=1,offY=1); height:7pt;}
</style>

Pour que les liens ce retournent vers le bas :

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none;font-weight:normal;filter:flipv; height:0;}
</style>

Pour que les liens ce retournent vers la droite :

Code:

<STYLE TYPE="text/css">
<A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:# COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none;font-weight:normal;filter:fliph; height:0;}
</style>

Pour que les liens deviennent flous :

Code:

<STYLE TYPE="text/css">
A:link{color:#COULEUR; text-decoration:none;font-weight:normal;}
A:visited{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:active{color:#COULEUR;text-decoration:none;font-weight:normal;}
A:hover{color:#COULEUR;cursor:hand;text-decoration:none;filter:blur(add="0",direction="180",strength="2"); height:0;}
</style>

J'AI FINIIIIIIIIIII XDDD
*va enchainer l'autre mini tuto*

cooooooooooooooooooooooooooool ùmerci professeur =D
j'attends la suite ça peux etre utile

merci cocotte =p

Tiens ça pourra p'tetre m'être utile pour un de ces jours -quand je m'y mettrai- thx aller la suite :p

Ouf bientot fini xD apres j'enchaine un mini tutos sur les bordures xD

ah bah ça ça me sera utile, bravo pour ça..

Fini ! j'ai fait quelques modifs par ci par la donc il est conseiller de relire ^^

merci ^____________________^

ah bah au moins ça me servira ça^^
*haru, t'as pigé?*

*oui jai piger xD*

*faut qu'on s'en serve pour le site alors*

*ya déjà n effet de lien mais on peuix choiosir un autre*
lequel te plait ^_^?

j'hésite entre surligné et en gras ^_^

jvais els testers =)

ouaiiiiiiiis

je vais mettre surligner plus souligner ça fait bien

d'accord alors
*fonce haru*

jai mis =)

*va voir*
c'est parfait, vla ça le fait.

(et ca marche sous mozilla yosh ^_^)
Pirika, c'est toi qui t'occupe du html ? enfin que sa sois toi ou haru s'est pareil :

Code:

<div style="position: absolute; width: 372px; height: 414px; z-index: 1; left: 16px; top: 305px" id="couche1">

Ce n'est pas la peine de mettre height: 414px ^^

rah non c'est pas moi
(la preuve j'ai pas compris)
eeeeh si ça marche sur firefox ôô

Ribon chan a écrit:

(et ca marche sous mozilla yosh ^_^)
Pirika, c'est toi qui t'occupe du html ? enfin que sa sois toi ou haru s'est pareil :

Code:

<div style="position: absolute; width: 372px; height: 414px; z-index: 1; left: 16px; top: 305px" id="couche1">

Ce n'est pas la peine de mettre height: 414px ^^

je voit pas trop ou c'est, est ce que c'est la ou il y a le menu ou encore le contenu?

*perdue*
moi nan plus°_°

Les deux divs ^^

*_* *les 2 divs*
euh....*air stupide*
chuis pas sûre mais... les divs c'est là ou ya le menu et le contenu?