All the Cool Kids Use Transparency, Right?

markgritter(59)

Published in

#programming

Words

154

Reading

1 min

Listen

Play

I experimented with styling my word search app to have a large background image behind all the other UI elements:

I was trying for "scrabble tile color" but I fear that the result is very hard on the eyes.

It's a little better to move the words closer together so the background no longer shows through:

But probably having the background also be words is just a dead end.

To get the words to have a solid background that doesn't extend the whole width of the column, I had to put each word in its own span. The list item gets the margin to control the spacing and a transparent background. The span gets padding to put some solid color around each word (and a white border to provide some separation from the background image.) Putting the margin on the span instead doesn't do anything.

li.word {
    background-color: rgba( 255, 255, 255, 0.0 );
    box-sizing: border-box;
    margin: 3px;
}

span.word {
    font-family: monospace;
    font-size: 16px;
    color: black;
    background-color: #D1B994; 
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}