Through The Lens

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

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!!

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

<input type=”button” class=”btn” />

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.

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; }

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) }

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

Damn!! I forgot that light meter..does that sound familiar.
A beautiful landscape is waiting in front of you to be clicked and you are left with your imagination on how to expose that frame.
Well..sunny 16 rule comes handy.

What is Sunny 16 Rule?

On a brightest sunny day the exposure is roughly equal to the reciprocal of your film speed or ISO setting (in case of digital slr) at f/16.

i.e. your shutter speed = (approx) film speed

so if you are loaded with a 100 ISO film then set your shutter speed to 125
and if you are loaded with a 200 ISO then your shutter speed would be 250 basically anything close to the ISO numbers.

Well, now what if it is not exactly that sunny.
Hmm..not to worry we can tweak this rule a bit to work for us.

If it’s slightly overcast then we need more light to expose so we open it up one stop (I mean the aperture) keeping the shutter speeds same as above.
so for 100 ISO film it would be shutter speed = 125 and aperture f/11.

If it’s slightly more than overcast then we shall open it up a little more..2 stops.
so we get for 100 ISO film, shutter speed = 125 and aperture f/8.0

and for the rest of the ISO’s you do the math.

Happy Clickin.

It always fascinates me to see night photographs of traffic esp. those long white and red streaks of light. I have seen many photographs of traffic at night, endless shuffling through those Nat Geo really charges up your gray cells. After being inspired enough I decided to see night life from a different perspective. Whenever I used to travel I was always able to spot a good “night” frame here and there..I guess it’s the warm glow of tungsten on peoples faces and buildings,gates,foodstalls, I guess it’s the fire that lights up in those narrow streets. There is a strange beauty in the night mesmerizing and calm.

After said all that I wanted some good memoirs of night life through my lens

Some points to consider while shooting traffic at night esp if you want those everlasting white/yellow/red streaks of lights, glittering street lamps..

What would you need:
1. A sturdy and flexible tripod.
2. A Shutter release OR IR remote control to release the shutter
3. A good wide angle lens with MF (Manual focus) option
4. Patience and Cool.

1. Setting your ISO
If you are using a Digital SLR then set your ISO to 100/200. I prefer these ISO levels as the color saturation is more and more detail is captured while exposing. If you are shooting with a film/slide then also make sure you have loaded the camera with a ISO 100/200 film. I suggest Fuji crystal for film users and Fuji Velvia 100/100F for slide users.
2. Apertue and Shutter Speed settings
a. Stoop the aperture down to anything above 18 (personally I like 22) this is to allow the light to gradually fill the frame as time passes by.. so you can capture even the most dimly lit areas…if exposed for a long enough time all the street lights will glitter like stars and this is also to avoid those bright blobs in your picture if you were shooting traffic travelling towards the direction of the frame with their head lights on

b. Change to MF (Manual Focus). Now compose your picture. It is better if you a still /stationary object in your frame like a lamp post, sign post, parked vehicle etc., and focus on that This gives the feeling of motion better.
c. Set your shutter speeds to anything above 15″ (secs) (personally I like the BULB setting). Why 15″ ? I’am assuming here that a vehicle would enter and pass the frame (when viewed through your viewfinder) in 15″. If you have continous traffic coming at irregular intervals then it is better to set your shutter to BULB.

Now once your ISO, aperture and shutter speed settings are done then release your shutter slowly using the shutter release…take a deep breath and leave the shutter release to avoid any camera shake.. after you are satisified that enough traffic has passed by then release the shutter back to normal.
During the whole process you can completley forget the cameras readings.

DO NOT compensate for exposure by taking the camera readings into consideration.
You can experiment with different combinations of aperture and shutter speed settings. Interesting shots can be taken by experimenting with different white balance settings. Also do try taking some shots in Black & White and am sure you will be pleased.
Here are some of the pictures I have taken during the last two years.