28172 sujets

CSS et mise en forme, CSS3

Ombrage sur cellule de tableau

Hello All,

Je me casse la tête pour trouver un moyen sans bricolage de créer une ombre en dessous d une cellule d un tableau.

Si possible sans modifier la css de la cellule d'en dessous ...

Voici un exemple de ce que j'ai besoin de faire...
upload/5465-mon-exemple.png

Un pro a t il une idée??

Merci Smiley cligne
Modifié par StormBoy (07 Mar 2011 - 16:28)
bonjour,

je n'ai pas telecharger ton image qui pourrait etre simplement en ligne.

sinon test (en ajoutant les prefixes proprietaires au besoin):
td:hover {box-shadow: 0 2px 4px -2px black;}
Tu peux appliquer la propriété "box-shadow" à une cellule, regarde dans le tuto "les ombrages en CSS3" dans les tuto alsa.

Par contre au niveau compatibilité, c'est pas forcément génial, il faut bidouiller pas mal...

voici un exemple, dit nous si cela te convient


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head> 
	<meta http-equiv="Content-Type" content="text/html; charset="UTF-8"> 
	<title>Test</title> 
	<style type="text/css">

	body
	{
		background-color: #EEEEEE; 
	}
	
	.cell
	{
		border : solid 1px #000000;
		height: 20px;
		width: 80px;
	}
	
	.ombre
	{
    -moz-box-shadow: 8px 8px 12px #777;  
    -webkit-box-shadow: 8px 8px 12px #777;  
    box-shadow: 8px 8px 12px #777;
	}
	


	</style>
</head>

<body>
	

<table cellspacing="0" cellpadding="0">
    <tr>
        <td class="cell">Tests</td>
        <td class="cell">Resultat</td>
        <td class="cell">Resultat</td>
    </tr>
    <tr>
        <td class="cell">Firefox 2.0</td>
        <td class="cell">34778 (50.7 %)</td>
        <td class="cell">Resultat</td>
    </tr>
    <tr>
        <td class="cell ombre">Internet Explorer 6.0</td>
        <td class="cell">15176 (22.1 %)</td>
        <td class="cell">Resultat</td>
    </tr>
    <tr>
        <td class="cell">Internet Explorer 6.0</td>
        <td class="cell">15176 (22.1 %)</td>
        <td class="cell">Resultat</td>
    </tr>    
</table>


</body>

Modifié par mamax (07 Mar 2011 - 16:36)
Il me semble que box-shadow ne donnera pas le rendu souhaité, à savoir une ombre inclinée. Ça doit être possible avec un pseudo-élément :after positionné en absolu + box-shadow + tranform, mais ça commence à être du bricolage pas terrible.

J'opterais donc plutôt pour un élément de décoration positionné en absolu. La difficulté, c'est qu'une cellule de tableau ne peux pas être utilisée comme référent pour positionner en absolu son contenu (ou du moins, ce n'est pas possible dans tous les navigateurs).

Question naïve: c'est un vrai tableau ce truc? Ça n'y ressemble pas.
Modifié par fvsch (07 Mar 2011 - 17:09)
Hello,

Super l'exemple merci!

Bon, on dirait que ca tourne que sous FF et Chrome ( pas sous IE).

Moi ce qui est galere c'est que j'ai besoin de ce genre sous IE surtout ( appli a usage interne avec plein de gens sous IE et meme IE6 Smiley eek )

Je vais regarder quand même les tuto.


Si vous avez d'autres idees n'hésitez pas
StormBoy a écrit :
Moi ce qui est galere c'est que j'ai besoin de ce genre sous IE surtout ( appli a usage interne avec plein de gens sous IE et meme IE6 Smiley eek )

Tu veux faire des effets sexy pour une appli interne qui doit tourner sur IE6?
Ya comme un problème dans le brief là. Smiley lol

Franchement, cet effet dans IE6, faut laisser tomber de suite. C'est pas absolument impossible, mais ça va être très très prise de tête pour un intérêt minime. Grosse perte de temps.
Effets dispensables certes, on peut s'en passer.
Mais si jamais tu veux quand même avoir quelques effets CSS3 sur IE6 ( Smiley lol c'est pas une blague), il existe un script nommé Pie CSS3.
Il gère les box-shadow, les border-radius, etc...
Je m'en sers et j'avoue que c'est pratique quand il s'agit d'utiliser des effets simples en CSS3.
Malheureusement, la propriété transform n'est pas supportée et pour l'ombre penchée, c'est foutu.
Modifié par zatuxa (10 Mar 2011 - 12:18)
StormBoy a écrit :
sur IE8 tu la sens plus jouable ?

Avec des techniques CSS 2.1 (un élément ou pseudo-élément :after de décoration, positonné en absolu, ayant une image de fond en PNG pour dessiner cette ombre), oui. La difficulté sera d'arriver à positionner l'élément de décoration en absolu en bas d'une cellule de tableau, ce qui n'est pas une mince affaire.
Hello StromBoy,
je me suis amusé à te bricoler un p'tit truc (et oui on s'amuse comme on peut) ça devrait t'aider :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.main {
	width:600px;
	height:200px;
	position:relative;
	background-color:#CCC;
}
.block, .block:hover {
	width:200px;
	height: 120px;
	position:absolute;
}
.block.a {left:0;} 
.block.b {left:201px;} 
.block.c {left:402px;} 
.block.d {left:0; top:101px;} 
.block.e {left:201px; top:101px;} 
.block.f {left:402px; top:101px;}

.block {
	background-image: url(bg1.png);
}
.block:hover {
	background-image: url(bg2.png);
	z-index:1;
}
-->
</style>
</head>

<body>
<div class="main">
<!--ligne 1-->
<div class="block a"></div>
<div class="block b"></div>
<div class="block c"></div>
<!--ligne 2-->
<div class="block d"></div>
<div class="block e"></div>
<div class="block f"></div>
</div>
</body>
</html>


j'ai testé sous chrome et ff ça fonctionne bien, mais :hover sur la class ne fonctionnera pas sur des vieux navigateur mais a toi de faire des blocs avec des <a> par exemple
Hello merci pour votre aide, j'ai abandonné sous ie6, mais je m'attaque les autres navig. Je vous ferai part du résultat obtenu si ca peut aider quelqu'un.
fvsch a écrit :


Question naïve: c'est un vrai tableau ce truc? Ça n'y ressemble pas.


Oui fvsch, c'est 1 vrai tableau au sens <table> du terme Smiley smile . Donc les div à la place c'est pas top. Mais les positions absolues sur les td ca m'a l'air chaud. J'essaye...
Sujet clos
Aller à