.box4 {
width: 0px;
margin: 0 0 0 85px;
box-shadow: 0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
0 0 0 80px black, 0 0 0 85px teal;
}
.box4::after {
content: "";
margin-top: 180px;
display: block;
}
I’m not sure what’s going on as all were working when I adjusted the fiddle.
Try this instead and see if it solves the problem.
.box4 {
width: 0px;
margin: 90px 0 90px 85px;
box-shadow: 0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
0 0 0 80px black, 0 0 0 85px teal;
}
.box4::after {
content: "";
margin-top:90px;
display: table;
}
1 Like
Using flex, how would I get it to work?
I almost got it here.
The bottom 3 should be aligned evenly.
https://jsfiddle.net/7f3xzmrL/
.box6 {
width: 0px;
margin: 90px 0 90px 85px;
box-shadow: 0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
0 0 0 80px black, 0 0 0 85px teal;
}
It’s just a matter of using margin to create the right space.
.box6 {
width: 0px;
margin: 90px;
box-shadow: 0 0 0 5px teal, 0 0 0 10px black, 0 0 0 15px orange,
0 0 0 20px black, 0 0 0 25px teal, 0 0 0 30px black, 0 0 0 35px orange,
0 0 0 40px black, 0 0 0 45px teal, 0 0 0 50px black, 0 0 0 55px orange,
0 0 0 60px black, 0 0 0 65px teal, 0 0 0 70px black, 0 0 0 75px orange,
0 0 0 80px black, 0 0 0 85px teal;
}
1 Like
Trying to add this code
https://jsfiddle.net/0tcfrL85/
to here:
https://jsfiddle.net/hwfao2qL/2/
How is it fixed?
.box8 {
width: 170px;
height: 170px;
}
.color1 {
border: 5px solid teal;
}
.color2 {
border: 5px solid black;
}
.color3 {
border: 5px solid orange;
}
.color4 {
border: 5px solid black;
}
.color5 {
border: 5px solid teal;
}
.color6 {
border: 5px solid black;
}
.color7 {
border: 5px solid orange;
}
.color8 {
border: 5px solid black;
}
.color9 {
border: 5px solid teal;
}
.color10 {
border: 5px solid black;
}
.color11 {
border: 5px solid orange;
}
.color12 {
border: 5px solid black;
}
.color13 {
border: 5px solid teal;
}
.color14 {
border: 5px solid black;
}
.color15 {
border: 5px solid orange;
}
.color16 {
border: 5px solid black;
}
.color17 {
border: 5px solid teal;
}
<div class="box8">
<div class="color1">
<div class="color2">
<div class="color3">
<div class="color4">
<div class="color5">
<div class="color6">
<div class="color7">
<div class="color8">
<div class="color9">
<div class="color10">
<div class="color11">
<div class="color12">
<div class="color13">
<div class="color14">
<div class="color15">
<div class="color16">
<div class="color17">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Fixed with custom margins.
https://jsfiddle.net/fcajxh72/
1 Like
What is it called when it is written like this?
It’s not using root:
or is it just a different way of doing it?
or is the syntax called something different?
Referring to this:
--coloration: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
var(--coloration))
Code:
.box9 {
width: 170px;
height: 170px;
--coloration: teal 0 5px, black 0 10px, orange 0 15px, black 0 20px;
background:
repeating-linear-gradient(0deg, var(--coloration)) top,
repeating-linear-gradient(180deg, var(--coloration)) bottom;
background-size: 100% 50%;
background-repeat: no-repeat;
}
.box9:before {
content: "";
display: block;
padding-top: 100%;
background: inherit;
clip-path: polygon(0 0, 100% 0, 0 100%, 100% 100%);
transform: rotate(90deg);
}
You can declare css custom variables anywhere but they are scope specific. If for instance you declare a custom variable on a p tag then you can only use that on a p tag and its descendants. The rule won’t apply to other elements.
The reason that :root is mostly used is because :root is basically the html element (but with higher specificity) and therefore available to all elements on the page. You can use that custom property anywhere on any element that you like.
If you declare the property on a specific element then you limit that scope to that element and its descendants (which can be useful in certain situations).
2 Likes
Can either of these be improved?
It turns out the code that is the biggest uses less root: than the smaller code.
Code 1
https://jsfiddle.net/g0f14qe9/1/
:root {
--color-a: teal;
--color-b: black;
--color-c: orange;
--color-d: black;
--number-a: 5px;
--number-b: 10px;
--number-c: 15px;
--number-d: 20px;
--number-e: 25px;
--number-f: 30px;
--number-g: 35px;
--number-h: 40px;
--number-i: 45px;
--number-j: 50px;
--number-k: 55px;
--number-l: 60px;
--number-m: 65px;
--number-n: 70px;
--number-o: 75px;
--number-p: 80px;
--number-q: 85px;
}
Code 2
https://jsfiddle.net/sdfcpb6x/
:root {
--color-a: teal;
--color-b: black;
--color-c: orange;
--color-d: black;
--number-a1: 5px;
--number-b1: 10px;
--number-c1: 15px;
--number-d1: 20px;
--number-e1: 25px;
--number-f1: 30px;
--number-g1: 35px;
--number-h1: 40px;
--number-i1: 45px;
--number-j1: 50px;
--number-k1: 55px;
--number-l1: 60px;
--number-m1: 65px;
--number-n1: 70px;
--number-o1: 75px;
--number-p1: 80px;
--number-b2: 160px;
--number-c2: 155px;
--number-d2: 150px;
--number-e2: 145px;
--number-f2: 140px;
--number-g2: 135px;
--number-h2: 130px;
--number-i2: 125px;
--number-j2: 120px;
--number-k2: 115px;
--number-l2: 110px;
--number-m2: 105px;
--number-n2: 100px;
--number-o2: 95px;
--number-p2: 90px;
}
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.