Design the Code

Create a modern gallery using z-index and jQuery

schoey — Thu, 01 Apr 2010 11:42:53 +0000

Introduction

In this tutorial we want to create a unique picture gallery utilizing the CSS property z-index. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position to the first. All done just by altering the z-index, of course with a animation to underline the imagination to have a pile of pictures.

Preparing the xHTML, CSS and Pictures

xHTML



  
    
    
    
    
    
  

  
    « Previous Picture
  
  
    Next Picture »

We have the wrapping container gallery, a container pictures for the pictures and two controls prev and next for swapping the pictures.

We can add as many pictures as we want because our script will pick them up dynamically.

If the class names of the DIV’s don’t look fimilar to you, they are from the 960 Grid System and just there to positioning the blocks. They don’t affect the jQuery code or the functionality of our gallery in any way.

CSS

/* relevant for the tutorial - start */
#gallery { position: relative; }
  #pictures { position: relative; height: 408px; }
  #pictures img { position: absolute; top: 0; left: 0; }

  #prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }
/* relevant for the tutorial - end */

The pictures container has relative position (under the heading) and a height of one picture. The img’s inside of the pictures container have absolute position. As they are all have a top and left of zero they overlap each other. The last picture (5) in the markup is on top, and the first (1) is on last position.

Pictures

In the example we use PNG’s, they all are transparent and have the same height and width. To create the effect of a pile of pictures each picture has a smooth drop-shadow and is gently rotated in different directions. I did that manually with Photoshop. If you want to do it programmatically then server side Image Magick may help or you have a look at Canvas (which is pretty fun by the way!).

The principle of changing z-index

The z-index will represent the position of a picture, 1 is the last position and 5 (since we have 5 example pictures) is the top position.

In the next picture action we want to put the first picture to the last postion, means set z-index to 1. All other pictures’ z-index need to be increased by one. Former second picture (4) will become the top picture and so on.

In the previous picture action we want to put the last picture, means z-index 1, to the first position 5. All other pictures’ z-index need to be decreased by one. Former top picture (5) will be put on position 4 and so on.

The Code

$(document).ready(function() { //perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in a animation

  $('#pictures img').each(function() { //set the initial z-index's
    z++; //at the end we have the highest z-index value stored in the z variable
    $(this).css('z-index', z); //apply increased z-index to 
  });

  function swapFirstLast(isFirst) {
    if(inAnimation) return false; //if already swapping pictures just return
    else inAnimation = true; //set the flag that we process a image

    var processZindex, direction, newZindex, inDeCrease; //change for previous or next image

    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

    $('#pictures img').each(function() { //process each image
      if($(this).css('z-index') == processZindex) { //if its the image we need to process
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
          $(this).css('z-index', newZindex) //set new z-index
            .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
              inAnimation = false; //reset the flag
            });
        });
      } else { //not the image we need to process, only in/de-crease z-index
        $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
        });
      }
    });

    return false; //don't follow the clicked link
  }

  $('#next a').click(function() {
    return swapFirstLast(true); //swap first image to last position
  });

  $('#prev a').click(function() {
    return swapFirstLast(false); //swap last image to first position
  });
});

Let’s break that small script into pieces of interest.

$('#pictures img').each(function() { //set the initial z-index's
  z++; //at the end we have the highest z-index value stored in the z variable
  $(this).css('z-index', z); //apply increased z-index to 
});

We haven’t set the initial z-index in the markup nor the CSS. To have a starting point we set the z-index’s via jQuery. The order is just as in the markup. After finishing looping through all img in the pictures container we also have the number of pictures and highest z-index value in the variable z.

function swapFirstLast(isFirst) {

We use the same function for the previous and next action as they are doing basically the same thing.

if(inAnimation) return false; //if already swapping pictures just return
else inAnimation = true; //set the flag that we process a image

We only want to process one picture at a time. The inAnimation flag determines if we are in a process. If so we just return to the caller without doing anything, if not we set the flag and go on with the picture swapping.

var processZindex, direction, newZindex, inDeCrease; //change for previous or next image

if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

As we use one function for two processes we need to set some necessary variables. processZindex is the position we need to process, either the first position for the next picture or the last position for the previous picture. The direction is where a picture will animate while swapping, either above or under (-) the pile of pictures. The newZindex will be set to the picture we process, 1 for the last position and the highest z-index for the first position. Last but not least the variable inDeCrease tells if the rest of the pictures’ z-index will be increased (+1 position) or decreased (-1 position) by one.

$('#pictures img').each(function() { //process each image

We loop through all images to check the z-index and alter it.

if($(this).css('z-index') == processZindex) { //if its the image we need to process
  $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
    $(this).css('z-index', newZindex) //set new z-index
      .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
        inAnimation = false; //reset the flag
      });
  });
}

We check if it’s the image we need to process (either first or last position). If so we go on and animate the picture either above or under the rest of the pile of pictures. When finished with this we set the new z-index to the picture and animate it back in position. When finished and the picture is back in place we release the inAnimation flag.

else { //not the image we need to process, only in/de-crease z-index
  $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
    $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
  });
}

Here we bind the click event to the prev and next controls. We return the return value of our function which is always false. Returning false from that click event means we don’t follow the clicked link.

Conclusion

We created a nice looking gallery with just a few lines of code. Of course it could be extended with other features (randomness is pretty kewl: random picture control, slightly random positions each time…) but you get the idea of how to combine a CSS property and the power of jQuery. Feel free to change the code to your needs and be so kind to share it with us in the comments if you like. Every other comment is welcome as well.

View Demo on 610 Design

Source: 610design.com

A guide to CSS Opacity

schoey — Thu, 25 Mar 2010 08:37:05 +0000

CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers.

One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.

Old Opacity Settings

Here are the old opacity settings that were required for older versions of Firefox and Safari:

#myElement {
	-khtml-opacity: .5;
	-moz-opacity: 0.5;
}

The -khtml-opacity setting was for older versions of the webkit rendering engine, and was necessary in order to get older versions of Safari to work. This proprietary property is now obsolete and is no longer needed unless you know that you have a significant amount of web traffic coming from visitors using Safari 1.x., which is highly unlikely.

The next line uses the proprietary property -moz-opacity, which was aimed at very early versions of the Mozilla rendering engine, and dates back even to Netscape Navigator. Firefox stopped requiring the -moz-opacity property since Firefox 0.9. Firefox 3.5 (now using the Gecko engine) has dropped support for this property.

CSS Opacity in Firefox, Safari, Chrome, and Opera

Here is the simplest and most up to date syntax for CSS opacity in all current browsers except Internet Explorer:

#myElement {
	opacity: .7;
}

The syntax above will set an element to 70% opacity (or 30% transparency). A setting of opacity: 1 would make the element opaque, whereas a setting of opacity: 0 would make the element completely invisible. This is easy to remember if you keep in mind that the word “opacity” comes from the word “opaque”, which is the opposite of “transparent”. The lower the opacity (or “opaqueness”), the closer you’ll be to transparency.

The opacity property can be set to two decimal places, so a value of “.01″ would be different from a value of “.02″, although the visible difference would be very hard to notice. Generally, it’s best to stick to one decimal place, using values like “.3″ or “.7″.

CSS Opacity in Internet Explorer

As usual, Internet Explorer doesn’t play well with others, and since there are currently three different versions of Internet Explorer in common use, the transparency settings are different, and sometimes require additional CSS to get them to work.

#myElement {
	filter: alpha(opacity=40);
}

The above css uses the proprietary filter property to get transparency to work in Internet Explorer versions 6-8. There is one caveat for IE6 and IE7: In order for the transparency settings to take effect, the element in question needs to “have layout”. An element can be given layout using a number of CSS properties, including width and position. For details on the Microsoft-only hasLayout property, and how to trigger it, see this article.

Another way to set transparency via CSS in Internet Explorer 8 uses the following syntax (note the comments that indicate which versions):

#myElement {
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	/* first line works in IE6, IE7, and IE8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=4)";
	/*second line is IE8 only*/
}

(note that the second line defines opacity at “4″, but this is only to correct a problem with the code highlighter; the value should be “40″)

The first line will work in all currently-in-use versions of IE, and the second line works only in IE8. Notice the differences between the two lines: In line two, there is a -ms- prefix attached to the filter property, and there are quotations around the entire value declaration, both of which are necessary for that syntax to work.

To be honest, I really have no idea why you would even need either of the “progid” methods, since the filter property works on any element that has layout in all versions of IE using the syntax alpha(opacity=40), as shown in the first example in this section.

Setting and Changing CSS Opacity with JavaScript

You can access the CSS opacity property in JavaScript using the following syntax:

document.getElementById("myElement").style.opacity = ".4";
// for most browsers
document.getElementById("myElement").style.filter = "alpha(opacity=40)";
// for IE

The above lines of code could be used inside of a loop or other dynamic function that alter the values in an incrementing fashion. Of course, you would first identify the client capabilities using feature detection in order to decide which line of code to use.

Setting and Changing CSS Opacity with jQuery

Setting CSS opacity directly using jQuery is much more practical and easier to implement, because the code is exactly the same for all browsers, and you don’t have to worry about an element “having layout” in IE:

$("#myElement").css({ opacity: .4 });
// works in all browsers

You can also animate the opacity of an element using the following jQuery code:

$("#myElement").animate({
	opacity: .4
	}, 1000, function() {
	// Animation complete; works in all browsers
});

Whatever the opacity of the element is when the animation begins, it will animate until it reaches an opacity level of “.4″. The speed of the animation is set using the value “1000″, which is the duration of the animation in milliseconds. The final property listed is an optional callback function that will run some code when the animation is complete.

If the opacity of this element is already set to “.4″ in the CSS, then you won’t notice any difference when the animation runs, so the animated value has to be something significantly different.

Transparency Through RGBA

Another CSS3 technique that is supported by a few newer browsers (namely Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+) is setting opacity by means of an alpha channel in RGBA. Here is the syntax:

#rgba {
	background: rgba(98, 135, 167, .4);
}

In the above declaration, the background is given a color in RGB (the first three numbers), then an alpha setting is given last, to implement transparency on the given color. This alpha setting works the same way as the opacity property, with any number accepted from 0 to 1, up to two decimal places. The higher the number, the closer the color will be to full opacity (opaqueness).

Transparency Through HSLA

Similar to the previous declaration, CSS3 also allows the ability to set a color along with an alpha value using HSLA, which represents Hue, Saturation, Lightness, and Alpha. Here is an example of HSLA transparency:

#hsla {
	background: hsla(207, 38%, 47%, .4);
}

For a further explanation on HSLA colors, see this article on W3.org. As is the case with RGBA transparency, the last number represents the transparency setting, and works the same way as RGBA.

Effects on Validation of CSS

If you’re using any opacity settings in your CSS, your CSS code will not validate according to current W3C standards. Many developers are not as concerned about CSS validation as they are about HTML validation, but it’s something to keep in mind. This can be partially resolved for Microsoft-specific styles by placing them in separate stylesheets using conditional comments, but other browsers’ opacity styles (specifically the opacity property) would still be in your main stylesheet, causing validation errors.

The CSS opacity property is part of the CSS Color Module Level 3 (which is part of CSS3), and is (as of this writing) in the last call phase on the specification track, so although it is well supported, there is still some time before it is an official standard.

I hope I’ve covered the most important facts and code for cross-browser CSS opacity. If I’ve left out any important information, or made any errors, feel free to comment and I’ll gladly make any corrections or additions.

Resources

HTML5 & CSS3 Tools, Resources And Guides

schoey — Thu, 25 Mar 2010 07:00:32 +0000

HTML5 and CSS3 are bringing new features to us and in this article you’ll be able to find some great tools, cheat sheets and much more you could need to master these new features.

Maybe those new features aren’t yet supported fully, but it’s a very good thinking to learn new technologies now so you would be able to use them fully when they are supported. Be modern designer!

1. CSS3 Selectors Test

After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each selector to see the results, including a small example and explaination for each of tests.

2. CSS3 Please!

CSS3 Please!, produced by Paul Irish and Jonathon Neal, aims to simplify the design process by allowing designers to enter one value, and have this instantly synced and normalised for each vendor-specific prefix, with the corresponding code generated automatically.

3. CSS3 Generator

Allows you to create and costumize multiple CSS3 effects.

4. CSS3 Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

5. CSS3 Gradient Generator

The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS. CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.

6. Border Radius

Allows you to create rounded edge rectangles.

7. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

8. CSS3 Generator

This simple CSS generator helps you to understand capabilities of CSS3 introduced by WebKit.

9. CSS3 Previews

Many new CSS3 feature previews and demos.

10. CSS Template Layout Module

Learn about popular CSS3 modules and opportunities CSS3 offers.

11. 5 Techniques to Acquaint You With CSS 3

Learn some of the most popular new CSS3 features.

12. Web Browser CSS Support

This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers.

13. Font Drag

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. The app allows you to drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts into the webpage for an instant preview of how the font will be rendered in the browser, you can even edit the example text.

14. CSS3 Cheat Sheet

Downloadable PDF file containing complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

15. Sizzle

A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.

16. Web Designers’ Browser Support Checklist

Displays web browser support on HTML5 and CSS3.

17. CSS3 Color Names

CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

18. HTML5 Visual Cheat Sheet

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by Woork. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

19. HTML5 Demos And Previews

You can watch HTML5 demos, new features and check out browser support.

20. The Power Of HTML5 and CSS3

Article covering HTML5 and CSS3 combination advantages.

21. HTML5 Cheat Sheet

HTML5 features and useful info at one place.

22. HTML5 Gallery

A showcase of sites using HTML5 markup

Source: 1stwebdesigner

10 tips for front-end web developers

schoey — Tue, 16 Mar 2010 11:05:51 +0000

Explain which div you’re closing

Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost endless list of closing tags. In fact, many beginners think they just have to use divs instead of tables to produce quality code. Divs are cleaners than tables, but without proper code organization, it can be as (or even sometimes more) messy as table based code.

Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment every div tag you’re closing, as shown in the example below:

Use a CSS reset

Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might already know how useful a CSS reset it. Because by default, browsers don’t apply the same default styling to HTML elements, a CSS reset will ensure that all element have no particular style so you can define your own without the risk of many cross-browser rendering issues.

Source: http://meyerweb.com/eric/tools/css/reset/index.html

Don’t use @import

CSS files can be included using the @import directive. This can be useful when, for example, you want to include a stylesheet into another. Another common practice is to include CSS file in html documents using the following: