CODEWITHSUNDEEP
css
kacalapy
kacalapy

Reputation: 10134

CSS to mark up text to look like the sample provided?

I have seen css that can make text look like an image in the past. I am not a front end developer so my CSS is very rusty...

I am trying to use a DIV tag and markup the text in each div tag to look like the image samples below. notice there is a space between each letter.

if there is a WHYSIWYG CSS editor online that allows for this type of formatting that would be a great resource to have.

EDIT: The hardest part for me is getting a blue square around the first letter!!!

enter image description here

Upvotes: 1

Views: 464

Answers (4)

Dev
Dev

Reputation: 791

Try this I have done this using first-ltter psuedo element jsFiddle. W3Schools on this element here

Upvotes: 1

anothershrubery
anothershrubery

Reputation: 21003

Very quickly, something like this?

http://jsfiddle.net/eW532/

EDIT: Misread...You're talking about the spacing.

EDIT again: http://jsfiddle.net/eW532/1/

Upvotes: 3

Barrie Reader
Barrie Reader

Reputation: 10713

you could use the css rule: letter-spacing: 1px; or something, there are more in-depth solutions that require different languages though.

Upvotes: 0

user527892
user527892

Reputation:

Looks like you need the CSS letter-spacing property: http://www.w3schools.com/css/pr_text_letter-spacing.asp

Upvotes: 0

Related Questions