Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
The Famigo logo in HTML and CSS.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
background: silver;
margin: 0;
padding: 0;
}
.famigo-logo {
background: white;
font-size: 6em;
font-family: Georgia, serif;
font-weight: bold;
height: 2em;
line-height: 1.85em;
margin: 1em auto;
outline: thin solid black;
overflow: hidden;
position: relative;
text-align: center;
white-space: nowrap;
width: 5em;
}
.famigo-logo-background {
height: 0;
-webkit-text-stroke: thin;
}
.famigo-logo-foreground {
-webkit-mask-image: -webkit-linear-gradient(
transparent, black);
}
.famigo-logo-f, .famigo-logo-a, .famigo-logo-m,
.famigo-logo-i, .famigo-logo-g, .famigo-logo-o,
.famigo-logo-tittle {
display: inline-block;
letter-spacing: 0;
vertical-align: 0;
}
.famigo-logo-f {
color: #8dc63f;
letter-spacing: -0.075em;
-webkit-transform: rotate(-9deg);
}
.famigo-logo-a {
color: #f4911e;
letter-spacing: -0.05em;
vertical-align: 0.05em;
-webkit-transform: rotate(5deg);
}
.famigo-logo-m {
color: #ee3124;
vertical-align: 0.05em;
-webkit-transform: rotate(-4deg);
}
.famigo-logo-i {
color: #b0006e;
letter-spacing: -0.075em;
vertical-align: 0.15em;
-webkit-transform: rotate(7deg);
}
.famigo-logo-g {
color: #deb406;
-webkit-transform: rotate(-10deg);
}
.famigo-logo-o {
color: #1ab7ea;
vertical-align: 0.075em;
-webkit-transform: rotate(9deg);
}
.famigo-logo-tittle {
color: #ee3124;
left: 2.8em;
position: absolute;
vertical-align: 0.15em;
-webkit-transform: rotate(7deg);
}
.famigo-logo-background .famigo-logo-f {
color: transparent;
-webkit-text-stroke-color: #8dc63f;
}
.famigo-logo-background .famigo-logo-a {
color: transparent;
-webkit-text-stroke-color: #f4911e;
}
.famigo-logo-background .famigo-logo-m {
color: transparent;
-webkit-text-stroke-color: #ee3124;
}
.famigo-logo-background .famigo-logo-i {
color: transparent;
-webkit-text-stroke-color: #b0006e;
}
.famigo-logo-background .famigo-logo-g {
color: transparent;
-webkit-text-stroke-color: #deb406;
}
.famigo-logo-background .famigo-logo-o {
color: transparent;
-webkit-text-stroke-color: #1ab7ea;
}
.famigo-logo-background .famigo-logo-tittle {
color: transparent;
-webkit-text-stroke-color: #ee3124;
}
.famigo-logo-arc-1, .famigo-logo-arc-2, .famigo-logo-arc-3 {
border-color: black;
border-style: dashed;
border-width: thin 0 0 0;
position: absolute;
}
.famigo-logo-arc-1 {
border-radius: 0.7em;
height: 0.7em;
left: 0.9em;
top: 0.5em;
width: 0.7em;
-webkit-transform: rotate(10deg);
}
.famigo-logo-arc-2 {
border-radius: 0.7em;
height: 0.7em;
left: 1.6em;
top: 0.5em;
width: 0.7em;
-webkit-transform: rotate(-5deg);
}
.famigo-logo-arc-3 {
border-radius: 0.7em;
height: 0.7em;
left: 2.3em;
top: 0.4em;
width: 0.7em;
-webkit-transform: rotate(-30deg);
}
</style>
<title>Famigo</title>
</head>
<body>
<h1 class="famigo-logo">
<div class="famigo-logo-background">
<span class="famigo-logo-f">F</span><!--
--><span class="famigo-logo-a">a</span><!--
--><span class="famigo-logo-m">m</span><!--
--><span class="famigo-logo-i">&#x131;</span><!--
--><span class="famigo-logo-g">g</span><!--
--><span class="famigo-logo-o">o</span>
<span class="famigo-logo-tittle">&#x2d9;</span>
</div>
<div class="famigo-logo-foreground">
<span class="famigo-logo-f">F</span><!--
--><span class="famigo-logo-a">a</span><!--
--><span class="famigo-logo-m">m</span><!--
--><span class="famigo-logo-i">&#x131;</span><!--
--><span class="famigo-logo-g">g</span><!--
--><span class="famigo-logo-o">o</span>
<span class="famigo-logo-tittle">&#x2d9;</span>
</div>
<div class="famigo-logo-arc-1"></div>
<div class="famigo-logo-arc-2"></div>
<div class="famigo-logo-arc-3"></div>
</h1>
</body>
</html>

nice work!
But what if you use :before and :after? the html footprint would be less.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment