CSSBattle 16.94: Ripples Solution
9 stacked circlesApproach
Elements: 9 centered circles
Result: 100% match
Implementation
1<div class="circles">2 <div c1></div>3 <div c2></div>4 <div c3></div>5 <div c4></div>6 <div c5></div>7 <div c6></div>8 <div c7></div>9 <div c8></div>10 <div c9></div>11</div>12<style>13 body {14 margin: 0;15 background: #0e2e2c;16 }17 .circles {18 height: 100vh;19 }20 .circles > * {21 position: absolute;22 top: 50%;23 left: 50%;24 transform: translate(-50%, -50%);25 border-radius: 100%;26 width: var(--size);27 height: var(--size);28 background: var(--color);29 }30 [c1] {31 --size: 200px;32 --color: #f3ac3c;33 }34 [c2] {35 --size: 188px;36 --color: #0e2e2c;37 }38 [c3] {39 --size: 160px;40 --color: #f3ac3c;41 }42 [c4] {43 --size: 144px;44 --color: #0e2e2c;45 }46 [c5] {47 --size: 120px;48 --color: #998235;49 }50 [c6] {51 --size: 100px;52 --color: #0e2e2c;53 }54 [c7] {55 --size: 80px;56 --color: #f3ac3c;57 }58 [c8] {59 --size: 56px;60 --color: #0e2e2c;61 }62 [c9] {63 --size: 40px;64 --color: #f3ac3c;65 }66</style>
Other Battle #16 solutions
References
Comments
Loading comments...
Tags
css
cssbattle
Apply and earn a $2,500 bonus once you're hired on your first job!
Clients from the Fortune 500 to Silicon Valley startups
Choose your own rate, get paid on time
From hourly, part-time, to full-time positions
Flexible remote working environment
A lot of open JavaScript jobs!!
Fact corner: Referred talent are 5x more likely to pass the Toptal screening process than the average applicant.
Still hesitate? Read HoningJS author's guide on dealing with Toptal interview process.