BlogmyQuery – BMQ

You have likely seen the term �progressive enhancement� quite a lot, especially if you�re a regular reader of this website. But do you understand exactly what it means, and do you try to apply it in every detail of your daily work?

If the answer is no, you�re far from alone. The last couple of years, with HTML5 (or more correctly parts of CSS3 and various JavaScript techniques) becoming the new Ajax, it seems that people are so eager to apply the shiny new front-end toys that they forget that the Web is supposed to be universal. And in doing so, many developers unfortunately forget about or ignore progressive enhancement.

One reason may be that there aren�t enough resources that explain progressive enhancement in a practical and easy-to-digest way. Luckily, Aaron Gustafson has written a book called Adaptive Web Design that does just that.

Read full post

Posted in (X)HTML, Accessibility, CSS, JavaScript, Reviews.

Copyright © Roger Johansson

With the wide variety of CSS3 and JavaScript techniques available today, it’s easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience.

In this article, we’ll walk through five interactive techniques that you can start using right now. We’ll cover:

1. Animated text effects,
2. Animated images without GIFs,
3. More engaging drop-down menus,
4. Fancier slideshow navigation,
5. Animated icons for the hover state of buttons.

Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

So, let’s dive in and start building more exciting websites!

1. Extruded Text Effect

The footer of David DeSandro’s website uses extruded text that animates on mouseover. This interactive text effect is a quick and impressive way to add some flare to your website. With only a few lines of CSS3, we can make the text appear to pop out of the page in three dimensions.

• View the demo

First let’s set up some text (the code is copied from the original site):

<span class="extruded">Extrude Me</span>

And some basic styling (the code is copied from the original site):

body {
    background-color: #444;
    text-align: center;
}

.extruded {
    color: #888;
    font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif;
    font-size: 48px;
    font-weight: bold;
    text-shadow: #000 3px 3px;
}

Here, we’ve applied some basic styles and added a text-shadow. But this text-shadow doesn’t look three-dimensional; to accomplish the extruded effect, we’ll need to add more text-shadows:

    text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;

This will add three different text-shadows to our text, stacked on top of each other to create the three dimensional appearance we want.

Styling the Hover State

Next, let’s add a hover state with a bigger text-shadow:

.extruded:hover {
    color: #FFF;
    text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
}

Here, we’ve added three more text-shadows to increase the depth of the extrude effect. But this effect alone is too flat; we want the text to look like it’s popping off the page. So, let’s reposition the text to make it appear to grow taller from the base of the extruded section:

.extruded {
    position: relative;
}

.extruded:hover {
    color: #FFF;
    text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
    left: -6px;
    top: -6px;
}

Now in the hover state, the extruded text moves up the same distance as our max text-shadow value. We also added position: relative, which must be attached to the base state, not just the hover state, or else it will cause problems when we animate it.

Animating the Transition

Next, we can add a CSS3 transition to our text to animate the color change and extrude effect:

.extruded {
     -moz-transition: all 0.3s ease-out; /* FF3.7+ */
       -o-transition: all 0.3s ease-out; /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
          transition: all 0.3s ease-out;
}

This triggers a smooth animation for our different CSS changes on hover. While it doesn’t work in all browsers, it does degrade nicely to the basic hover effect.

Bringing it all together:

body {
    background-color: #444;
    text-align: center;
}

.extruded {
    color: #888;
    font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif; /* the original site doesn't use the @font-face attribute */
    font-size: 48px;
    font-weight: bold;
    text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;
    position: relative;
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
       -o-transition: all 0.3s ease-out; /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
          transition: all 0.3s ease-out;
}

.extruded:hover {
    color: #FFF;
    text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
    left: -6px;
    top: -6px;
}

Shortcomings

While applying several CSS3 text-shadows works well when the text is static, it falls a bit short when used alongside the transition animation.

In short, the biggest text-shadow animates just fine, but the other text-shadows aren’t applied until the animation completes. This causes a quick correction: the browser stutters with a basic drop-shadow before filling in the rest diagonally.

Fortunately, we can make this drawback relatively unnoticeable, provided that we follow a few style guidelines. Basically, we want to hide the bulk of the extruded portion with the top text. This means that we should generally use this effect with bolder fonts, such as the Proxima Nova family used by David DeSandro. Also, we should be careful to avoid text-shadows that are too big for the font. Tweak your settings with this in mind until the animated extrude looks believable.

Finally, this technique will not work in IE, because text-shadow is unsupported in all versions of IE (even IE9).

• Download the complete example
• View the demo

2. Animating A Background Image

While we can easily animate text with a few lines of code, animating an image usually requires bigger and slower assets, such as animated GIFs or Flash or HTML5 video. While complex animations will still depend on these technologies, we can create a compelling illusion of animation using CSS alone.

Love Nonsense uses a hover effect to alter the color of the images on the website. The trick here is to use a transparent PNG with a background color. The color of the PNG should match the website’s background, so that all of the transparent areas in the PNG show up when filled with a background color. Thus, the PNG should contain the negative space of the image you want to display (i.e. the shape you want should be transparent, and everything else should be the same color as the background).

Here’s an example of the Smashing Magazine logo with negative space:

Notice in the demo how when the background color is set to orange, it starts to look more like the real thing.

The Code

• View the demo

First, let’s do some basic mark-up:

<div class="post-wrapper">
    <h2 class="post-title">
        This is the title you hover over

        <img src="knockout-image.png" class="post-image" alt="" />
    </h2>

    <p>Some more text here.</p>
</div>

Here we include a post with a title, our knock-out image and a paragraph of text.

Next, let’s set up some static styles:

.post-wrapper {
    position: relative;
    padding-left: 240px;
}

.post-image {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #bbb;
}

.post-title {
    color: #037072;
}

Here, we’ve set up the post’s wrapper with position: relative and with enough padding on the left side to absolutely position the image to the left of our post. We’ve also added a background color to our image; so now the positive space in our PNG shows up as light gray.

Next, let’s add some hover effects:

.post-title:hover {
    color: #d63c25;
}

.post-title:hover .post-image {
    background-color: #f04e36;
}

Now, when we hover over the title or the image, both will change color.

We can take this effect a step further by animating the transition:

.post-image {
    -webkit-transition: background-color 400ms ease-in;
    -moz-transition: background-color 400ms ease-in;
    transition: background-color 400ms ease-in;
}

.post-title {
    -webkit-transition: color 400ms ease-in;
    -moz-transition: color 400ms ease-in;
    transition: color 400ms ease-in;
}

Here, we’ve added a CSS3 transition to both the image and the title, which will make for a smooth color change animation.

Unfortunately, CSS3 transitions are not currently supported in IE9. However, even in unsupported browsers, the color change will still occur — it just won’t have a smooth animation.

If complete cross-browser support for the animation is important, you could always provide a jQuery version of the animation for unsupported browsers. Bear in mind, though, that jQuery’s animate() method does not support color animations, so you’ll need to use a color plug-in.

Putting all the CSS together:

.post-wrapper {
    position: relative;
    padding-left: 240px;
}

.post-image {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #bbb;
    -webkit-transition: background-color 400ms ease-in;
    -moz-transition: background-color 400ms ease-in;
    transition: background-color 400ms ease-in;
}

.post-title {
    color: #037072;
    -webkit-transition: color 400ms ease-in;
    -moz-transition: color 400ms ease-in;
    transition: color 400ms ease-in;
}

/* add the hover states */

.post-title:hover {
    color: #d63c25;
}

.post-title:hover .post-image {
    background-color: #f04e36;
}

• Download the complete example
• View the demo

3. Mega Dropdown

One common design problem with dropdown menus is that they often contain a lot of items. Instead of presenting all of its items in a long single column, Bohemia Design uses a multi-column dropdown. This approach not only looks great, but provides an opportunity to group the links and highlight the most important ones.

Let’s recreate this menu using CSS and jQuery.

• View the demo

Building the Tabs

Ideally, we would start with a lean and simple mark-up…

<nav>
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    <li><a href="#">Tab 5</a></li>
</nav>

…and use nav li a, nav > li or nav li to style the list items in the navigation. The child selector doesn’t work in IE6 and nav li would cause problems since there are additional LIs nested in the content area of the dropdown. If you absolutely need the site to work for IE6 users as well (and that’s what you sometimes will have to do), you’ll need to have markup similar to the original mark-up in this example:

<ul id="main-nav">
    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Tab 1</a>
    </li>

    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Tab 2</a>
    </li>

    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Tab 3</a>
    </li>

    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Tab 4</a>
    </li>

    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Tab 5</a>
    </li>
</ul>

Next, let’s style these five tabs:

#main-nav {
    width: 800px;
    height: 50px;
    position: relative;
    list-style: none;
    padding: 0;
}

#main-nav .main-nav-item {
    display: inline;
}

#main-nav .main-nav-tab {
    float: left;
    width: 140px;
    height: 30px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    font-size: 18px;
}

Although a lot of the CSS is specific to our example, there are a few important styles to note.

First, we’ve defined a height and width for our overall tab area and matched the total height and width of all five tabs, so that we can position the dropdown correctly. Next, we’ve defined position: relative for the tab wrapper, which will allow us to position the dropdown absolutely.

Then, we added list-style: none to the list wrapper, and display: inline to each list item, to eliminate any list styling.

Finally, we floated all of the tab links to the left.

Building the Dropdown

Now, let’s build the dropdown mark-up in one of our tab wrappers:

    <li class="main-nav-item">
        <a href="#" class="main-nav-tab">Tab 1</a>

        <div class="main-nav-dd">
            <div class="main-nav-dd-column">
            Column content here
            </div>
        </div>

        <div class="main-nav-dd">
            <div class="main-nav-dd-column">
            Column content here
            </div>
        </div>

        <div class="main-nav-dd">
            <div class="main-nav-dd-column">
            Column content here
            </div>
        </div>
    </li>

Next, let’s style this dropdown:

#main-nav .main-nav-dd {
    position: absolute;
    top: 50px;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    border-bottom: 4px solid #f60;
}

#main-nav .main-nav-dd-column {
    width: 130px;
    padding: 15px 20px 8px;
    display: table-cell;
    border-left: 1px solid #ddd;
    *float: left;
    *border-left: 0;
}

#main-nav .main-nav-dd-column:first-child {
    border-left: 0;
}

Here, we’ve positioned the dropdown absolutely, directly beneath the first tab.

Let’s set display: table-cell on all of the column wrappers, so that they display next to each other. But table-cell is not supported in IE6 or 7, so we’ve used an attribute hack as an alternative for IE6 and 7. This hack places an asterisk (*) before each of the attributes that are specific to IE6 and 7.

Thus, we’ve defined a backup for unsupported IEs, which is simply float: left. This works almost as well as display: table-cell, except that the floated elements don’t match each other’s height, so the borders between columns don’t line up. To avoid this minor issue, we simply remove the border-left using the same asterisk hack.

Finally, we remove the left border from the first column for all browsers. Although the :first-child pseudo-class doesn’t work properly in IE6, fortunately it doesn’t make a difference, because we’ve already hidden the borders in these browsers.

Adding the Interaction

We’ve built the mark-up and styles for our dropdown, but we still need to make the menu interactive. Let’s use jQuery to add a class to show and hide the dropdown:

$(function() {
    var $mainNav = $('#main-nav');

    $mainNav.children('.main-nav-item').hover(function(ev) {
        // show the dropdown
        $(this).addClass('main-nav-item-active');
    }, function(ev) {
        // hide the dropdown
        $(this).removeClass('main-nav-item-active');
    });
});

Here, we’ve attached a hover listener to each list item, which adds and removes the class main-nav-item-active. Attach this to the list item rather than the tab itself, or else the dropdown will disappear when the user mouses off the tab and into the dropdown area.

Now we can use this class hook to hide and show the dropdown with CSS:

#main-nav .main-nav-dd {
    display: none;
}

#main-nav .main-nav-item-active .main-nav-dd {
    display: block;
}

Let’s use the active class to style the active tab:

#main-nav .main-nav-item-active .main-nav-tab {
    background-color: #FFF;
    color: #f60;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

Here, we’ve changed the background and text colors and rounded the top corners (in supported browsers).

Positioning the Dropdown

Now the basic mouse interaction has been built and the dropdown displays on mouseover. Unfortunately, it is still not positioned correctly under each tab, so let’s add some more code to our hover events:

$(function() {
    var $mainNav = $('#main-nav');

    $mainNav.children('.main-nav-item').hover(function(ev) {
        var $this = $(this),
        $dd = $this.find('.main-nav-dd');

        // get the left position of this tab
        var leftPos = $this.find('.main-nav-tab').position().left;

        // position the dropdown

        $dd.css('left', leftPos);

        // show the dropdown
        $this.addClass('main-nav-item-active');
    }, function(ev) {

        // hide the dropdown
        $(this).removeClass('main-nav-item-active');
    });
});

Here, we use jQuery’s position() method to get the left offset from the current tab. We then use this value to position the dropdown directly beneath the appropriate tab.

However, with the tabs on the right side, the dropdown menu will end up poking out of the tab area. Besides looking bad, this could lead to overflow issues, with portions of the dropdown falling outside of the browser window.

Let’s fix the positioning with some JavaScript:

$(function() {
    var $mainNav = $('#main-nav'),
    navWidth = $mainNav.width();

    $mainNav.children('.main-nav-item').hover(function(ev) {
        var $this = $(this),
        $dd = $this.find('.main-nav-dd');

        // get the left position of this tab
        var leftPos = $this.find('.main-nav-tab').position().left;

        // get the width of the dropdown
        var ddWidth = $dd.width(),
        leftMax = navWidth - ddWidth;

        // position the dropdown
        $dd.css('left', Math.min(leftPos, leftMax) );

        // show the dropdown
        $this.addClass('main-nav-item-active');
    }, function(ev) {

        // hide the dropdown
        $(this).removeClass('main-nav-item-active');
    });
});

Here, we start by finding the overall width of the tab area. Because recalculating the width for each tab is not necessary, we can define it outside of our hover listener.

Next, we find the width of the dropdown and determine the maximum left value, which is the overall tab width minus the width of the dropdown.

Finally, instead of always positioning the dropdown directly beneath the tab, we use the Math.min() method to pick the lowest between the tab offset and the maximum left value.

Thus, we confine the dropdown to the area beneath the tabs and avoid any content issues.

Other Approaches

While this script is fully functional, we could still improve the user experience. Currently, when the user mouses away from the dropdown, the menu hides immediately. You could build a delay using setTimeout() to ensure that the dropdown remains visible when the user mouses away and then quickly mouses back. This creates a better experience, because it avoids hiding the dropdown during accidental movements.

If you’d rather avoid setTimeout(), you could also look into the hoverIntent jQuery plug-in, which makes fine-tuned control over mouse actions much easier.

Besides improving the user experience, you could also avoid jQuery altogether in all browsers except IE6.

Instead of using jQuery’s hover() listener, we could use the CSS pseudo-class :hover to hide and show the dropdown.

One downside with the CSS-only solution is that you can’t build a delay for the :hover pseudo-class.

Also, you will have to position the dropdown manually under each tab to avoid the overflow issues. Alternatively, if you aren’t concerned with overflow issues, you could attach position: relative to each list item and avoid setting any positions manually.

Finally, if you’re supporting IE6, make sure to include the script above as a backup for IE6 (but don’t include it for other browsers).

• Download the complete example
• View the demo

4. Animated Slideshow Navigation

There are a lot of JavaScript slideshow techniques, but the animated navigation on McKinney is a fresh, subtle approach.

Basic jQuery Slideshow

• View the demo

Let’s build something similar. We’ll start with some mark-up for a basic slideshow:

<div id="slideshow">
    <div id="slideshow-reel">
        <div class="slide">
            <h1>Slide 1</h1>
        </div>

        <div class="slide">
            <h1>Slide 2</h1>
        </div>

        <div class="slide">
            <h1>Slide 3</h1>
        </div>

        <div class="slide">
            <h1>Slide 4</h1>
        </div>

        <div class="slide">
            <h1>Slide 5</h1>
        </div>

        <div class="slide">
            <h1>Slide 6</h1>
        </div>
    </div>
</div>

Here we’ve set up six slides, which can be filled with any content we need. Let’s set up some CSS to display the slides as a horizontal reel:

#slideshow {
    width: 900px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#slideshow-reel {
    width: 5400px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}

#slideshow-reel .slide {
    width: 900px;
    height: 450px;
    float: left;
    background-color: gray;
}

Here, we’ve defined the dimensions of the slideshow, along with overflow: hidden to hide the other slides in the reel. We’ve also defined the dimensions of the reel: with six slides at 900 pixels each, it is 5400 pixels wide. (You could also just set this to a really high number, like 10000 pixels.) Then, we absolutely positioned the reel inside the slideshow (which has position: relative). Finally, we defined the dimensions for all of the individual slides and floated them to the left to fill up our reel.

Basic Slideshow Animation

Now, let’s add some jQuery to animate this slideshow:

$(function() {
    function changeSlide( newSlide ) {
        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1;

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});

Here, we’ve started by creating the function changeSlide(), which animates the slide reel. This function accepts an index for the next slide to show, and it checks to make sure that the value isn't too high or low to be in the reel.

Next, it animates the slide reel to the appropriate position, and then finishes by setting a new timeout to trigger the next iteration.

Finally, we’ve built the function nextSlide(), which simply triggers changeSlide() to show the next slide in the reel. This simple function is just a shortcut to be used with setTimeout().

The Left and Right Navigation

Next, let's set up the left and right arrows in the slideshow, starting with the mark-up:

    <a href="#" id="slideshow-prev"></a>
    <a href="#" id="slideshow-next"></a>

For simplicity's sake, we've added the mark-up to the HTML source. Appending it to the jQuery is often a better approach, to ensure that the controls appear only when they are usable.

Let's style these arrows with CSS:

#slideshow-prev, #slideshow-next {
    display: block;
    position: absolute;
    top: 190px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 28px 21px;
    border-color: transparent;
    outline: none;
}

#slideshow-prev:hover, #slideshow-next:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#slideshow-prev {
    left: 0;
    border-right-color: #fff;
}

#slideshow-next {
    right: 0;
    border-left-color: #fff;
}

We’ve positioned the arrows absolutely within the slideshow frame and added an opacity change on hover. In our example, we’ve used a CSS triangle trick to style the arrows with straight CSS, but feel free to use an image if you want richer graphics.

Finally, let's build the required interaction into our JavaScript:

$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNexNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});

Here, we've added quite a bit of new interaction. First, look at the bottom of this script, where we've added click event listeners to both of our navigational items.

In these functions, we have first set activeSlideshow to false, which disables the automatic animation of the reel. This provides a better user experience by allowing the user to control the reel manually. Then, we trigger either the previous or next slide using changeSlide(). Next, in the changeSlide() function, we've added a clearTimeout(). This works in conjunction with the activeSlideshow value, cancelling any hanging iteration from a setTimeout.

Finally, in the callback of the animate() function, we've added some code to hide and show the arrow navigation. This hides the left arrow when the slideshow is showing the left-most slide, and vice versa.

Animating the Bottom Navigation

The basic slideshow works with the previous and next arrows. Let's take it to the next level by adding the animated navigation. Please note that I am using a more complex markup because it avoids the use of images and is ultimately simpler. It would have to use three background images otherwise — one for the center sections and one for each cap to allow the clickable areas to be larger). However, you could clean up the bottom navigation with a background-image.

Here is the jQuery code for animation:

$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNextNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next'),
    $activeNavItem = $slideshow.find('#active-nav-item');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // main navigation
    $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( $(this).index() );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});

We've added a couple of things to our script.

First, we've included a second animation in changeSlide(), this time to animate the active indicator in the navigation. This animate() is basically the same as the one we built for the reel, the main difference being that we want to move it only 150px per slide.

Finally, we added a click event listener to the items in the bottom navigation. Similar to the arrow navigation, we start by disabling the automatic animation, setting activeSlideshow to false. Next, we trigger changeSlide(), passing in the index of whichever slide was clicked, which is easy to determine using jQuery's index() method.

Now the slideshow navigation animation is complete and ready to impress your visitors.

• Download the complete example
• View the demo

5. Animated Icons

CSS-Tricks has a simple but elegant effect in its footer when the user mouses over various buttons. Besides the color changing and an icon being added, the effect is animated in browsers that support transition, making the icon appear to slide into place.

• View the demo

Let's create a similar effect, starting with some mark-up:

<a href="#" class="hover-panel">
    <h3>Panel Title</h3>

    <p>Additional information about the panel goes in a paragraph here</p>
</a>

One thing to note about this mark-up is that it has block elements nested in an <a> element, which makes sense semantically, but it's valid only if you're using the HTML5 doc type.

Styling the Buttons

Let's set up some basic CSS to style the block in its natural (non-hovered) state:

.hover-panel {
    background-color: #E6E2DF;
    color: #B2AAA4;
    float: left;
    height: 130px;
    width: 262px;
    margin: 0 10px 10px 0;
    padding: 15px;
}

.hover-panel h3 {
    font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
    font-size: 38px;
    line-height: 1;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.hover-panel p {
    font-size: 12px;
    width: 65%;
}

Now let's add a static hover effect to change some of the colors and add a drop shadow:

.hover-panel:hover {
    background-color: #237ABE;
}

.hover-panel:hover h3 {
    color: #FFF;
    text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}

.hover-panel:hover p {
    color: #FFF:
}

Finally, let's add a background image that pops into place on hover:

.hover-panel {
    background-image: url(hover-panel-icon.png);
    background-position: 292px 10px;
    background-repeat: no-repeat;
}

.hover-panel:hover {
    background-position: 180px 10px;
}

Here, we've added a few important styles to accomplish the hover effect. First, we've attached the background image to our .hover-panel. This is normally positioned outside of the button, but on mouseover, it is placed correctly. Also, note that we've placed it off to the right side of the panel, so that when we apply the transition animation, the icon will slide in from the right.

Animating the Transition

Finally, let's add the transition:

.hover-panel {
     -moz-transition: all 0.2s ease; /* FF3.7+ */
       -o-transition: all 0.2s ease; /* Opera 10.5 */
  -webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
          transition: all 0.2s ease;
}

The transition effect triggers the animation of the background image. Because we've flagged it to apply to all attributes, the transition will also be applied to the background-color change that we applied above.

Although this works in most modern browsers, it will not work in IE9. But even in unsupported browsers, the user will see the color change and icon; they just won't see the animation effect.

On most websites, this enhancement wouldn't be necessary for all users. But if support is a priority, look into this jQuery back-up.

Finally, let's bring all of the styles together:

.hover-panel {
    background-color: #E6E2DF;
    background-image: url(hover-panel-icon.png);
    background-position: 292px 10px;
    background-repeat: no-repeat;
    color: #B2AAA4;
    display: block;
    float: left;
    height: 130px;
    width: 262px;
    margin: 0 10px 10px 0;
    padding: 15px;
     -moz-transition: all 0.2s ease; /* FF3.7+ */
       -o-transition: all 0.2s ease; /* Opera 10.5 */
  -webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
          transition: all 0.2s ease;
}

.hover-panel h3 {
    font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
    font-size: 38px;
    line-height: 1;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.hover-panel p {
    font-size: 12px;
    width: 65%;
}

.hover-panel:hover {
    background-color: #237ABE;
    background-position: 180px 10px;
}

.hover-panel:hover h3 {
    color: #FFF;
    text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}

.hover-panel:hover p {
    color: #FFF:
}

• Download the complete example
• View the demo

Final Thoughts

In this article, we've walked through a variety of interactive techniques that can add a bit of style and creativity to your website. Used correctly, techniques like these enhance websites, creating a more engaging and memorable user experience. But be subtle with the interactivity, ensuring that the bells and whistles do not get in the way of the website's primary function, which is to providing meaningful content.

What do you think of the techniques presented here? Do you know of any ways to improve these scripts? What are some other interactive techniques that you've seen around the Web?

(al)

---

© Jon Raasch for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, jQuery

Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do. Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things.

Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.

HTML and CSS Tools

HTML Email Boilerplate
This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. It also provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

Initializr
This tool creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs. You’ll get a template based on key features of Boilerplate to start your next project. You might want to check out The HTML5 Framework Generator as well.

Layer Styles
A nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. The tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.

Mobile Boilerplate
A template that creates rich and performant mobile Web apps. You can get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

Kotatsu
A simple HTML table generator that helps you create a table and throw in row as well as column classes quickly and easily. And if you want a quick tool to generate lists, you might want to take a look at li maker.

Zen Coding
Zen Coding is an editor plugin for high-speed coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions (similar to CSS selectors) into HTML code.

Vogue
This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm.

LiveReload
LiveReload applies CSS/JS changes to Safari or Chrome without reloading the page and reloads the page automatically once the HTML changes. Alternatively, take a look at Live.js, a library that makes sure that you’re always looking at the latest version of the page you’re working on, whether you are writing HTML, CSS or JavaScript.

css-x-fire
This tool allows editing CSS properties in the IDE from Firebug CSS editor and also allows the developer to concentrate on CSS styling without having to refresh the browser.

Ffffallback
A bookmarklet that lets you test different font stacks to find the best result. It bascially scans the page’s CSS and creates a clone page where you can test and analyze different fallback fonts.

LESS.app for Mac OS X
LESS extends CSS with variables, nested rules and operators. This app makes it very simple to use {Less} by automatically compiling *.less files into standard CSS.

Less-Boilerplate
Boilerplate CSS is written in Less and includes a CSS reset, CSS3 helpers, centered column blocks, and much more.

Needle v0.1a1
Needle is a handy tool you can use to test whether your CSS renders correctly by taking screenshots of portions of a website and comparing them with other screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.

inuit.css
A CSS framework that provides you with the best dev tips, tricks and practices in one handy file.

Spritemapper
This application merges multiple images into one and generates CSS positioning for the corresponding slices; by reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.

CSSsitemap System
David Leggett shares with us the code for a CSS-based sitemap that Andrew Maier and himself have created and are still working on. A set of tools for project documentation & UX designers is also coming up soon.

CSS Stress Testing and Performance Profiling
Andy Edinborough shares the code he uses for his so-called ‘CSS Stress Test’ for almost all browsers.

Normalize.css
Normalize.css takes a slightly different approach to CSS resets. Rather than eliminating all browser defaults, Jonathan Neal and Nicolas Gallagher have taken the time to research how different browsers handle different bits of code and then kept the defaults that are useful. It saves you time as a designer, while also providing consistent results.

Holmes
The tool is a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page within your browser.

CSS Crush
A CSS pre-processor that is familiar, convenient, intuitive, and much more — everything Pete Boere wants a pre-processor to be.

CSSPrefixer
CSSPrefixer helps you improve your workflow and saves you a lot of time while inserting all of the necessary CSS prefixes for various browsers.

iOS Media Query Previewer
A very simple tool to preview how a particular website looks on an iPhone as well as iPad.

CSS Pivot
Here you can add CSS styles to any website and share the result with a short, handy link.

PCSS
A PHP-driven CSS preprocessor that helps you unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. The tool requires PHP5.

JavaScript Tools

Modernizr 2
Modernizr is a widely used open-source JavaScript library that helps you build HTML5 and CSS3-powered websites. With the second version of the tool, you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance. Developed by Paul Irish, Faruk AteÅŸ and Alex Sexton.

yepnope.js
A conditional loader for your polyfills that is very fast and allows you to load only the scripts that your users actually need.

FitText
FitText is a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. A good solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display.

jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Plugin Boilerplate
This boilerplate implements public and private methods, as well as public and private properties, making it very easy when building both simple and complex jQuery plugins.

ligature-js
This Java script lets you convert text patterns into common typographic ligatures by going through the text on a web page and inserting ligatures where appropriate.

Placeholder jQuery Plugin/Polyfill
This jQuery plugin provides support for the new placeholder="" HTML5 form attribute in browsers that don’t natively support it (IE et al).

StronglyTyped
A JS library that allows you to specify strongly typed properties of various types (Boolean, Number, String, etc.) and constants (final properties in Java). It uses ES5 getters and setters and falls back to regular, loosely typed properties in non-supporting browsers.

Kaffeine
A set of extensions to the JavaScript syntax that attempts to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input.

Crossroads.js
A JS routing library inspired by URL Route/Dispatch utilities which are present on frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses a string input and decides which action should be executed by matching the string against multiple patterns.

Doctor JS
Doctor JS analyzes your JavaScript code and provides you with a complete analysis in JSON, whether you’re dealing with polymorphism, prototypes, exceptions or callbacks. Tell Doctor JS about it:

HEAD.js
A script that speeds up, simplifies and modernizes your site — a concise solution to universal issues. You can load scripts like images as well as use HTML5 and CSS3 safely.

Hivelogic
Posting your email address on a website is an easy way to get an inbox full of spam. This anti-spam email address enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. An alternative, more robust solution is Mollom.

JavaScript Garden
A JS project that offers advice on avoiding common mistakes and subtle bugs, and lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language.

Syntaclet
By clicking on the Syntaclet bookmarklet, you can automatically see all language specific syntax colored with line numbers to all the code on the page.

Bookmarkleter
This tool creates bookmarklets from JavaScript code. It removes new lines, tabs, and optional spaces, URL-encodes special ASCII characters and places code in a wrapper function (if not done already).

Bookmarklet Crunchinator
This great tool helps you quickly create a bookmarklet from any JavaScript code and will automatically be wrapped in a function to make it bookmarklet-friendly.

Grids

The JavaScript Grid
A JavaScript-based grid overlay — just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.

Grid Calculator
A calculator that helps you easily create your own grid and download it for either Adobe Illustrator or Photoshop.

GridCalc
This easy-to-use grid calculator lets you download a configuration as a CSS file which you can use in your project by simply entering the desired width of your page and an aproximate range for your column and gutter width. The calculator then gives you all the possible combinations within the limits you entered and provides you with a nice visual representation of the results and how the grid can be used.

Modular Grid Pattern
This tool enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too.

Susy
A Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want.

Griddle.it
A clean and simple way to help you align your layouts. All you need to do is put your dimensions after the URL provided to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Last Click

ASCII Pronunciation Rules for Programmers
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? This article gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding.

Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.

From Me To You
No, this has nothing to do with CSS, HTML or JavaScript, but it is just remarkable. On his photography blog, Jamir collects scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs. Pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality.

Related Articles

You might want to take a look at our previous related articles:

• Powerful New CSS Techniques and Tools (April 2011)
• Useful JavaScript and jQuery Tools, Libraries, Plugins (April 2011)
• CSS: Innovative Techniques and Practical Solutions (February 2011)
• Time-Saving and Educational Resources for Web Designers (January 2011)

(vf) (il)

---

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: CSS, HTML, JavaScript, libraries

Reading Ethan Marcotte’s book Responsive Web Design was a strange experience in some ways. While much of the techniques and philosophies described in the book are familiar to me, reading about everything from flexible design to mobile first with media queries carefully distilled into one book was something of a revelation that brought back feelings from over a decade ago.

Ethan opens the book with this:

As I begin writing this book, I realize I can’t guarantee you’ll read these words on a printed page, holding a tiny paperback in your hands. Maybe you’re sitting at your desk with an electronic copy of the book up on your screen. Perhaps you’re on your morning commute, tapping through pages on your phone, or swiping along on a tablet. Or maybe you don’t even see these words as I do: maybe your computer is simply reading this book aloud.

Ultimately, I know so little about you. I don’t know how you’re reading this. I can’t.

Read full post

Posted in Accessibility, CSS, Reviews.

Copyright © Roger Johansson

In a recent project I needed to add a button to a column on the page. The design called for the button to be centered in the column. This turned out to be slightly less straightforward than I initially thought.

Centering elements is normally taken care of by giving them a width and auto for horizontal margins. In this case I didn’t want to set a width on the button since the site will be available in several different languages, so the amount of text on the button will differ.

My first thought was to just avoid setting a width since form controls are replaced elements and have an intrinsic width anyway once rendered by the browser, so I might be able to get away with this:

.button {
    display:block;
    margin:0 auto;
}

Read full post

Posted in Browsers, CSS.

Copyright © Roger Johansson