Logo ('-' * 4) All CSS version of Logo, even color transitions are CSS
A Pen by Ryan Trimble on CodePen.
<div class="container"> | |
<div class="outer"> | |
<div class="top-left"> | |
</div> | |
<div class="top-right"> | |
</div> | |
<div class="bottom-left"> | |
</div> | |
<div class="bottom-right"> | |
</div> | |
</div> | |
<div class="logo"> | |
<h1>Ryan Trimble Web Design</h1> | |
</div> | |
</div> |
Logo ('-' * 4) All CSS version of Logo, even color transitions are CSS
A Pen by Ryan Trimble on CodePen.
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300|Roboto+Condensed:400,300|Open+Sans); | |
body { | |
background: #333; | |
} | |
.container { | |
margin-top: 25vh; | |
} | |
@keyframes blink { | |
0% { | |
background: #d35400; | |
} | |
20% { | |
background: #2ecc71; | |
} | |
40% { | |
background: #2980b9; | |
} | |
60% { | |
background: #e74c3c; | |
} | |
80% { | |
background: #f1c40f; | |
} | |
100% { | |
background: orange; | |
} | |
} | |
@-webkit-keyframes blink { | |
0% { | |
background: #d35400; | |
} | |
20% { | |
background: #2ecc71; | |
} | |
40% { | |
background: #2980b9; | |
} | |
60% { | |
background: #e74c3c; | |
} | |
80% { | |
background: #f1c40f; | |
} | |
100% { | |
background: orange; | |
} | |
} | |
.outer { | |
background: #2ecc71; | |
height: 200px; | |
width: 200px; | |
display: block; | |
margin: 0 auto; | |
border-radius: 40px; | |
animation: blink 20s linear infinite; | |
-webkit-animation: blink 20s linear infinite; | |
} | |
.top-left { | |
border-bottom: 50px solid white; | |
box-shadow: 0px 1px 0px hsla(240, 90%, 90%, 0.5); | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
height: 0; | |
width: 70px; | |
-webkit-transform: rotate(-45deg); | |
-moz-transform: rotate(-45deg); | |
-ms-transform: rotate(-45deg); | |
-o-transform: rotate(-45deg); | |
z-index: 100; | |
left: -25px; | |
top: 30px; | |
position: relative; | |
} | |
.top-right { | |
border-bottom: 50px solid hsla(255, 100%, 100%, 0.6); | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
height: 0; | |
width: 65px; | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
z-index: 100; | |
left: 25px; | |
top: -21.5px; | |
position: relative; | |
float: right; | |
} | |
.bottom-right { | |
border-bottom: 50px solid white; | |
box-shadow: 0px 1px 0px hsla(240, 90%, 90%, 0.5); | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
height: 0; | |
width: 70px; | |
-webkit-transform: rotate(136deg); | |
-moz-transform: rotate(135deg); | |
-ms-transform: rotate(135deg); | |
-o-transform: rotate(135deg); | |
z-index: 100; | |
right: -55.4px; | |
bottom: -61px; | |
position: relative; | |
} | |
.bottom-left { | |
border-bottom: 50px solid hsla(255, 100%, 100%, 0.6); | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
height: 0; | |
width: 65px; | |
-webkit-transform: rotate(-136deg); | |
-moz-transform: rotate(225deg); | |
-ms-transform: rotate(225deg); | |
-o-transform: rotate(225deg); | |
z-index: 100; | |
left: -59px; | |
top: 13px; | |
position: relative; | |
float: right; | |
} | |
.logo { | |
display: block; | |
margin: 0 auto; | |
width: 300px; | |
text-align: center; | |
font-family: "Roboto"; | |
font-weight: 300 !important; | |
color: #FFF; | |
font-size: 1.5em; | |
} |