WordPress Themes Blog Oh! Blog

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0

CSS Hacks

1. 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:

a.pushbut {
color:#26a;
display:block;
border:1px solid;
border-color:#aaa #000 #000 #aaa;
text-decoration:none;
width:8em; text-align:center;
height:2em; line-height:2em;
background:#fc0; font-weight:bold
}
a.pushbut:hover
{
color:#26a;
background:#ffd633;
position:relative;
top:1px;
left:1px;
border-color:#000 #aaa #aaa #000
}

^^These must be within <style> tag.
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:

<p><a href=”http://www.blogohblog.com/” onclick=”return false” onkeypress=”return false” title=”visit my blog” class=”pushbut”>Visit blogohblog</a></p>

In order to view how the above example looks, click here
To view the complete source of the above example, click here

2. CSS font shorthand notations

When styling fonts with CSS you may be doing like this:

font-family: Times New Roman,serif;
line-height: 1.3em;
font-weight: bold;
font-style: italic;
font-size: 0.9em;
font-variant: small-caps;

There’s no need to write all these because there is a short hand notation for font.It follows the syntax

font:size/line-height weight style variant family;

For example in the above case we can just write

font: 0.9em/1.3em bold italic small-caps Times New Roman, serif;

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-variant etc. then these values will automatically filled with default values

3. 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 ….

padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em;

More info about Box Model Hack can be found at http://tantek.com/CSS/Examples/boxmodelhack.html

4. 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:

txttrans
{
text-transform: uppercase
}

^^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:

<body>
<div class=”txttrans”>
This is a test..
</div>
</body>

Note that this will apply to all the text in the page including button text etc.,

5. Create a Hover Image Gallery

Want to create a web page like this using 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

<ul class=”hoverbox”>
<li>
<a href=”#”><img src=”img/
image01.jpg” alt=”description” /><img src=”img/image01.jpg” alt=”description” class=”preview” /></a>
</li>
<li>
<a href=”#”><img src=”img/image02.jpg” alt=”description” /><img src=”img/
image02.jpg” alt=”description” class=”preview” /></a>
</li>
</ul>

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.

Share on Facebook0Tweet about this on TwitterShare on Google+0Pin on Pinterest0Share on LinkedIn0
  1. huagong left a comment on March 29, 2016 at 10:43 pm |

    HG-TJ612 Two Components Six Axis Dispensing Robot
    Dalian Huagong Innovation Technology Co.is the professional manufacturer of filter,filter net sealing dispensing machine.
    Sealing dispensing machine can be perfect sealing according to the CAD graphic or graphics in the system, automatic foaming through chemical reactions, surface smooth, beautiful,
    strong resilience, waterproof, dustproof performance is good, the seal protection grade is high sealing strip, meanwhile can be firmly and artifacts adhesive.
    The sealing stirp has wide application. the following is the function
    1.To prevent the rain (water), dust, the pollution gas leaking.
    2.To prevent vibration, noise, heat into indoor
    3.Prevent the erosion of corrosive medium product components
    Application:
    Is mainly used for cabinets, distribution cabinets, explosion proof shell, low ark,
    automobiles, home appliances, lamps and lanterns, filters, etc. various sealing need products and parts.
    http://hgcx.cn/en/index.php?p=product_show&id=317&c_id=35&o_id=&lanmu=12

  2. Sarcina left a comment on September 14, 2011 at 7:43 am |

    excelent css tips but we want more 😛

  3. font styles left a comment on January 24, 2010 at 10:57 pm |

    Imagination is more important than knowledge-Einstein.

  4. Surya left a comment on March 20, 2009 at 8:11 am |

    Thanks Jai,
    Nice Hacks… I got one small issue with IE.
    Im trying to prepare an image gallery with some description, and this whole thing should have hyperlink….

    So I kep these two(image and text) inside a DIV, and given hyperlink for the DIV, The hyperlink on the block working fine for only text, not working on the image… that too in IE, its working fine in FF.

    Please suggest how to hack this!

    My Code:

    Untitled Document

    .boxs{
    width:350px;
    height:120px;
    border:1px solid #333;
    margin:opx;
    padding:0px;
    }

    .boxs ul{margin:0px; padding:0px;}

    .boxs li{
    list-style:none;
    clear:none;

    }

    .item{
    width:325px;
    height:120px;
    border:1px solid #ccc;
    margin:0px;
    padding:0px;
    }
    .item img{
    float:left;
    z-index:1000;
    cursor:crosshair;
    }

    .item .txt{

    }

    <ul>
    <li>
    <a href=”http://www.google.com”>
    <span class=”item”>
    <img src=”services.jpg” width=”100″ height=”80″/>
    <span class=”txt”>Testing</span>
    </span>
    </a>

    </li>
    </ul>

  5. Hussein Makki left a comment on August 11, 2008 at 11:46 am |

    U R GR8 😀

  6. need help left a comment on March 4, 2008 at 5:01 pm |

    how do u uset his codes and stuff ?? i just need a hack that i can c other players throw wall some one please help me!!!!!!

  7. Web Designer Group left a comment on February 21, 2008 at 2:32 am |

    Nice work. Liked your tips. by changing property values, different exciting effects can be achieved.

  8. Tanya left a comment on February 20, 2008 at 5:33 am |

    Sorry again, but I realized that it might be a good idea if I mention exactly what appears with questionmarks – these are the tags, the Headings of Categories in the sidebar /that is why they are in English now/ and the quotes that I wanted to place there /the plugin is removed now, because the words appeared with questionmarks/.

  9. Tanya left a comment on February 20, 2008 at 5:05 am |

    Hi Bob, sorry for the offtopic, but I have one question re themes.
    I am using your Simple-La-Bob theme and like it very much for its simplicity, but I have one problem: many words written in cyrillic letters /in Bulgarian language/ in the sidebar appear with question marks.

    Can this be fixed if it is a problem of the theme and not a problem in WP2.3.2?
    Thanks in advance

  10. kiro left a comment on February 18, 2008 at 7:54 pm |

    nice indeed. Should be excellent for SOHO web.
    By the way, have you receive my email?
    I haven’t receive the custom theme that i’ve won last christmas. Could you please send me?

  11. Daniel left a comment on February 17, 2008 at 9:34 pm |

    Nice hacks jai ! Though they sure seem a little tough to use . But let’s see ! 🙂

  12. BradBlogging.com – Increase Website Traffic With Easy To Follow Steps left a comment on February 17, 2008 at 5:51 pm |

    These are alright tips, but aren’t very practical for blogging use. Only one of these techniques have I seen being used in blogs.

    But then again, it never hurts to know ^_^

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  •   Let’s Talk

    "Thank you for visiting my website! In order to start a project with me, please send me information on your project so I can figure out how best to help you."

    "After your initial contact, I’ll schedule a quick one-on-one session via Skype to review the project and get to know you."
     Request a Quote
  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project