How can I recreate the text effect in the image below, including shadows and borders using HTML5, CSS3, and Google Text API (if needed)?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
How can I recreate the text effect in the image below, including shadows and borders using HTML5, CSS3, and Google Text API (if needed)?
There are many ways to recreate the graphic. You could absolutely position the elements, or you could let the elements flow into place nicely.
For the latter, which I prefer, you need a container for the image (as background), a container to hold the text (which will have a semi-transparent background) and then the text itself, broken up into inline/inline-block elements so you can style each.
Here’s how I would do it using inline-block to layout the text appropriately and changing the fonts/font-sizes/padding for each text element (including google text API):
JS Fiddle: http://jsfiddle.net/rgthree/v6h2g/
Obviously, I didn’t try to mach the font itself.