28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'avais cru comprendre que la fonction calc() permettait de calculer à peu près tout dans la mesure où le résultat était compatible avec la propriété dont on calculait la valeur. Il me semble même avoir vu citer "color" comme calculable.
Voulant colorier des cases d'un tableau avec une couleur de ligne, chaque case consécutive de gauche à droite ayant une nuance de cette teinte (par exemple :Jaune pur, Jaune plus clair, Jaune très clair), j'avais imaginé de faire varier le "background-color" d'origine en me servant de calc() pour modifier la valeur. Ça ne marche pas : ni Firefox, ni Chrome, ni IE11 ne reconnaissent une instruction du type
background-color: calc(#ffff00 + #000188); (ni même :calc(#ffff00); ).
Questions:
1/ est-ce normal, et pourquoi?
2/ Y a-t-il un moyen simple de réaliser ce que je veux faire sans définir chaque nuance individuellement (ni recourir au JS où je suis ignare!).
Merci à la bonne âme qui voudra bien m'expliquer !
Amicalement
André
Modérateur
Salut salut,

Et non, pas de calc avec des codes hexa https://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html

Tu cherche a faire un dégradé dynamique ? C'est a dire qui s'adapte au nombre d'élément eput importe combien il y en a ? Je vois plusieurs solutions :

- Tu sais que tu aura un nombre X de résultat max : dans ton css tu déclare les X classes avec les X dégradés en dur. Et si t'as la flemme tu peux juste mettre ta premiere couleur en rgba jouer avec la derniere variable rgba(255,0,0,0.1) rgba(255,0,0,0.2) rgba(255,0,0,0.3 ... etc) https://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

- Tu utilises un préprocesseur avec SASS pour pouvoir faire des boucles sympa et jouer avec les couleurs mais bon c'est une grosse étape si déjà tu veux éviter le Js.... https://www.alsacreations.com/article/lire/1717-les-preprocesseurs-css-c-est-sensass.html (par contre c'est vraiment cool si tu le mets tu pourra profiter d'énormes améliorations https://www.alsacreations.com/tuto/lire/1685-ebauche-de-workflow-gulp-taches-uncss-includes-critical-css.html )

- Le Js Smiley ohwell


Voila en gros...
Merci, Laurent, de cette réponse rapide et documentée qui correspond en effet à mon attente. Je vais donc déjà essayer la solution "flemmarde" qui me semble effectivement à ma portée sans trop d'efforts.
Ensuite je vais me replonger dans les tutos indiqués, j'y trouverai à coup sûr et des explications et des idées.
Et si je me sens du courage de reste, je vais jeter un coup d'œil aux préprocesseurs devant qui j'ai toujours reculé jusqu'ici sous le double prétexte que cela allait me demander un gros effort d'adaptation et que ce n'était pas forcément nécessaire pour un amateur dont le plus gros projet est une présentation un peu sympa de sa "chronique familiale".
En ce qui concerne le JS, , je refuse encore l'obstacle comme on dit au concours hippique !
Merci en tout cas.

Amicalement
André
Bien ! La solution "flemme" marche bien. Mais bien sûr ça n'est sans doute pas aussi élégant qu'une solution avec boucle en partant d'un pré-processeur.
Merci encore à Laurent.
Amicalement.
André
Modérateur
Avec plaisir !


C'est un solution comme une autre hein il ne faut pas spécialement la dénigrer Smiley cligne

Les préprocesseurs ça m'a changé la vie mais on a pas les même problématiques !

Ça peut rester un nouveau truc a apprendre (c'est cool d’apprendre des nouveau trucs) mais si derrière ça ne sert pas plus que ça... ça ne vaut peut être pas le coup Smiley smile


Bonne continuation !