Thursday, 11 April 2013

How to - Create a Border Around Text With Many Customisations




This is a border around text.


This is going to be a fairly comprehensive post, covering all customisations available for text within a border.

Firstly... the code


<center>


<div style="width: 500px; border: 3px solid #353535; border-radius: 15px; box-shadow: 5px 5px 2.5px #000000; background-image: url(http://us.cdn2.123rf.com/168nwm/ihor_seamless/ihor_seamless0910/ihor_seamless091000020/5630012-seamless-grey-3d-piped-tile-pattern.jpg); background-color: #353535; padding: 10px;">

<font color="#ffffff"; face="arial"; size="6";>

<b><i>This is a <sup> border </sup> <sub> around </sub> text.</i></b>

</font>

</div>

</center> 


Ok, so lets start at the beginning. The RED piece of code listed above is the background, border and drop shadow.
Reading left to right, we will address each part and the customisation possibilities.

The code can be ignored until the section "width: 500px;" This specifies the width of the area itself, this can be increased and decreased as desired. For example width: 423px or 600px, px meaning pixels.

The next part of the code reads "border: 3px solid #353535;" This is the actual border around the area. The thickness of the border can be adjusted by either increasing or decreasing the "3px" by one or two pixels either way.

The word solid can be changed to either "dotted" "dashed" "outset" "inset" "grooved" "double" and "ridged", to change the style of border.

#353535 is the Hexadecimal Colour Code for the image border. You can either visit my post here regarding Hex Colour Codes or grab the code from your template designer, for a shade you have already incorporated into your blog design.

"border-radius: 15px;" is in direct reference to the curved edges of the area. be aware that this feature only works in some browsers. You can either increase or decrease the size of the curve by editing the "15px" to a slightly lower or slightly higher number.

"box-shadow: 5px 5px 2.5px #000000;" is in direct relation to the box shadow. If no box shadow is required, simply delete the line. Same goes with the border radius and border codes already covered. If these things are not required, simply delete the relevant section of code... where was I??? "The 5px 5px" figures are the thickness of the box shadow. Increase or decrease as desired. The 2.5px is the amount of blur. It can also be adjusted and even deleted if no blur is required (for a sharp edged shadow). The #000000code is another Hex code reference (black).

"background-image: url(http://us.cdn2.123rf.com/168nwm/ihor_seamless/ihor_seamless0910/ihor_seamless091000020/5630012-seamless-grey-3d-piped-tile-pattern.jpg);" is the piece of code which gives you a repeating background image. The best kind of image to use is of course smallish and seamless. Edit it here: "background-image: url(URL OF YOUR IMAGE HERE);". This part of the code can be removed if you want a background colour instead (covered next).

"background-color: #353535;" is in direct reference to a plain background colour of your choice. Please see the above comments and link regarding Hexadecimal colours. As also stated above, simply remove the background image piece of code and you will be left with this plain colour background.

"padding: 10px;", this is how far away from the border, your text is to stay. The more you write, the longer (or higher) your area will automatically become.



The green piece of code listed above is how you change the appearance of the text/font.

"font color="#ffffff";" is how, through a hexadecimal colour, you can choose the colour of your text. See above comments again, in relation to hexadecimal colours.

"face="arial";" is where you can choose your font. You can choose any of the blogger fonts (check what is available to you in your template designer) or standard web based fonts like Arial and Verdana. You simply change "arial" to "font name here"

"size="6";" this piece of code specifies the size of your text. A number from 1 to 7 that defines the size of the text. Browser default is 3.



The blue piece of code listed above is your actual text.

<b>....</b> makes the text bold, remove the <b> and </b> if you do not require bold text.

<i>....</i> makes the text italics, remove <i> and </i> if you do not require your text in italics.

This is a <sup> border </sup> <sub> around </sub> text. This is your text! Write as much as you want and your area height will increase as you go. The <sup>...</sup> code, makes anything written within these raise slightly above the other text (superscript). The <sub>....</sub> lowers any text slightly below the other text (subscript). If neither are required, simple remove these codes. Your text would then simply look like this, This is a border around text.

To use this within a post, paste the code in the HTML area where required in your post or as a JAVA/HTML gadget in your blog.

Hope this all makes sense, but if you have any questions at all, leave me a comment.

Thanks for tuning in!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me