Colorful styled text in css only

HTML & CSS
1

Does anyone has idea or help on demo doing this in html + css only
sorry for laziness of not trying. but failed to figure out where to start

font2
font2183×310 30.5 KB

2

You could use an HTML table with gradient background and black cell borders, then set the background colour for each cell as necessary.

1 Like
3

I would suggest that you use the span element to contain
individual letters to achieve the effect in your example.

Alternatively you might consider using : linear-gradient
as in this example…

Full Page View
https://codepen.io/Snady_Leiby/full/qEEpLRq

Editor View
https://codepen.io/Snady_Leiby/pen/qEEpLRq

4

Just a quick search, but this font might be useful.

I think you may need Javascript to add the random colours. That would be done by wrapping span tags around the letters e.g.

<h1><span class='orangered'>M</span><span class='orange'>A</span>...</h1>

I am a bit short of time right now, so no Javascript in this example, but I think you would be aiming for something along the lines of this.
https://codepen.io/rpg2019/pen/dPPdbmQ

edit: Just a random thought, but can gradients be done in character widths(ch)?

3 Likes
5

thanks @rpg_digital

1 Like
6

Are those actual letters or boxes? It affects the solution.

If letters, here is a simple solution which colors each letter randomly. It uses a different font since I couldn’t find a boxed font quickly but it will give you an idea..

3 Likes
7

On a mono-spaced font you could do this:

3 Likes
8

For grins, I added the grid overlay to my example as well. Not as pretty since the font isn’t monospaced, but…

1 Like
9

That’s what I had in mind :slight_smile:

1 Like
10

Here is the start of the HTML table approach:

2 Likes
11

@Archibald 80s sprites come to mind :slight_smile:

2 Likes
12

@rpg_digital was thinking it looks rather like 80s videotex graphics.

1 Like
13

Couldn’t resist playing with @Archibald’s table cell approach.

I found this sprite maker. It took about 3 minutes to draw out the word ‘MAKE’ and it has the option to output a .c file which contains the sprite as an array of colours.

{ 0xffa37268, 0xff3636ec, 0xff3636ec, 0xffa37268, ... }

With ctrl-l select in vscode it was quite easy to replace the hex colours with colour ids

The following is the word ‘MAKE’ converted to colour ids e.g. 2 is ‘M’, 5 is ‘E’

[
    [1, 2, 2, 1, 2, 2, 0, 0, 3, 3, 0, 1, 4, 0, 1, 4, 1, 5, 5, 5], 
    [1, 2, 1, 2, 1, 2, 1, 3, 0, 1, 3, 1, 4, 0, 1, 4, 1, 5, 0, 0],
    [1, 2, 1, 2, 1, 2, 1, 3, 3, 3, 3, 1, 4, 4, 4, 0, 1, 5, 5, 5],
    [1, 2, 0, 0, 1, 2, 1, 3, 0, 1, 3, 1, 4, 0, 1, 4, 1, 5, 0, 0], 
    [1, 2, 0, 0, 1, 2, 1, 3, 0, 1, 3, 1, 4, 0, 1, 4, 1, 5, 5, 5]
]

Then a bit of JS to convert that to table rows

function makeRowFromColourIds(colourRowIds) {
  const row = document.createElement("tr");

  for (const colourId of colourRowIds) {
    const cell = document.createElement(`td`);
    /* ignore 0 background colours */
    if (colourId > 0) cell.className = `color-${colourId}`;
    row.appendChild(cell);
  }
  return row;
}

function makeRowsFromColourIds(spriteColourIds) {
  const spriteRows = document.createDocumentFragment();
  
  for (const colourRowIds of spriteColourIds) {
    spriteRows.appendChild(makeRowFromColourIds(colourRowIds));
  }
  return spriteRows;
}

function drawSprite(tableId, spriteColourIds = []) {
  const spriteRows = makeRowsFromColourIds(spriteColourIds);
  document.getElementById(tableId)?.replaceChildren(spriteRows);
}

window.addEventListener("DOMContentLoaded", () => {
  drawSprite("sprite", spriteColours);
});

Example here:

Just a bit of fun for Friday :slight_smile:

BTW I did spend a part of the 80s drawing out kung-fu characters on graph paper, converting the rows from binary into sprite data. A bit of a trip down memory lane.

2 Likes
14

I like it :slight_smile:

I think your font approach was the simplest though. :wink:

1 Like
15

Absolutely, just having some fun :biggrin:

1 Like