I have posted Making more professional blogger blogs before this. I suggest you to play with CSS because it is one of the cool stuff to make blog professional and well manage. And today I am sharing you some cool & good looking CSS hacks for your blog. It helps you to have more professional:) So, let's try it.
Create a stunning 3D push button
Nowadays, we can see 3d push buttons nearly everywhere. Most of them are achieved via JavaScript. The main problem of using these scripts is that there are greater chances that they might get blocked by the browser. And with the advent of many ad blockers it has become a serious drawback. In this situation, the CSS comes to rescue. Thought we can’t create 3d push buttons as professional as created by using JavaScript, we can create a basic 3d push button with the help of CSS.
The main CSS commands you’ll need are:
These must be within <style> tag. i.e. ]]></b:skin> tag Create a stunning 3D push button
Nowadays, we can see 3d push buttons nearly everywhere. Most of them are achieved via JavaScript. The main problem of using these scripts is that there are greater chances that they might get blocked by the browser. And with the advent of many ad blockers it has become a serious drawback. In this situation, the CSS comes to rescue. Thought we can’t create 3d push buttons as professional as created by using JavaScript, we can create a basic 3d push button with the help of CSS.
The main CSS commands you’ll need are:
Off course, you can change any settings you want like back color, alignment etc.
Now to create a button, we must specify the class object as push but within the <BODY> tag…that’s all
Ex:
To see the demo, click here
CSS font shorthand notations
When styling fonts with CSS you may be doing like this:
There’s no need to write all these because there is a short hand notation for font.It follows the syntax
For example in the above case we can just write
Note: This CSS shorthand font version will only work if you’re specifying both the font-size and also the font-family. Moreover, in case you don’t specify the font-weight, font-style, font-variantetc. then these values will automatically filled with default values
Box Model Hack
This will be specified in nearly every css hacks article that you would have come across. Well mine too is not an exception. The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on.
In order to overcome this, all we have to do is use these commands ….
More info about Box Model Hack can be found athttp://tantek.com/CSS/Examples/boxmodelhack.html
Text transformation commands in CSS
Many people are unaware of this command. The command can be used to transform all the text into either uppercase, lower case or capitalize (Each word in a text starts with a capital letter)
Usage is:
This must be included within the <STYLE> tag and you can change “txttrans” name and can use normal or lowercase if u want instead of uppercase
And now to use this just include <div class=”txttrans”> where u want to start the transformation of text within the <BODY> and off course </div> where you wish to end the transformation
Ex:
Note that this will apply to all the text in the page including button text etc.
Create A Hover Image Gallery
Want to create a web page like this using css ? If you hover mouse in the image with result you find picture zoom in. Absolutely it is the magic of CSS. All you have to do is to paste the following contents within the <STYLE> tag.
Download the Content file
Now to create a image gallery and its preview you have to include this in the <BODY> tag
In order to add more images you have to follow the same pattern….just change the image location in the img src option. That’s all. Your Hover image gallery is ready.
Note: To apply these CSS effects to your blogger blog, you have to insert CSS code above ]]></b:skin> tag.
And That's All. If you have some errors, share with me. I can help you :)
0 comments
Posts a comment