HTML/CSS Logo Generation

[Jason Knight]

Whilst much of a site logo requires some form of image, it's amazing what we can accomplish now with just webfonts and the various CSS font-effects. The next-gen version of this site's logo (which will go up shortly after Elementals 4.0's launch) is going to be built in such a manner, just as the current logo is in fact mostly just styled text.

There are a number of techniques dev's are mostly still unaware of that can do amazing things for font-styling.

background-clip:text

This is the big one. It lets you set it so that background-color and background-image are applied to the text inside the element, instead of the box around it.

If we have a DIV.test and we set:

Code: [Select]

.test {
-webkit-background-clip:text;
background-clip:text;
background-color:#F00;
color:transparent.
}

We get red text.

The key is the transparent color, so that the background can show through. Now if we combine that with generated content... well let's use our normal text. We use a span to make the center text blue, and we're using a H1.

Code: [Select]

<header id="top">
<div class="widthWrapper">
<h1>
<a href="/">
CUT<span>CODE</span>DOWN<br>
<small>Minimalist Semantic Markup</small>
</a>
</h1>
<p>
Stuff on other side aligned right
</p>
<!-- .widthWrapper --></div>
</header>
We can provide most of our style thus:

Code: [Select]

/* assumes a reset is in use */

@font-face {
font-family:"h1Text";
font-weight:bold;
font-style:normal;
src:
url("molot.woff2") format("woff2"),
url("molot.woff") format("woff");
}

#top {
text-align:right;
background:#027;
color:#FFF;
}

.widthWrapper {
overflow:hidden; /* wrap the float */
max-width:100em;
padding:0.75em 1em;
margin:0 auto;
}

h1 {
float:left;
display:inline; /* prevent IE margin issues */
text-align:left;
padding-top:0.15em;
text-transform:uppercase;
font:bold 2.5em/1em "h1Text",arial,helvetica,sans-serif;
letter-spacing:0.0325em;
}

h1 a {
position:relative;
display:block;
text-decoration:none;
text-shadow:
-1px 0 2px #000,
1px 0 2px #000;
color:#FFF;
}

h1 small {
display:block;
font-size:0.5em;
padding-bottom:0.6em;
margin-top:-0.2em;
font:bold 0.43em/1em "Segoe UI",arial,helvetica,sans-serif;
letter-spacing:0;
color:#9BF;
}

h1 span{
color:#BDF;
}

Which looks good:



But if we were to add generated content over the larger text with a transparent linear-gradient:

Code: [Select]

h1 a:after {
content:"CUTCODEDOWN";
position:absolute;
top:0.05em;
left:0;
-webkit-background-clip:text;
background-clip:text;
background-image:linear-gradient(
0deg,
rgba(0,0,0,0.6) 0%,
rgba(0,0,0,0.2) 25%,
rgba(0,0,0,0.5) 52%,
#FFF 53%,
rgba(0,0,0,0.3) 80%,
rgba(0,0,0,0) 100%
);
color:transparent;
text-shadow:none;
}
We end up taking it to the next level.



One interesting thing about linear-gradient with background-clip:text is that your last two breakpoints -- which at 0deg is the top -- is used at the top of every bar. See the light line that's not at the proper gradient point? It makes a really good lighting effect.

There are other properties too that can be of use. You can add an outline to a font with    -webkit-text-stroke for example. Despite being non-standards track and being -webkit prefixed, it actually works in current FF, Chrome-likes, even Edge.

Just beware that these do NOT work in any version of Internet Explorer, so either plan to code around that, or just say to blazes with IE. I was a holdout on IE support for a long time, and still try to maintain workable pages back to IE10... but at this point if the logo is screwed up in browsers that are now decade old rot, OH FREAKING WELL.