CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: HTML/CSS Logo Generation  (Read 55 times)

Jason Knight

  • Administrator
  • Sr. Member
  • *****
  • Posts: 379
  • Karma: +51/-1
    • CutCodeDown -- Minimalist Semantic Markup
HTML/CSS Logo Generation
« on: 8 Jul 2020, 02:23:05 am »
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.
Sorrow hides well in your shell. A fellow man with hurt to spare.
Dear one, here I am to share the fear. An act of kindness, without an amen.
Come in, the fire's warm. Burn the rope and dance some more.

 

Advertisement