Err... looks really weird in Firefox, but Chrome is okay.. haha. I should work on that.
Thanks to 'brandingbad.com' for the inspiration.
**edit - I went through and added the code for FF, looks a bit better.
A Pen by Nick LaDart on CodePen.
<!-- another practice logo --> | |
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400' rel='stylesheet' type='text/css'> | |
<div id="container"></div> | |
<div class="dog_container"> | |
<div class="blue_left"></div> | |
<div class="blue_right"></div> | |
<div class="dark_blue_banner"></div> | |
<div class="white_line_right"></div> | |
<!-- dog head --> | |
<div class="pt1"></div> | |
<div class="pt2"></div> | |
<div class="pt3"></div> | |
<div class="pt4"></div> | |
<div class="pt5"></div> | |
<div class="pt6"></div> | |
<div class="pt6_9"></div> | |
<div class="pt7"></div> | |
<div class="pt8"></div> | |
<div class="pt9"></div> | |
<div class="pt10"></div> | |
<div class="pt11"></div> | |
<div class="pt12"></div> | |
<div class="pt13"></div> | |
<div class="pt14"></div> | |
<div class="red_banner"></div> | |
<div class="white_line_left"></div> | |
<div class="white_line_right"></div> | |
<div class="a_better_way">A BETTER WAY</div> | |
<div class="rabid_dog">LADART HAS</div> | |
<!-- dog head --> | |
</div> |
Err... looks really weird in Firefox, but Chrome is okay.. haha. I should work on that.
Thanks to 'brandingbad.com' for the inspiration.
**edit - I went through and added the code for FF, looks a bit better.
A Pen by Nick LaDart on CodePen.
/* */ | |
body {background:#EFEEE9;} | |
#container {} | |
.dog_container { | |
width:172px; | |
height:203px; | |
margin:auto; | |
background:#E2DFD6; | |
} | |
.blue_left { | |
position:absolute; | |
background:#2EC4F2; | |
margin-top:195px; | |
margin-left:0px; | |
width:86px; | |
height:50px; | |
-webkit-transform:skew(0deg,15deg); | |
transform:skew(0deg,15deg); | |
} | |
.blue_right { | |
position:absolute; | |
background:#00B1F6; | |
margin-left:86px; | |
margin-top:195px; | |
height:50px; | |
width:86px; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
} | |
.dark_blue_banner { | |
position:absolute; | |
margin-top:180px; | |
background:#47658B; | |
height:30px; | |
width:172px; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
} | |
.red_banner { | |
position:absolute; | |
background:#F53F31; | |
margin-top:120px; | |
width:172px; | |
height:60px; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
} | |
.white_line_left { | |
position:absolute; | |
margin-top:212px; | |
background:#fff; | |
height:1px; | |
width:40px; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
} | |
.white_line_right { | |
position:absolute; | |
margin-top:175px; | |
margin-left:132px; | |
background:#fff; | |
height:1px; | |
width:40px; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
} | |
.a_better_way { | |
position:absolute; | |
margin-top:188px; | |
margin-left:48px; | |
color:#fff; | |
-webkit-transform:skew(0deg,-15deg); | |
font-family:tahoma; | |
letter-spacing:1.3px; | |
font-size:9px; | |
transform:skew(0deg,-15deg); | |
} | |
.rabid_dog { | |
position:absolute; | |
margin-top:127px; | |
margin-left:12px; | |
font-size:30px; | |
color:#fff; | |
font-family:dosis; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
} | |
.pt1 { | |
position:absolute; | |
margin-top:42px; | |
margin-left:55px; | |
border-bottom: 80px solid #B27428; | |
border-left: 25px solid transparent; | |
border-right: 25px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
} | |
.pt2 { | |
position:absolute; | |
/* background:#C48728;*/ | |
background: -webkit-linear-gradient(top, #C48728, #B27428); | |
margin-top:81px; | |
margin-left:40px; | |
height:70px; | |
width:20px; | |
-webkit-transform:skew(10deg,-15deg); | |
transform:skew(10deg,-15deg); | |
-webkit-transform:rotate(14deg); | |
transform:skew(0deg,14deg); | |
} | |
.pt3 { | |
position:absolute; | |
margin-top:52px; | |
margin-left:45px; | |
border-bottom: 50px solid #B27428; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:skew(0deg,-15deg); | |
transform:skew(0deg,-15deg); | |
-webkit-transform:rotate(-70deg); | |
transform:rotate(-70deg); | |
} | |
.pt4 { | |
position:absolute; | |
margin-top:46px; | |
margin-left:36px; | |
border-bottom: 40px solid #C48728; | |
border-left: 20px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:rotate(-107deg); | |
transform:rotate(-107deg); | |
} | |
.pt5 { | |
position:absolute; | |
margin-top:37px; | |
margin-left:31px; | |
border-bottom: 30px solid #C48728; | |
border-left: 30px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:rotate(-5deg); | |
transform:rotate(-5deg); | |
} | |
.pt6 { | |
position:absolute; | |
margin-top:37px; | |
margin-left:63px; | |
border-bottom: 40px solid #C48728; | |
border-left: 40px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:rotate(-65deg); | |
transform:rotate(-65deg); | |
} | |
.pt7 { | |
/* eye */ | |
position:absolute; | |
margin-top:47px; | |
margin-left:90px; | |
border-bottom: 5px solid #fff; | |
border-left: 5px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0px; | |
width: 0px; | |
-webkit-transform:rotate(-5deg); | |
transform:rotate(-5deg); | |
} | |
.pt6_9 { | |
/* eye */ | |
position:absolute; | |
margin-top:44px; | |
margin-left:88px; | |
border-bottom: 5px solid #B27428; | |
border-left: 5px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0px; | |
width: 0px; | |
-webkit-transform:rotate(-5deg); | |
transform:rotate(-5deg); | |
} | |
.pt8 { | |
position:absolute; | |
margin-top:37px; | |
margin-left:46px; | |
border-bottom: 28px solid #C48728; | |
border-left: 28px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:rotate(-75deg); | |
transform:rotate(-75deg); | |
} | |
.pt9 { | |
position:absolute; | |
margin-top:54px; | |
margin-left:90px; | |
border-bottom: 28px solid #B27428; | |
border-left: 28px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:rotate(-23deg); | |
transform:rotate(-23deg); | |
} | |
.pt10 { | |
position:absolute; | |
margin-top:45px; | |
margin-left:110px; | |
border-bottom: 22px solid #C48728; | |
border-left: 28px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0; | |
width: 0px; | |
-webkit-transform:rotate(37deg); | |
transform:rotate(37deg); | |
} | |
.pt11 { | |
position:absolute; | |
margin-top:50px; | |
margin-left:129px; | |
border-bottom: 10px solid #B27428; | |
border-left: 10px solid transparent; | |
border-right: 10px solid transparent; | |
height: 0px; | |
width: 0px; | |
-webkit-transform:rotate(45deg); | |
transform:rotate(45deg); | |
} | |
.pt12 { | |
position:absolute; | |
margin-top:65px; | |
margin-left:122px; | |
width:20px; | |
height:5px; | |
background:#D6D6CC; | |
-webkit-transform:rotate(10deg); | |
transform:rotate(10deg); | |
} | |
.pt13 { | |
position:absolute; | |
margin-top:64px; | |
margin-left:118px; | |
border-bottom: 5px solid #D6D6CC; | |
border-left: 5px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0px; | |
width: 0px; | |
-webkit-transform:rotate(-15deg); | |
transform:rotate(-15deg); | |
} | |
.pt14 { | |
position:absolute; | |
margin-top:85px; | |
margin-left:90px; | |
border-bottom: 5px solid #B27428; | |
border-left: 5px solid transparent; | |
border-right: 14px solid transparent; | |
height: 0px; | |
width: 0px; | |
-webkit-transform:rotate(-35deg); | |
transform:rotate(-35deg); | |
} |