CSS Mania

Highlight images on mouse over using Opacity

praveenc — Thu, 19 Oct 2006 16:09:22 +0000

Sometimes you might want to blur (reduce the opacity) an image on default and bring it back to being opaque on mouse over. You can use this effect to keep the users focus on your content rather than those links bar on the top of the page: for e.g. you can make your full menu bar with links less opaque or more transparent by default and highlight them on mouse over.
So how do we acheive this? Very simple the answer to this is to use the “opacity” property.

Opacity property can have the following values: 0.0 to 1.0 any values outside this range will be clamped into this.

Opacity: 1.0 means that the element is 100% Opaque or in other words 0% transparent.
Opacity: 0.0 means that the element is 100% transparent or in other words 0% opaque.

according to W3C this is how opacity should be defined opacity: 0.5

But Mozilla and IE had their own ways of implementing this

IE wants this for opacity to work filter:alpha(opacity=50)

and Mozilla wanted this -moz-opacity: 0.5

but newer versions of Mozilla doesn’t require this (I haven’t tested this but you can check it yourself by applying this style)

opacity.css

body{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
background-color: #FFF;
color: #eee;
}

a.myopacity img{
border: none;
padding: 3px;
filter:alpha(opacity=45);
-moz-opacity: 0.45;
opacity: 0.45;
}

a.myopacity:hover img{
border: 1px dotted #000;
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}

The result

or you can see this here in action

http://www.praveenc.com/gallery.html

and by the way I forgot to mention that opacity can be applied to all elements.

Means you can apply this to text blocks, div’s, images, hyperlinks..or whatever you like. So go ahead and freak out.

Good day people!!!

Styling tables using CSS

praveenc — Fri, 06 Oct 2006 09:39:24 +0000

It can be difficult to ensure that you remain on a particular row as your eyes work across a large data table. Displaying table rows in alternating colors is a common way to help users identify which row they’re focused on. Whether you’re adding rows by hand, or you’re displaying the data from a database, you can use CSS classes to create this effect.

However, there are two ways of implementing this:

1. Display alternate rows by default with an alternating color OR

2. Change row colors dynamically on mouse-over or on hovering the table rows.

I prefer the 2nd option as it is easier to maintain the color scheme in blend with the color scheme of the whole page.

This is how we will implement this

Step 1: Define styles for the table

I shall declare a class called mytable and shall define a style for my table in general
.mytable{
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #D6DDE6;
border-collapse: collapse;
width: 50%;
}

Step 2: Define styles for the header row

.mytable th {
border: 1px solid #828282;
background-color: #515151;
color: #66FF33;
font-weight: bold;
text-align: left;
padding: 4px;
}

Step 3: Define styles for the table cells

by default all cells will be applied with a dotted border and will be padded with 4px of space

.mytable td{
border: 1px dotted #aaa;
padding: 4px;
}

for some special cells I would like to change the text color to something bright so that it stands out, for which I define another style

.mytable td.alt{
background-color: transparent;
color: #00FFCC;
}

Step 4: Define styles while a mouse is hovered over a row

.mytable tr:hover{
background-color:#aaa;
color: #fff;
}

and presto we have a style definitions for a table that changes color on mouse hover and the result looks something like this

you can copy all the above defined styles into a CSS file and link the stylesheet to your HTML document to acheive at the above result.

Hope this was helpful

CSS Links and resources

praveenc — Fri, 06 Oct 2006 03:46:33 +0000

I thought I would share with you guys some interesting links where you can witness web 2.0 in action.

CSS designs on display here: http://www.cssmania.com, http://www.cssbeauty.com, http://www.cssvault.com, http://www.webcreme.com

You can read some how to’s and the latest happenings here.

http://veerle.duoh.com/index.php, http://www.24ways.org, http://www.csszengarden.com

and you can catch some examples with source here

http://www.cssplay.co.uk

good day guys!!

Validating your CSS

praveenc — Mon, 02 Oct 2006 05:38:56 +0000

Some Web designers regard a Web page that validates under both HTML and CSS guidelines as the Holy Grail. I prefer to think of validation as an extremely useful tool, but not a religion. CSS validation, however, is suited perfectly for debugging your code. CSS validators can catch those unclosed curly braces and other typos easily.

Numerous CSS validation services are available. I use the one from the W3C located at http://jigsaw.w3.org/css-validator/.

you can also validate your HTML here: http://validator.w3.org/

How do I make a submit button look like text?

praveenc — Sun, 01 Oct 2006 13:06:24 +0000

When you design pages that look like wizards and when the information you are gathering flows over into multiple pages you might want to give your user a feel of filling a page in which case you would want to display your NEXT buttons as text.

Actually it is very simple our task is now to style the button so that it looks like text here is how we define the style

.btn { background-color: transparent; border: 0; padding: 0;}

now you can apply this style to the button you wish by calling the pseudo-class by name like

Styling Hyperlinks: Change colors on mouseover

praveenc — Sun, 01 Oct 2006 05:29:31 +0000

Styling hyperlinks could be used effectively to replace the old style navigation buttons.To create this effect we style the :hover and :active pseudo-classes of the anchor tag. Am gonna define style separatley one for the :link and :visited styles and other for :hover and :active

Personally I like the hyperlinks to appear in a contrasting color to the page background by default, with a dotted underline, and on hover I would like to change the text-color so that it appears highlighted.

CSS code:

body{
background-color: #171717;
}

a:link, a:visited{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
text-decoration: none;
border-bottom: 1px dotted #eee;
background-color: transparent;
color:#fff;
}

a:hover, a:active{
font-family: “Trebuchet MS”,Trebuchet,Verdana,Sans-Serif;
text-decoration: none;
border-bottom: 1px dotted #eee;
background-color: transparent;
color:#4eb5e1;
}

and the html looks like this

and on mouse over the links looks like this.

How do I display a list horizontally?

praveenc — Sat, 30 Sep 2006 15:51:02 +0000

you can use the display property set to inline on the list item.

you can use the following line into your .css file to display list items horizontally

ul li{ display: inline; }

How do I use an Image for a list item?

praveenc — Sat, 30 Sep 2006 15:45:21 +0000

You can use the list-style-image property instead of list-style-type for your bullets.This property accepts a URL, which incorporates the path to your image file as a value.

ul{ list-style-image: url(bullet.gif) }

How do I get rid of the large gap between h1 tag and the following paragraph

praveenc — Sat, 30 Sep 2006 15:24:49 +0000

By default, browsers render a gap between heading and paragraph tags. This is
produced by a default top and bottom margin that browsers apply to these tags.
To remove all space between a heading and the paragraph that follows it, you
must not only remove the bottom margin from the heading, but also the top
margin from the paragraph. But since it can be inconvenient to target the first
paragraph following a heading with a CSS selector, it’s easier to simply assign a
negative bottom margin to the heading. Margins can be set to negative values,
though padding cannot.

h1 {
font: 10px Georgia;
margin-bottom: -10px;
}

try this to get rid of the large gap