Skip to content

Instantly share code, notes, and snippets.

@charliepark

charliepark/IFTTT Logo, CSS extracted

Last active December 23, 2015 06:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save charliepark/6598079 to your computer and use it in GitHub Desktop.
Save charliepark/6598079 to your computer and use it in GitHub Desktop.
Download ZIP
The same IFTTT logo as in https://gist.github.com/charliepark/6598054, but with the CSS extracted out (the first section). Also includes it with CSS inline (the second section). Also includes the SVG for reference (the last section).
Raw
IFTTT Logo, CSS extracted
<html>
<head>
<style type="text/css">
.css-logo{font-size:10px;height:2.2em;position:relative;width:8.5em}
.letter-block{float:left;height:100%;margin-right:.2em;position:relative;width:1.6em}
.letter-block.i{margin-right:.3em;width:.7em}
.letter-block.t{width:1.7em}
.h{background:#f40;position:absolute;top:0;width:100%}
.h.short{top:.9em;width:1.3em;}
.s{background:#000;position:absolute}
.v{background:#3cf;height:100%}
.s, .v{width:.7em}
.s, .h{height:.7em}
.t .v{margin:0 auto}
</style>
</head>
<body>
<div class="css-logo">
<div class="letter-block i">
<div class="v"></div>
</div>
<div class="letter-block f">
<div class="v"></div>
<div class="h"><div class="s"></div></div>
<div class="h short"><div class="s"></div></div>
</div>
<div class="letter-block t">
<div class="h"></div>
<div class="v"><div class="s"></div></div>
</div>
<div class="letter-block t">
<div class="h"></div>
<div class="v"><div class="s"></div></div>
</div>
<div class="letter-block t">
<div class="h"></div>
<div class="v"><div class="s"></div></div>
</div>
</div>
<br><br>
<div style="font-size:10px;height:2.2em;position:relative;width:8.5em">
<div style="float:left;height:2.2em;margin-right:.3em;position:relative;width:.7em;">
<div style="background:#3cf;height:100%;width:.7em"></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.6em">
<div style="background:#3cf;height:100%;width:.7em"></div>
<div style="background:#f40;height:.7em;position:absolute;top:0;width:1.6em;"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
<div style="background:#f40;height:.7em;position:absolute;top:.9em;width:1.3em;"><div style="background:#000;height:.7em;width:.7em"></div></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
<div style="background:#f40;height:.7em;position:absolute;width:100%"></div>
<div style="background:#3cf;height:100%;margin:0 auto;width:.7em"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
<div style="background:#f40;height:.7em;position:absolute;width:100%"></div>
<div style="background:#3cf;height:100%;margin:0 auto;width:.7em"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
</div>
<div style="float:left;height:2.2em;margin-right:.2em;position:relative;width:1.7em">
<div style="background:#f40;height:.7em;position:absolute;width:100%"></div>
<div style="background:#3cf;height:100%;margin:0 auto;width:.7em"><div style="background:#000;height:.7em;position:absolute;width:.7em"></div></div>
</div>
</div>
<br><br>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="118px" height="57px" viewBox="0 0 118 57" enable-background="new 0 0 118 57" style="display:no ne">
<rect fill="#FFFFFF" width="111" height="50"/>
<g><!-- I -->
<rect x="0" y="0" fill="#33CCFF" width="7" height="22"/>
</g>
<g><!-- F -->
<rect x="10" y="16" fill="#33CCFF" width="7" height="6"/> <!-- F blue bar -->
<rect x="10" y="7" fill="#33CCFF" width="7" height="2"/> <!-- F blue bar -->
<rect x="10" y="9" width="7" height="7"/> <!-- F square lower -->
<rect x="17" y="9" fill="#FF4400" width="6" height="7"/> <!-- F bar lower -->
<rect x="10" y="0" width="7" height="7"/>
<rect x="17" y="0" fill="#FF4400" width="9" height="7"/> <!-- F bar upper -->
</g>
<g><!-- T -->
<rect x="33" y="7" fill="#33CCFF" width="7" height="15"/>
<rect x="33" y="0" width="7" height="7"/>
<rect x="28" y="0" fill="#FF4400" width="5" height="7"/>
<rect x="40" y="0" fill="#FF4400" width="5" height="7"/>
</g>
<g><!-- T -->
<rect x="52" y="7" fill="#33CCFF" width="7" height="15"/>
<rect x="52" y="0" width="7" height="7"/>
<rect x="47" y="0" fill="#FF4400" width="5" height="7"/>
<rect x="59" y="0" fill="#FF4400" width="5" height="7"/>
</g>
<g><!-- T -->
<rect x="71" y="7" fill="#33CCFF" width="7" height="15"/>
<rect x="71" y="0" width="7" height="7"/>
<rect x="66" y="0" fill="#FF4400" width="5" height="7"/>
<rect x="78" y="0" fill="#FF4400" width="5" height="7"/>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment