< Back to Frontend Friday Folks Index

Pillars

Highlighted solution (605 characters)
1 
<r>
2 
  <div id=a>
3 
  <div class=pillar>
4 
    <div class=blue></div>
5 
  </div>
6 
  </div>
7 
</r>
8 
<style>
9 
  body {
10 
    background: #191919;
11 
    display: grid;
12 
    place-items: center;
13 
  }
14 
  r {
15 
    width: 110px;
16 
    height: 110px;
17 
    background: #4F77FF;
18 
  }
19
20 
  #a {
21 
    -webkit-box-reflect: below 60px;
22 
  }
23
24 
  .pillar {
25 
    background: #F9E492;
26 
    border-radius: 50%;
27 
    box-shadow: #191919 8px 8px 0px 7px;
28 
    margin: -20px;
29 
    height: 45px;
30 
    width: 45px;
31 
    -webkit-box-reflect: right 60px;
32 
  }
33
34 
  .blue {
35 
    background: #4F77FF;
36 
    border-radius: 50%;
37 
    height: 30px;
38 
    width: 30px;
39 
  }
40 
</style>
41

Lots of -webkit-box-reflect in here! We did this 100% solution at the JSCraftCamp 2023 in a group. Later, we started working on another solution with gradients. Somehow the numbers didn't really add up, so maybe other units like percentages or similar should have been used to cleanly get to 100%.

Interestingly, using r (or other non-assigned names) as an element name seems to work out as block elements!

< Back to Frontend Friday Folks Index