Created
June 9, 2013 17:24
-
-
Save TimPietrusky/5744396 to your computer and use it in GitHub Desktop.
A CodePen by Tim Pietrusky. MuleSoft logo - The logo of [mulesoft.com](http://mulesoft.com) as one-element. Why? I'm using MuleESB and MuleStudio right now and I love the logo. This is the result :D
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>MuleSoft</h1> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
MuleSoft logo | |
The logo of mulesoft.com in CSS as one-element. | |
Why? I'm using MuleESB and MuleStudio right now and | |
I love the logo. This is the result :D | |
# 2013 by Tim Pietrusky | |
# timpietrusky.com | |
**/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "compass"; | |
body { | |
background: darken(#143f50, 10%); | |
color: #fff; | |
font: 1em sans-serif; | |
} | |
$mule-color-alpha: #d2d3d4; | |
$mule-color-beta: #00bae2; | |
$mule-color-gamma: #00638e; | |
$mule-ear-size: .85em; | |
h1 { | |
position: relative; | |
font: normal 3em/1.55em sans-serif; | |
padding: 0 0 0 1.25em; | |
margin:.5em auto 0 auto; | |
width:2em; | |
&:hover:before { | |
box-shadow: | |
0 0 0 .04em darken($mule-color-alpha, 40%), | |
0 0 .25em $mule-color-beta | |
; | |
} | |
/* top triangle, mule body, circle */ | |
&:before { | |
position: absolute; | |
content: ''; | |
left: -.5em; | |
width: 1.5em; | |
height: 1.5em; | |
border-radius: 50%; | |
box-shadow: 0 0 0 .04em darken($mule-color-alpha, 40%); | |
@include background( | |
/* top triangle */ | |
linear-gradient(125deg, $mule-color-alpha 20%, transparent 20%), | |
linear-gradient(-125deg, $mule-color-alpha 20%, transparent 20%), | |
/* mule body */ | |
linear-gradient(105deg, transparent 92%, $mule-color-alpha 92%), | |
linear-gradient(-105deg, transparent 92%, $mule-color-alpha 92%), | |
linear-gradient(90deg, transparent 40%, $mule-color-alpha 40%, $mule-color-alpha 60%, transparent 60%), | |
/* circle */ | |
radial-gradient(circle, $mule-color-beta 0%, $mule-color-gamma 45%, $mule-color-gamma 58%, $mule-color-alpha 60%) | |
); | |
background-position: | |
/* top triangle */ | |
.745em 0, | |
.745em 0, | |
/* mule body */ | |
.625em 0, | |
.865em 0, | |
0 90%, | |
0 0, | |
/* circle */ | |
0 0 | |
; | |
background-size: | |
/* top triangle */ | |
100% 100%, | |
100% 100%, | |
/* mule body */ | |
100% 100%, | |
100% 100%, | |
100% 30%, | |
100% 100%, | |
/* circle */ | |
100% 100% | |
; | |
background-repeat: | |
/* top triangle */ | |
repeat, | |
repeat, | |
/* mule body */ | |
repeat, | |
repeat, | |
no-repeat, | |
no-repeat, | |
/* circle */ | |
repeat | |
; | |
} | |
/* mule ears */ | |
&:after { | |
position: absolute; | |
content: ''; | |
top:.725em; | |
left:-.165em; | |
width: $mule-ear-size; | |
height: $mule-ear-size; | |
margin: (-$mule-ear-size / 2) 0 0 0; | |
border-radius: 50%; | |
@include background( | |
/* left ear */ | |
linear-gradient(-125deg, transparent 70%, $mule-color-alpha 70%, $mule-color-alpha 100%), | |
/* right ear */ | |
linear-gradient(125deg, transparent 70%, $mule-color-alpha 70%, $mule-color-alpha 100%) | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment