CODEWITHSUNDEEP
htmlcsscolorsbackground-image
gsamaras
gsamaras

Reputation: 73366

Make text appear with green-white background

I have a football field, where I am going to allow the user to drag the player where he wants in the field. However, I can't find a way to make the name of the player clear, when on the field, as you can see in this JSFiddle.

My last attempt is this:

<p style="color: #3D59AB;">
    Philio
</p>

taken from here.

How to make the text appear nicely?

Upvotes: 0

Views: 220

Answers (2)

pool pro
pool pro

Reputation: 2104

You can use css and do the following with a text shadow.

p {
    padding: 120px;
    color: #EEEE00;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px #ff0000;
}

Fiddle

Upvotes: 1

Ben Kolya Mansley
Ben Kolya Mansley

Reputation: 1793

From my comment above, try wrapping the text in a <span> and styling that. A border helps to distinguish it from the pitch, and it looks a bit cleaner when curved.

Something like:

HTML: 

 <p>
     <span class="player">Philio</span>
 </p>

CSS:

body {
    background-image: url("http://p1.pichost.me/i/17/1401060.jpg");
}

p {
    padding: 120px;
}

.player {
    color: #000;
    background-color: rgba(40, 180, 40, 0.8);
    padding: 5px;
    border: 2px solid #000;
    border-radius: 50px;  // setting a border radius larger than 1/2 the height causes a rounded edge.
}

Of course you can play around with the values and colors, good luck :)

FIDDLE

http://jsfiddle.net/et2twvek/6/

Upvotes: 1

Related Questions