Logo ('-' * 4) CSS Only Logo, with JavaScript to change colors
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) CSS Only Logo, with JavaScript to change colors
A Pen by Ryan Trimble on CodePen.
//Found this script at:http://www.joshtucker.com.au/243/rotating-a-divs-background-color-with-jquery/ | |
$(document).ready(function() { | |
setInterval(function() { | |
var theColours = Array('#d35400', '#2ecc71', '#2980b9', '#e74c3c', '#f1c40f'); | |
var theColour = theColours[Math.floor(Math.random() * theColours.length)]; | |
$('.outer').animate({ | |
backgroundColor: theColour | |
}, 1000); | |
}, 2000); | |
}); |
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300|Roboto+Condensed:400,300|Open+Sans); | |
body { | |
background: #333; | |
} | |
.container { | |
margin-top: 25vh; | |
} | |
.outer { | |
background: #2ecc71; | |
height: 200px; | |
width: 200px; | |
display: block; | |
margin: 0 auto; | |
border-radius: 40px; | |
} | |
.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; | |
} |