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=”https://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.
11 replies on “5 Cool CSS Hacks & Tricks”
excelent css tips but we want more 😛
Imagination is more important than knowledge-Einstein.
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>
U R GR8 😀
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!!!!!!
Nice work. Liked your tips. by changing property values, different exciting effects can be achieved.
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/.
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
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?
Nice hacks jai ! Though they sure seem a little tough to use . But let’s see ! 🙂
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 ^_^