Posts Tagged ‘CSS’
Nifty Rounded Edges Using Only CSS
Written by Jai on May 10, 2008 – 1:25 pm - 1,673 viewsIf you have a Google Analytics account, you must have seen that Google uses slightly rounded edges in the menu buttons on the left. See the picture below :-
Today, I will teach you how to give these nifty little rounded edges to your menu. Given below is the CSS code. This goes into the head section of your HTML file. :-
CSS
<style>
ul {
width:180px;
list-style-type:none;
margin:0 auto;
padding:0;
}
li a {
display:block;
position:relative;
border-width:1px 0;
border-color:#ccc;
border-style:solid;
color:#555;
text-decoration:none;
margin:4px 1px;
}
li a span {
display:block;
position:relative;
margin:0 -1px;
border-width:0 1px;
border-color:#ccc;
border-style:solid;
background-color:#eee;
padding:2px 6px;
}
li a:hover {
border-color:#aaa;
color:#333;
}
li a:hover span {
border-color:#aaa;
background-color:#ddd;
}
</style>
If you enjoyed this post, make sure you subscribe to my RSS feed!Understanding Floats in CSS - Making a 3-column layout
Written by Jai on April 11, 2008 – 2:41 pm - 2,764 views
Sharing knowledge is cool and if your audience is willing to learn - its Uber cool! 
With that note, here is my little contribution towards the code monkeys.
This article is meant for the people who are beginners or are in the mid-way of learning CSS (Cascading Style Sheets). When I started learning CSS, the most difficult problem that I faced was using floats and how to align and position the divisions (DIVs) in a page.
In a pure CSS based design, the formula for coding your layout lies in the fact, as to how best you can position your DIV tags. In this article, I will try and give you a better understanding of using the float property of CSS to position your elements.
Let us assume that we want to create a 3-column layout for our new WordPress theme. I am taking up this example because many people do not understand how to do this and have asked me questions in the past about this technique. In this tutorial, I am assuming that you know the basics of HTML. Read more »
If you enjoyed this post, make sure you subscribe to my RSS feed!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!
