CSS-Only Olympic Rings


 
 

Inspired by Justin Sepulveda’s CSS Logos and this post on the new Design Informer Forums, we decided to try our hand at creating the Olympic Rings with just CSS and HTML.

We realize its simple, but it was fun to figure out the layering and how to do it with just a few elements. 

Just having some fun....

 

HTML











CSS

:root {
font-size: calc(1vw + 1vh + .25vmin);
}
body {
background: #fffde8;
}
.rings {
list-style: none;
left: 50%;
margin: -9.75em -21em;
position: absolute;
top: 50%;
li {
position: absolute;
margin-top: 1em;
margin-left: 1em;
border-radius: 1em;
&:before, &:after {
position: absolute;
border-radius: 6em;
}
&:before {
display: block;
content: "";
}
width: 12em;
height: 12em;
font-size: 1em;
}
}
.rings {
li:after {
border: 1.15em solid #000;
bottom: 0;
content: "";
display: block;
right: -0.1em;
left: -0.1em;
top: -0.1em;
}
.blue {
left: 0;
top: 0;
z-index: 10;
}
.yellow {
left: 6.8em;
top: 5.7em;
z-index: 20;
}
.black {
left: 13.6em;
top: 0;
z-index: 21;
}
.green {
left: 20.4em;
top: 5.7em;
z-index: 20;
}
.red {
left: 27.2em;
top: 0;
z-index: 10;
}
.black:after { border-color: #000; }
.blue:after { border-color: #0085c7; }
.green:after { border-color: #009f3d; }
.red:after { border-color: #df0024; }
.yellow:after { border-color: #f4c300; }
.blue.chain {
border-bottom-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
z-index: 24;
&:before, &:after {
border-bottom-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
}
}
.green.chain {
border-bottom-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
z-index: 23;
&:before, &:after {
border-bottom-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}
}
.red.chain {
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
z-index: 23;
&:before, &:after {
border-left-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
}
}
.yellow.chain {
border-bottom-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
z-index: 23;
&:before, &:after {
border-bottom-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
}
}

 
 

tags: CSS Olympic Rings css play html5


Comments area, use one of your social accounts to log-in and post a comment.



Responses to the post

We use our own cookies and third-party cookies to improve our services, show products based on your preferences, analyse the browsing habits of our users, and enable interaction with social networks. Continuing to browse our sites implies full acceptance of their use. You can change your cookie setting or get more information here: Cookies policy .