Posts Tagged ‘css’

3 Beautiful CSS Effects With Tutorials And Source Files By Dragon Labs

May 19th, 2009 No comments

Dragon Labs is featuring 3 beautiful CSS / JavaScript effects that you may want to use in your websites. Here they are:

Codename Rainbows

A solution to create rainbow effects by not using any images.

It is accomplished with the help of some JavaScript and CSS magic to apply a two-color gradient to any text. Shadows and highlights can also be applied.



Codename Putterfish

This is a CSS trick, specially used in menus, that fades any other elements when one of the items is hovered.

Codename DragonFish

It is technique to smoothly change colors and create ambient motion. A nice demo is presented here.

P.S. Rainbow & Putterfish are well-described & source files are offered. On the other hand, DragonFish, currently, only comes with the demo.

GridView Plugin For JQuery

May 7th, 2009 No comments

There are many times when I am writing an application I need to display data in a table. Most of the time a simple HTML table styled with CSS is all that I need but occasionally I want a bit more. Today we’ll look at designing a plugin for jQuery that will add some advanced features such as row selection and sorting.

Design Goals

Starting out we are going to keep this pretty simple and as it progresses we’ll add more features.

For now we are going to start with a hand coded HTML table and CSS. In a later post we’ll look at populating the grid from a data source.

In this post today we’ll apply the CSS to the table but will expand this to a skinning system later on.

We’ll also be applying the row selection feature today.

Starting Point

Let’s use a simple table as out starting point.

<table cellpadding="0" cellspacing="0" class="easygrid">
        <td>HR Manager</td>
        <td>Graphic Artist</td>
Basic Style

Next we will apply some basic CSS to make our grid look nice.

body, table {
     font-family: verdana, arial, sans-serif;

table.easygrid {
     font-size: 11px;
     width: 600px;
     border-top: 1px solid #b8b8b8;
     border-left: 1px solid #b8b8b8;

table.easygrid th {
     text-align: left;
     padding: 5px;
     background: #424242;
     color: white;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;

table.easygrid td {
     padding: 5px;
     border-bottom: 1px solid #b8b8b8;
     border-right: 1px solid #b8b8b8;

table.easygrid td.alt {
     background: #f6f3f6;

table.easygrid td.selected {
     background: navy;
     color: white;
     font-weight: bold;
Building The Plugin

Here is the basic layout of our plugin. We’ll look at implementing those functions in a minute.

This is pretty simple so far. We have our default values, we merge the user passed options with the defaults, and then call two methods on each jQuery instance.

(function($) {
     $.fn.easygrid = function(options) {
         var defaults = {
             alternateBackground: true,
             allowRowSelect: true

         options = $.extend(defaults, options);

         return this.each(function(index, table) {
             setAlternateBackground($('tr:odd td', table), options.alternateBackground);
             rowSelection(table, options.allowRowSelect, options.alternateBackground);

Here is our setAlternateBackground method. Note we are passing all the odd rows found in the current table.

function setAlternateBackground(rows, alt) {
     if(alt == true) {
         rows.attr('class', this.className + ' alt');

This function appends the alt CSS class to each row if alternate row backgrounds is enabled.

The next function adds a click handler to each row to implement the row selection functionality.

function rowSelection(table, allowSelect, alt) {
     if(allowSelect == true) {
         $('tr', table).click(function() {
            //reset all rows
            $('tr', table).each(function() {
                $('td', this).each(function(index, cell) {
                    $(cell).attr('class', cell.className.replace(' selected'));

            //restore alt backgrounds
            setAlternateBackground($('tr:odd td', table), alt);

            //select this row
            $('td', this).attr('class', this.className + ' selected');

There is a little more involved with this function. If this feature is enabled we are adding a click handler to all the rows in the table.

First the click handler will clear any selected rows and reapply the alternate background colors. I am not sure why this gets lost.

Then, finally, the row that was clicked is selected by applying the selected CSS class to each cell of the row.

Categories: Programming Tags: , ,

Firefox support for CSS3 multiple backgrounds

March 24th, 2009 No comments



James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.





  1. background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);

  2. background-repeat: repeat-y;

  3. background-position: top left, top right;

Allow Users to Switch Page Layouts with jQuery & CSS

March 22nd, 2009 No comments

Soh Tanaka has shown us a quick and simple way to allow your users to switch page layouts by using CSS and jQuery on “Easy Display Switch with CSS and jQuery“. The technique is quite simple but the result is very nice and useful.

Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.



Categories: Programming Tags: , ,