28172 sujets

CSS et mise en forme, CSS3

Plus sombre...

Bonjour,

J'ai soudainement une question...
Est-ce qu'il existe une règle CSS pour "plus sombre" ?

Je m'explique, j'ai un élement avec une couleur de texte et de fond.
Et j'aimerai écrire une règle pour que l'élément soit plus sombre que la couleur initiale, mais sans avoir à définir explicitement le couleur sombre.

L'idée est d'avoir des élément vert, bleu, jaune et de les transformer en vert foncé, bleu foncé et jaune foncé.

Voilà, c'était l'interrogation du jour Smiley cligne


Bonne journée

A+ / F.

PS : Il me semble avoir lu un truc à ce sujet, mais je ne me souviens plus du tout de ce qu c'était... Smiley decu
Salut,

C'est une question super intéressent, personnellement j'aurai mis un div qui aurait englober le div qui doit être plus sombre et je lui aurais mis une couleur noir et j'aurai jouer sur l'opacity au hover.

Mais bon ça nécessite d'ajouter une balise. Mais si il y a une méthode pour le faire directement sur un div je serai bien curieux de la connaitre ^^ (à par en JS)
Modérateur
En css3 il sera possible de faire quelques calculs, mais pour ce qui est des couleurs...

http://www.w3.org/TR/css3-values/

en bon vieux css2 je dirais que rajouter un png noir partiellement opaque en background image devrait faire plus ou moins l'affaire. Sinon un codage lourd côté serveur?
C'est pas idiot comme idée.

On pourrait utiliser un background multiple et jouer sur la transparence...
Tiens je vais essayer ça !

A+ / F.

Gili a écrit :
Salut,

C'est une question super intéressent, personnellement j'aurai mis un div qui aurait englober le div qui doit être plus sombre et je lui aurais mis une couleur noir et j'aurai jouer sur l'opacity au hover.

Mais bon ça nécessite d'ajouter une balise. Mais si il y a une méthode pour le faire directement sur un div je serai bien curieux de la connaitre ^^ (à par en JS)
C'est possible, mais malheureusement il faut utiliser LESS (ou autre)


darken(@color, 10%);


Ca fait un truc dans le genre

lesscss.org/
Modifié par Fabious (30 Mar 2012 - 19:42)
Kaelig a écrit :
Et avec rgba(0,0,0,.5) ?


C'est quand même un peu l'idée de Gili mais avec une écriture différente. Smiley langue
Re,

Bon, après quelques recherche, je n'ai rien trouvé qui me satisfasse.

On peut facilement jouer sur l'opacité. Mais on agit sur le texte et le fond...
Ensuite, selon la couleur derrière, ce sera plus clair ou plus foncé ou pas...

J'ai cherché ensuite du coté des background multiple.
Et là, je n'ai pas réussi à modifier le 2ième background (sans toucher au premier).

En dernier lieu, j'ai essayé d'adresser en CSS à l'élément qui a 2 classes (rouge ET sombre). Et là aussi, j'ai fait choux blanc...


On arrive à s'en tirer si l'on utilise du code HTML généré (PHP), en définissant la classe de l'élément en fonction du code (rouge / rougesombre).


Bref, je suis preneur de vos idées...

Bonne journée

A+ / F.
bonsoir,

en reprenant l'idée de 'GILI' d'une couleur sombre (ou claire), mais definie en rgba(x,x,x,0.x) et au dessus de ta couleur a modifié tu peut bricolé quelque chose d'approximatif et limité.

Voici un petit test a mettre dans une page:
	<div id="center">
		<p>TEST </p>
		<div class="bleu">bleu</div>
		<div class="jaune">jaune</div>
		<div class="rouge">rouge</div>
		<div class="noire">noire</div>
	</div>


et le CSS pour tester l'effet d'opacité en rgba.

/* LAYOUT */
div#center {
display:table;
margin:auto;
text-align:center;
background:#abc;
}
div#center div , div#center div:before, div#center div:after , div#center p{
padding:2px;
height:60px;
width:60px;
border:ridge black;
display:table-cell;
vertical-align:middle;
line-height:1.6em;
}
/* COULEURS */
.bleu {background:#54609E;}
.jaune {background:#FFFF00;}
.rouge {background:#B1240A;}
.noire {background:#333;color:white;}

/* TEST visuels pour modif avec rgba */
div div:before {content:attr(class)' clair';box-shadow:inset 0 0 9999px rgba(255,255,255,0.4);color:black; }
div div:after{content:attr(class)' fonçé'; box-shadow:inset 0 0 9999px rgba(0,0,0,0.4);color:white;}


J'ai choisi d'utiliser une ombre interne démesurée et de la génération de contenu pour rendre ce test un peu plus intéressant, le résultat étant peu convaincant mais peut-être suffisant pour ce que tu recherches.

Cordialement,
GC
Sujet clos
Aller à