Posts Tagged ‘Web Design’
5 Cool CSS Hacks & Tricks
Written by Jai on February 17, 2008 – 2:15 pm - 3,783 views
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:
<font color="#0000ff"><code>a.pushbut {</code></font><font color="#0000ff"> </font><font color="#0000ff">color:#26a;</font><font color="#0000ff"> </font><font color="#0000ff">display:block; </font><font color="#0000ff">border:1px solid; </font><font color="#0000ff">border-color:#aaa #000 #000 #aaa; </font><font color="#0000ff">text-decoration:none;</font><font color="#0000ff"> </font><font color="#0000ff">width:8em; text-align:center;</font><font color="#0000ff"> </font><font color="#0000ff">height:2em; line-height:2em;</font><font color="#0000ff"> </font><font color="#0000ff">background:#fc0; font-weight:bold</font><font color="#0000ff"> </font><font color="#0000ff">}</font><font color="#0000ff">a.pushbut:hover</font><font color="#0000ff"> </font><font color="#0000ff">{</font><font color="#0000ff"> </font><font color="#0000ff">color:#26a;</font><font color="#0000ff"> </font><font color="#0000ff">background:#ffd633;</font><font color="#0000ff"> </font><font color="#0000ff">position:relative;</font><font color="#0000ff"> </font><font color="#0000ff">top:1px;</font><font color="#0000ff"> </font><font color="#0000ff">left:1px;</font><font color="#0000ff"> </font><font color="#0000ff">border-color:#000 #aaa #aaa #000 </font><font color="#0000ff">}</font>
^^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
If you enjoyed this post, make sure you subscribe to my RSS feed!Remembering those First Pages
Written by Jai on December 7, 2007 – 10:05 pm - 1,314 views
I started out with web designing about six years ago and today I was thinking about the initial web pages that I had built. Yes, they looked crappy and were hosted on free sites like Tripod, Geocities and are no more there. But they still have that sentimental feeling and I feel warm inside when I recall all that hard work (supposed to be) that I put in making them. I still remember that one of the few pages that I had built was for my dog when it died and that was on Yahoo Geocities. In all these years, I have learned a lot but I still cherish those old times when I was struggling to learn new things. Recently, I left my full-time job to pursue my online career, so that shows how much I love it now.
There are people who are starting out with their web design careers so I would like to tell them that “Old is really really gold”. So, if you have any such experience, share with me here… and also leave your comments.
If you enjoyed this post, make sure you subscribe to my RSS feed!
