2:36 AM
Unknown
We all post images with in our posts, and
some times we need to label this images, but not all of us can use
graphic editors or don’t just have the time to do it, so we’ll learn in
this tutorial how to label our images using a small code with out using
any photo editing soft wares.
you can look at the following image to see how the label will look like,
If you checked the image and the text you’ll find that the text is
not a part of the the image but it added on the image as a second layer,
you can try to select it to make sure.
the code to do it is too easy but to use it you need to know
1. Image width and height in pixels.
2. Image Url ( Sample: http://www.ImageHostingSite.com/file/image.jpg)
Now when you going to write your post, you must notice that on the post writing window there are two modes, Compose and Edit Html.
Check the following image.
you’ll start write you post in Compose mode and once you want to add an image Labeled to your to your post you’ll change your posting mode to Edit Html.
And enter the next code,
and here is what you will need to change in the code,
width: Put your image width
height: Put your image width
background:url(Image URL Here) Put your image url without any spaces
color:#ffffff change the -ffffff- to your favorite color, you can get your color code from our html color code generator here
font-size:30px Change 30px to any size you want.
line-height:3em Your label position on the image, change 3, you can change it to 1 for the top or for 4 of more for the bottom
text-align:center you can move your text by changing center to left or right.
My Label Just enter your label here.
That’s it. now go back to Compose mode to continue your post,
Or if you need More Optimization We can add transparency effects to the label. by adding the next line to the code
We set the transparency to 75% you can change it too.
i with this tutorial can help you. and if you need any help, leave a comment here.
you can look at the following image to see how the label will look like,
My Label
you can try to select it to make sure.
the code to do it is too easy but to use it you need to know
1. Image width and height in pixels.
2. Image Url ( Sample: http://www.ImageHostingSite.com/file/image.jpg)
Now when you going to write your post, you must notice that on the post writing window there are two modes, Compose and Edit Html.
Check the following image.
 |
 |
And enter the next code,
My Label
And this code is the same one used here on this tutorial for the image sample.and here is what you will need to change in the code,
width: Put your image width
height: Put your image width
background:url(Image URL Here) Put your image url without any spaces
color:#ffffff change the -ffffff- to your favorite color, you can get your color code from our html color code generator here
font-size:30px Change 30px to any size you want.
line-height:3em Your label position on the image, change 3, you can change it to 1 for the top or for 4 of more for the bottom
text-align:center you can move your text by changing center to left or right.
My Label Just enter your label here.
That’s it. now go back to Compose mode to continue your post,
Or if you need More Optimization We can add transparency effects to the label. by adding the next line to the code
so the code will befilter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;
My Label
we’ll get the next result.My Label
i with this tutorial can help you. and if you need any help, leave a comment here.
Posted in: Labels
Posts
0 comments:
Post a Comment