Toluu : CSS Juice

CSS Juice

CSS Juice is a design weblog that aims to inspire creativity by sharing innovative resources and websites to bloggers, freelancers and web designers.

Have you ever seen a lot of information in a table on the web and wish that you can highlight just one row of that table? Looking very large tables, with out the ability to interact with the table, can make it hard to read the information provided. With a little bit of CSS and the hover and first-child pseudo classes, you can make tables interactive again. You visitors can read information from the table quicker, and it gives your tables a little Web 2.0 flare. Best of all it is easier then you think.

First, lets make a table with some information. In our table we are going to use the population and percentage of the population for Lexington, Kentucky. This information is coming from the 2000 census.

<table>
<tr>
<th>Age Group</th>
<th>Population</th>
<th>Percentage</th>
</tr>
<tr>
<td>0 - 5</td>
<td>16146</td>
<td>6.2%</td>
</tr>
<tr>
<td>5 - 9 </td>
<td>15711</td>
<td>6.03%</td>
</tr>

ClickHeatOctober 22

On CSSJuice, we cover a lot of design ideas. We talk about how to make Web 2.0 effects using just CSS. Having an attractive website is very nice, but how do you know if your site’s layout is working? You can have a survey on your site. This can be effective, but are there other methods? Yes, there are other methods that can be more effective. ClickHeat is one of those methods. Unlike surveys, with ClickHeat the user does not have the option to not use it.

So what is ClickHeat? Well ClickHeat is a small PHP and JavaScript web app that tracks where visitors click on your website. Then ClickHeat allows the collected stats to be shown as a heatmap. For those of you who don’t know, a heatmap is a map that shows areas based on activity using colors based on heat. If an activity happens in a given area very often the color area is red, if it is not then that area is blue. In between there are yellows, green and orange colors based on how often an activity happens. With ClickHeat, the heatmap is based off of how often a user clicks in areas on your site.

ClickHeat is very easy to use. After the installation, which is a wizard based installation like other popular web applications, you go to yourdomain.com/clickheat, then log in. At this point you will have a screen that is split into two areas. At the top is your navigation, where you can choose to look at the heatmap fo

Cheat SheetsSeptember 11

Are cheat sheets beneficial to you designers? So people will say no, while others may say yes. As a designer should you use cheat sheets?

After finding an article about cheat sheets, I got to thinking, are there any negative effects of using cheat sheets? Of course the first one that I thought of was that as a designer you should really learn the syntax of the language you are designing/coding with. Cheat sheets can become a crutch which in the long run may hurt you as a designer. Another negative effect of using a cheat sheet is security issues. When using languages such as PHP, ASP, and other web based languages a cheat sheet does not provide any information on how secure the syntax is list is. It can provide information on how secure it is via a ranking system, but that does not show you how much damage can happen if exploited.

Using a cheat sheet is does have it’s benefits. There are parts of languages that are not used a lot, for example opacity in CSS. This can be a very useful attribute if you need to use it. For attributes that you don’t use a whole lot cheat sheets can be very beneficial. They can help you save time when you are looking for a solution to an issue you may have. Other times, it helps to have cheat sheets that will tell you what browsers support what elements of languages. Not all browsers are alike,

Basic Select Menus ModificationsSeptember 5

Select menus, also known as drop down menus, are one of the elements in HTML that most people don’t modify at all. I know that some select menus can be confusing as they get longer. One of the things that I like to do is to alternate the colors of the selections. This gives the select element a little bit of style especially when you have more then one choice showing, and can be use as color combination to blend into your site’s theme.

This modification is very simple, and can be very effective. We are going to apply this to a select element that has more then one option showing to take advantage of the effect. If you only have one option showing, as in a true drop down menu, then the change is not as effective. If you don’t remember how to show more then one option in a select element, just add a size attribute inside the select element’s opening tags. Here is how the select element should appear.

<select size=”4″>
<option class=”odd”>Option 1</option>
<option class=”even”>Option 2</option>
<option class=”odd”>Option 3</option>
<option class=”even”>Option 4</option>
<option class=”odd”>Option 5</option>
<option class=”even”>Option 6</option>
</select>

The code should look similar to you if you have used the select tag before, only thing that we have done to this HTM

Firebug alternativesAugust 25

Most designers have heard about Firebug for Firefox. But what is you are a designer that does not use Firefox, are there any alternatives for Internet Explorer or Opera? Well there are alternatives for each.

Internet Explorer

If you are a designer that likes using Internet Explore, or like a lot of designers you are forced to design for IE since a large amount of web surfers still use it. There are a lot of alternative for Firebug. The Microsoft Developer Network has a blog entry just for such tools. Like most products for anything created by Windows, some of the tools do cost money, but Microsoft has created a similar tool that you can use. The Internet Explorer Developer Toolbar allows you to much of the same things that Firebug does also. Here is a list of things you can use the Internet Explorer Developer Toolbar for according to the download site:

Explore and modify the document object model (DOM) of a Web page.
Locate and select specific elements on a Web page through a variety of techniques.
Selectively disable Internet Explorer settings.
View HTML object class names, ID’s, and details such as link paths, tab index values, an