Here is the seventh one. Half of the challenges are behind. This one is the first to reuse the colors of the previous task, number five, to be precise. Anyways, I really like the composition of the colors used throughout the battles and hope one day to be cool with colors.
1. Z-Index
The first solution relies on the precise placement of the divs
. First we describe a common div
with its width
, height
and border-radius
and afterward, we use position: absolute
to allow positioning regardless of the neighbor elements. The absolute
here can be safely replaced by fixed
to save some characters if you fancy. Now to stack the elements we use z-index
yet again. You know, the higher the number, the more is the element on the front. And since we already defined our content box with padding: 75px
on the body
, our only movements will be playing around with the left margins.
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<style>
body {
margin: 0;
background: #0B2429;
padding: 75px;
}
div {
width: 150px;
height: 150px;
border-radius: 100px 0;
position: absolute;
}
#a {
background: #1A4341;
z-index: 1;
}
#b {
background: #998235;
z-index: 2;
margin-left: 50px;
}
#c {
background: #F3AC3C;
z-index: 3;
margin-left: 100px;
}
</style>
2. Box Shadows
If somebody will ask, what I've learned from doing the CSS battle, I'd probably respond with "Box Shadows". This single technique keeps appearing throughout the challenges, often resulting in shorter solutions. And mostly these solutions also appear more idiomatic to me personally.
Here again, we use box shadows. The only gotcha here is that each subsequent shadow is placed behind the previous one, so to achieve the wanted appearance we should start with the rightmost leaf.
Notice how some of the values are defined with vh
and vw
- that is to save the battle characters. In the end, 50vh
is one character shorter than 150px
and doing this trick 4 times in our case, we save 4 characters.
<div></div>
<style>
* {
background: #0B2429;
}
div {
background: #F3AC3C;
width: 50vh;
height: 50vh;
border-radius: 25vw 0;
margin: 75px 167px;
box-shadow: -50px 0 #998235, -25vw 0 #1A4341;
}
</style>
Which one of these solutions would you prefer? Do you know any others?
Top comments (4)
My solution
I just modify your first code:
body {
margin: 0;
background: #0B2429;
padding: 75px;
}
div {
width: 150px;
height: 150px;
border-radius: 100px 0;
position: absolute;
}
#a {
background: #1A4341;
}
#b {
background: #998235;
left: 125px;
}
#c {
background: #F3AC3C;
left: 175px;
}
also works if cut the margin:0;
and change padding to 67px;
in first example it was good idea using padding
in second the use of asterisk
i will keep in mind this ideas to make shorter my code.