Encore du CSS ?!

[Neiko Seiteki]

Bonjour. (:

Alors j'ai quelque petit problème... ( Eh oui encore. ) en faite, je cherche à reproduire un effet que j'ai vus sur un forum, ou plutôt 2 effets, pas reproduire à l'identique non plus, mais faire quelque chose de, ressemblant, avoir la technique.

Voici les effets que j'aimerais reproduire.

effet 1 : http://moe.mabul.org/up/moe/2010/06/22/img-025435l74xe.png ; http://moe.mabul.org/up/moe/2010/06/22/img-025513x3wjq.png

effet 2 : http://moe.mabul.org/up/moe/2010/06/22/img-025934xhofj.png ; http://moe.mabul.org/up/moe/2010/06/22/img-025950m54ob.png


C'est les deux effets que je trouve jolie. Est-ce encore une modification des templates ? Quelqu'un pourrais m'en apprendre d'avantage ? :$ Merci beaucoup. ^^

[Somewhere]

Coucou

Alors non, pas besoin de toucher aux templates, tout se passe dans le css ^^

Pour le premier effet, c'est juste un fond en couleur avec un border-left et un border-right solid et un border-top et un border-bottom dotted (sans oublier le -moz-border-radius pour donner le côté arrondi)

Code:

.cadre
{
color: #000000;
border-top-style: dotted;
border-bottom-style: dotted;
border-left-style: solid;
border-left-style: solid;
border: 1px #ffffff;
-moz-border-radius: 15px 15px 15px 15px;
}

Ce qui te donnera ça :

Code:

<div class="cadre">Blabla</div>

Pour le deuxième il faut juste une opacité plus faible quand l'image est non survolée et la mettre normale qd tu la survoles. Ca te donnerait un truc comme ceci dans ton CSS :

Code:

opacity {
border: none;
opacity: 0.8;
background-color: transparent;
}

opacity:hover{
border: none;
opacity: 1;
background-color: transparent;
}

Et tu appelles ça comme ça : (exemple de code à mettre sur ta page d'accueil par exemple ^^)

Code:

<opacity><img src="http://a.deviantart.net/avatars/s/o/some-where.png?1"></opacity>

Somewhere

[Neiko Seiteki]

Merci beaucoup beaucoup beaucoup ! ♥♥♥


Sujet résolut ! Encore merci, somewhere... :$♥