Thursday, 11 April 2013

How to - Give your text a shadow 3D effect!


This is text with a dark grey shadow!


This one involves adding a little CSS to your blogs fundamental code so before going any further, please view my post on backing up your blogs template here, just in case you change anything you shouldn't, you can restore your blog to its previous perfection! It's a really quick post and an even quicker process.

Now... down to business.

This is the magic piece of CSS which makes it all happen.


<style>
p.shadow {text-shadow:-2px 2px 1px red;}
</style>

You can change some of the look of your shadow, by editing the following:
Where the code above reads "-2px", remove the - symbol to change the direction of your shadow, from the left side of your text to the right.

Where to code reads "2px", change this to "-2px" for the shadow to move from below the text to above.

Where the code reads "red", change this to any of the basic colours like black, white yellow green blur grey purple orange, or enter a hex colour code instead. See my post here regarding Hex colour codes. An example hex code is #ffffff (white). This will now be the colour of your shadow.

Once you have styled the shadow the way you want it, go to your blogs home page. From here, drop down to TEMPLATE then EDIT HTML (after backing up your blog as above). Now use ctrl F to find </head>. paste your styled code directly above this closing head tag.

It is now ready to be called on to give a shadow to your chosen text.




Now on to the simpler styling of what you want to write.

Here is the HTML code for entering some text with your shadow:

<p class="shadow"><font size="6" color="black">
Write anything here, this is your text with a red shadow!
</font></p>

The class="shadow" portion of the above code is what "calls" your shadow into play.


font size="6" specifies the size of your font. you can enter a number from 1-7 here, the default browser size is 3.

color="black" specifies the colour of your text, if you would like it to be your blogs default colour, simply remove this piece of code. Alternatively, you can edit it as I have mentioned above in relation to the shadow colour.

Change the text to whatever you want it to read, and you are ready to upload it!






Adding it to a post...

You need to place the code into the HTML view of your blog post and update it/publish it from there, or it will not work.



Adding it as a new gadget/widget:

Go to LAYOUT → ADD GADGET → HTML/JAVASCRIPT

Then paste your text code into the content field, click save and you have it!



That's it folks, if you have any questions at all please comment.

Cheers

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me