28173 sujets

CSS et mise en forme, CSS3

[Résolu] Comment faire cette effet ?!

Bonjour

j'aimerai reproduire cette effet http://www.ferryhalim.com/orisinal/
j'ai chercher de mon coter ajax, javascript, css ...

je suis arriver a ce résultat http://psikiatre.free.fr/test/ mais rien de très concluent [ j'ai bien l'ombrage et l'effet de déplacement mais vue que je débute j'arrive pas associer les deux effets ] J'aimerai pouvoir associer ces deux effets [ mais peut être qu'il y a une autre solution avec un autre langage ?! autre que le flash !!]

pouvez vous me venir en aide s'il vous plait

Merci d'avance


ps: j'espère poster dans la bonne section
Modifié par tiki (06 Jun 2007 - 21:41)
Salut,

1. Faire un click droit sur l'une des images

2. Prendre note qu'il s'agit de flash

3. Penser à autre chose... Ou bien se mettre au flash, évidemment.
Salut,

Si on décompose l'effet c'est :
- déplacement de l'image de quelques pixels vers le haut et vers la gauche.
- modification du niveau d'alpha sur l'image (je crois, là je suis pas expert)
- apparition de l'ombre de la même manière (variation de l'alpha)

Ca ne me parait pas irréalisable en javascript, vu ce que font certaines bibliothèques, mais il faut certainement y travailler un petit peu.
Modifié par marcv (06 Jun 2007 - 00:30)
Salut,

Sans JS, un peu de css pour le fun
<style type="text/css">

#conteneur{
width: 300px;
height: 300px;
border: 1px solid black;
margin: auto;
}

a{
display: block;
margin: 100px auto;
width: 50px;
height: 50px;
position: relative;
}

a span{
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
background: #000;
}

a em{
display: block;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
background: pink;
}

a:hover em{
top: -5px;
left: -5px;
background: red;
}

a:hover{/* --------- pour IE ---------*/
background: none;
}
</style>
</head>
<body>
   <div id="conteneur">
   <a href="#"><span></span><em></em></a>
 </div>   
</body>
Sympa ton exemple ghost Smiley smile J'ai essayé de voir si on pouvait se passer de ton span et de ton em, et j'arrive à ça :
<style type="text/css">
    ul {
        width:150px;
        height:50px;
        padding:20px 0 10px 30px;
        border:1px solid black;
        list-style:none;
    }
    img {
        border:none;
    }
    li {
        width:30px;
        height:30px;
        float:left;
        margin-right:10px;
        background-color:#555;
    }
    li a {
        display:block;
        width:20px;
        height:20px;
        padding:5px;
        background-color:white;
        border:1px solid #ccc;
    }
    li a:hover {
        position:relative;
        left:-4px;
        top:-4px;
    }
</style>
</head>

<body>
    <ul>
        <li><a href="#"><img src="http://www.alsacreations.fr/design/font-big.gif" alt="image1"></a></li>
        <li><a href="#"><img src="http://www.alsacreations.fr/design/font-big.gif" alt="image2"></a></li>
        <li><a href="#"><img src="http://www.alsacreations.fr/design/font-big.gif" alt="image3"></a></li>
    </ul>
</body>

Ça me crée quand même un petit problème lors du survol de l'ombre...

A+
Modifié par marcv (06 Jun 2007 - 10:42)
hier soir avant de me coucher j'ai regarder ce que ghost ma proposer [Merci beaucoup] ce qui donne http://psikiatre.free.fr/test/ Je trouve ça un peut bordélique ... [ y a t-il possibilité de faire plus simple ?! ] ....

Je sais qu'en javascript il existe des script d'opacité progressive, je sais aussi qu'il est possible de jouer avec l'opacité avec le css, mais en revanche je ne sais pas si on peut faire l'effet d'opacité progressive avec le css.... !? [ merci de votre réponse ]

marcv Merci beaucoup pour ton code ... je regarde ça un peut plus tard ...

Merci beaucoup a vous, d'avoir pris du temps pour moi ....
Si tu veux copier exactement l'effet en flash, il te faut du progressif dans le réglage de l'opacité, mais également dans le mouvement de l'image vers le haut-gauche. Deux choses que CSS ne sait pas faire. Direction Javascript Smiley smile .
Salut,

Opacity progressive en css c'est possible mais c'est une "usine à gaz" et ça rend à peut près bien pour de grandes voir de très grandes images, sinon il reste JS ou mieux (ben oui!!) flash, sinon ton bout de test n'est pas trop moche Smiley cligne
marcv a écrit :
Si tu veux copier exactement l'effet en flash, il te faut du progressif dans le réglage de l'opacité, mais également dans le mouvement de l'image vers le haut-gauche. Deux choses que CSS ne sait pas faire. Direction Javascript Smiley smile .


Hi c'est vrais que c'est pas exactement comme sur le lien d'explemple, mais bon ^^ je vais aller faire un tout dans le javascript .... merci de ta réponse


ghost a écrit :
Salut,

Opacity progressive en css c'est possible mais c'est une "usine à gaz" et ça rend à peut près bien pour de grandes voir de très grandes images, sinon il reste JS ou mieux (ben oui!!) flash, sinon ton bout de test n'est pas trop moche Smiley cligne


j'appliquerai un javascript pour l'opacité ... Merci encore a toi

je pense que le sujet est régler .... Merci encore a vous tous ... *

tiki
Sujet clos
Aller à