inline kleur instellen voor before en after
Ik heb onderstaande code. nu wil ik via de inline styling de kleur steeds kunnen aanpassen voor het desbetreffende element. Dit wil ik zo doen omdat ik gebruik maak van een cms-editor die de kleur dus steeds apart kan instellen. echter ik krijg het via gebruik van een variable niet voor elkaar. heeft iemand raad?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
.arrow-down4 {
height:100px;
}
.arrow-down4:before {
content: "";
position:absolute;
left:0px;
width:50%;
height:100px;
/* kleur arrow down */
}
.arrow-down4:after {
content: "";
position:absolute;
right:0px;
width:50%;
height:100px;
/* kleur arrow down */
}
.arrow-kleur:before {
background: var(--kleur);
}
.arrow-kleur:after {
background: var(--kleur);
}
</style>
<div style="--kleur: #FFFF00;" id="divmain-rijzoek" class="arrow-kleur arrow-down4"></div>
.arrow-down4 {
height:100px;
}
.arrow-down4:before {
content: "";
position:absolute;
left:0px;
width:50%;
height:100px;
/* kleur arrow down */
}
.arrow-down4:after {
content: "";
position:absolute;
right:0px;
width:50%;
height:100px;
/* kleur arrow down */
}
.arrow-kleur:before {
background: var(--kleur);
}
.arrow-kleur:after {
background: var(--kleur);
}
</style>
<div style="--kleur: #FFFF00;" id="divmain-rijzoek" class="arrow-kleur arrow-down4"></div>
Gewijzigd op 08/02/2024 16:27:25 door Paul Weiss
https://www.w3schools.com/css/css3_variables.asp
Want ik denk dat je nu echt maar wat aan het gokken bent. ;-)
Sowieso zijn inline style's zeker iets wat je niet wilt gebruiken in combinatie met CSS-stylesheets.
Gewijzigd op 08/02/2024 16:45:44 door - Ariën -
p.s. bij cms kom je niet altijd om inline styling heen. en al helemaal niet als je een kleur naar wens wilt instellen of andere handmatige instellingen. dat kan niet in classes.
Maar dan moet je wel --kleur definiëren in de CSS.
Maar hoezo zou je eigenlijk in een CMS een aparte kleur willen gebruiken? Een beetje huisstijl heeft juist vaste kleurencombinaties. En als je de layout later veranderd, (of een darkmode toevoegt) dan wil je niet dat je al jouw content moet doorzoeken op die gebruikte stijlen die misstaan bij je huisstijl.
Gewijzigd op 08/02/2024 17:04:18 door - Ariën -
Als je die hard-coded in-line gaat instellen, dan is het vragen om problemen als je ooit je layout gaan aanpassen.
In dat geval zou ik met soort-van-variabelen werken zodat je die kleuren server-side kan ophalen. Maar eerlijk gezegd heb ik nog nooit gezien dat mensen totaal verschillende kleurcombinaties gebruiken. Ik heb gebruikers altijd het advies gegeven om zo min mogelijk opschmuck te gebruiken in content, zodat je niet je eigen huisstijl gaat breken.
Gewijzigd op 08/02/2024 17:19:52 door - Ariën -
Je hebt helemaal gelijk wat betreft dat het geen kermis moet worden. Gewoon basiskleuren gebruiken heeft ook mijn itensie. Maar hoe je het ook bekijkt, de basiskleuren moeten ook een keer ingesteld worden. En in het voorbeeld van mijn code bovenaan dit topic is het vragen hoe ik deze kleuren dan kan gaan koppelen. in de stylesheet kan ik deze niet plaatsen, aangezien de kleuren nog gedefinieerd moeten worden. Maar wellicht dat ik de 3 basiskleuren wel kan koppelen aan de desbetreffende stylesheet. moet even kijken hoe ik dit dan precies voor elkaar moet krijgen. Wat betreft inline styling is niet erg, aangezien alle elementen bij mij los van elkaar staan en de layout sowieso flexibel is. dus dat is geen probleem.