28172 sujets

CSS et mise en forme, CSS3

Comment faire une boite etirable ombree avec des coins arrondis

Bonjour a tous,


Voici l'exemple ici :

http://www.francois-rosenbaum.com/boite_ombree_arrondie_etirable/exemple.html

J'ai des boites aux coins arrondis et qui doivent pouvoir s'etirer en largeur.
J'obtiens l'etirement de mes boites grace a jquery.
Jquery demande a div#boutoncoulissant d'augementer sa largeur et change sa position.
Autour de ces boites il y a une ombre, transparente.

Voila le code html de mes boites :


                <div id="boutoncoulissant_famille">                     
                    <div class="cotegauche_boutoncoulissant"></div>
                    <div class="milieu_boutoncoulissant"></div>
                    <div class="cotedroit_boutoncoulissant"></div>
               </div>


Et voila le css :


div#boutoncoulissant
{
position:absolute;
height:221px;
width:134px;
}

div.cotegauche_boutoncoulissant{
float:left;
height:220px;
width:10px;
background: url(ici lien vers mon image PNG de cote gauche avec coin arrondi );
}

div.milieu_boutoncoulissant{
float:left;
height:220px;
width:117px;
overflow:hidden;
}

div.cotedroit_boutoncoulissant{
float:right;
height:220px;
width:7px;
background: url(ici lien vers mon image PNG de cote droit avec coin arrondi );
}


Je n'ai aucun mal a faire ca sans les ombres.
si je met un fond en png div#boutoncoulissant, celui ci passe sous les ombres transparentes des cotes et ca ne va pas.

Dans mon exemple la premiere boite a ses cotes en png, vous pouvez donc constater cela.


Je ne trouve pas, je suis bloque.
J'espere trouver de l'aide ici.
Merci
Modifié par boucdur00000 (07 Jan 2010 - 17:39)
Oui oui l'ombre est integree a mes png de base. Mes background cote droit et gauche sont en png justement car les ombres sont integrees.
Ca se voit uniquement sur le premier des boutons coulissants.

Sur les autres effectivement ce n'est encore que du jpg sans transparence.
Ca permet de voir que c est pas beau sans transparence.


Je reste a l'affut d'une solution.
Modifié par boucdur00000 (07 Jan 2010 - 18:22)
Bonjour,

La solution la plus simple est la suivante:
#maboite {
  border-radius: 10px;
  box-shadow: 5px 5px 10px black;
  background: white;
}

Il faudra alors ajouter, en plus de border-radius et box-shadow, les propriétés expérimentales des navigateurs: -moz-box-shadow, -webkit-border-radius, etc.

Problème:
1. Aucun support dans IE 6-8.
2. Pas de support de box-shadow dans Firefox 3.0 (ok 3.5+).

La solution compliquée consiste à bidouiller des trucs pas mal complexes avec des images de fond. Si tu as une dimension fixe en pixels (hauteur ou largeur), ça devient plus gérable, tu vas te retrouver avec 3-4 éléments imbriqués ou DIV ou SPAN vides seulement. Si tu n'as pas de dimension fixe, ben là c'est la merde.

Hop, descriptif en détail du genre de bidouille que ça peut demander: http://covertprestige.info/css/boites-fluides/
OK, en fait tu as déjà une solution de cadre à coins arrondis.

Pour le problème qui te préoccupe:
boucdur00000 a écrit :
si je met un fond en png div#boutoncoulissant, celui ci passe sous les ombres transparentes des cotes et ca ne va pas.

Eh bien il faut éviter que cette image ne soit au dessus d'une autre image qui se verrait par dessous. Pour cela, une solution peut être de placer tes bords gauche et droite en dehors de leur parent. Mais ça va pas se faire en deux lignes de CSS car le positionnement de tes éléments n'est pas pensé pour ça, pas plus que ton script JS.
Modifié par Florent V. (07 Jan 2010 - 19:57)
Ok merci Florent.
Oui en fait mon cas est particulier car tout est mobile.
J'ai donc du mal a m'appuyer sur des elements positionnes en relative qui aident par la suite pour plein de choses compliquee de css.

Finalement je crois m'en etre sorti en positionnant les cotes droit et gauche en absolute.
Ca m'a demande une journee entiere de bidouilles et essais css.
Le css c'est vraiment l'enfer meme apres des annees de pratique quotidienne.

C'est bien border radius mais le css3 c'est pour dans longtemps encore malheureusement.

En tout cas encore merci pour ton aide.
boucdur00000 a écrit :
C'est bien border radius mais le css3 c'est pour dans longtemps encore malheureusement.

Bah non. IE9 sera le dernier navigateur à implémenter border-radius.
De plus, dire «le CSS3 c'est pour dans longtemps» c'est ne pas comprendre du tout comment fonctionne CSS3. Certaines parties de CSS3 sont implémentées dans tous les navigateurs du marché (à partir de IE7 pour Internet Explorer et les sélecteurs CSS3).

Une lecture sympa à ce sujet: You’re living in a fantasy world par Andy Clarke. Les commentaires ne sont pas inintéressants.
Sujet clos
Aller à