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 -
bij een cms vind ik dat je altijd de keuze moet kunnen laten an degene die het gebruikt. en bovendien een huisstijl moet ook ingesteld worden. deze waardes sla je dan niet op in aparte stylesheets. al zou dat wel kunnen uiteraard. je zou 3 basiskleuren kunnen laten kiezen en deze op slaan in een apart stylesheet. Maar dat lost mijn bovenstaande probleem niet op uiteraard, aangezien men nog steeds moet kunnen kiezen uit de 3 basiskleuren. de oplossing die jij aangeeft werkt alleen voor vaste kleuren die vooraf zijn ingesteld. In geval van een before en after selector gaat dat volgens mij helemaal niet werken. Maar in ieder geval wel bedankt voor het meedenken. Ik duik er nog eens in.
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.
Die kan je prima in de :root van je CSS definiëren. Je kan dit zelf ook genereren en cachen.
ja klopt. maar ik zie dat ik iets in de code trouwens niet heb meegenomen. heb het inmiddels kunnen oplossen. bedankt zover.