The idea of creating responsive websites for real world business websites raises a few questions. The main question many designers and developers had (including myself) was “What about image galleries and sliders?”. Most websites have moved away from Flash in the last few years, many Flash animations being replaced by jQuery sliders. So how do you deal with a slider when developing a responsive website? Until now that left most people scratching their heads, but recently there have been some great responsive image sliders, galleries and plugins released.. so let me introduce my roundup of the 10 best responsive image sliders and galleries you can use on your website today(in no special order).. enjoy!

1. FlexSlider

2. Blueberry

3. Responsive Image Gallery

4. Responsive jQuery Slideshow

5. UnoSlider

6. Elastislide

7. Photoswipe

8. Responsive jQuery Carousel

9. Seamless Responsive Photo Grid

10. responsive thumbnail image gallery plugin

The Idea

What I decided to create was a transparent image overlay when hovered on. So when you hover over the image you would see a magnifying glass icon over a transparent black background. This would make it easy for the user to see where they are on the page. Another reason this method is better than simply changing the border color is that the magnifying glass gives an indication that the image will zoom in or expand when clicked on. I’ve create two ways of accomplishing this effect, one used jQuery, and the other uses only CSS3.

The Solution

Both methods use similar techniques, the only difference is weather they use jQuery or CSS for fading the opcaity. There is an image wrapped in a link. Inside of this link there is a span element. By setting the span to display block, setting the width and height of the span, and setting a higher z-index than the image; the span element covers the image. By setting the background image and color the span element hides the original image. Setting the opacity to zero on the span element allows the thumbnail image to be seen. To create the overlay effect we simply change the opacity of the span element to 70% (or whatever you want to use for your project). One method uses jQuery to apply this opacity, the other method uses CSS3 transitions and opacity settings.

Check out the demo, and grab the free download.

jQuery Method

The jQuery method is cross browser safe, and unlike the CSS3 method fades the magnifying glass both in AND out. This method uses jQuery to set the opacity of the span element when hovered over. Here is the HTML for this method:

<a class="image"  href="#">
	<span class="roll" ></span>
	<img class="imgborder" alt="" src="images/pic.jpg">
</a>

Here is the CSS for this method:

span.roll {
	background:url(images/mag.png) center center no-repeat #000;
	height: 346px;
	position: absolute;
	width: 347px;
	z-index: 10;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px  #000;
	box-shadow: 0px 0px 4px  #000;
}

And the jQuery:

$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0");

// ON MOUSE OVER
$(".roll").hover(function () {

// SET OPACITY TO 70%
$(this).stop().animate({
opacity: .7
}, "slow");
},

// ON MOUSE OUT
function () {

// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});

CSS3 Method

With the increasing support for CSS3 in modern browsers I just had to try this method using CSS3 opacity and transitions. Here’s the HTML for the CSS (no javascript used) method:

<a class="image"  href="#">
	<span class="rollover" ></span>
	<img class="imgborder" alt="" src="images/pic2.jpg">
</a>

Here’s the CSS, where all the magic happens:

span.rollover {
	opacity: 1;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	background:url(images/mag.png) center center no-repeat #000;
	cursor: pointer;
	height: 346px;
	width: 347px;
	position: absolute;
	z-index: 10;
	opacity: 0;
}

span.rollover:hover {
	opacity: .7;
	-o-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-webkit-transition: -webkit-transform 1s;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}

Credits:
jQuery Fade Script
Magnifying Glass Image

Here’s the CSS used for the Post-it in the demo (which is a div with class “post-it”).

.post-it {
background:#fefabc;
padding:15px;
font-family: 'Gloria Hallelujah', cursive;
font-size:15px;
color: #000;
width:200px; 

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-o-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);

box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;

}

You can customize your CSS Post-it note by changing the background color, changing how much the note is rotated, or changing the font. Here is the font I used for the demo: Gloria Hallelujah

View Demo

Copy and paste the following code into the head of your HTML file. Then add a table with multiple rows and you should see your table have different colors in every other row, just like the demo.

The code below is doing 3 things. First it is calling jQuery to be attached to the file. Second, we are assigning a background-color to the CSS class “odd”. The last step is using jQuery to automatically add the class “odd” to every other row. Pretty simple trick that works across browsers.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style type="text/css">
<!--
.odd {background: #caf2fe;}
-->
</style>

<script type="text/javascript">
 $(document).ready(function(){
 $("tr:odd").addClass("odd");
 });
</script>

Sure you can add a CSS class to every other row manually, but what happens if you need to re-arrange or delete some rows? Having to go back and manually make sure every other row has a class so the zebra striping is on every other row is no longer a suitable solution. Luckily with the power of CSS3 this is no longer necessary. Check out the demo, and then grab the CSS code for your project.

View Demo

All you need to do to add a background color to every other row in your table is add the following to your CSS file. This won’t work in Internet Explorer (big surprise), so if you really need to support every browser including IE, then check out how to use jQuery to apply zebra striping to a table.

tbody tr:nth-child(odd) {
   background-color:#a9cdeb
}

Check out the demo to see some examples and then keep reading to find out how to use Box-Shadow.

View Demo

Below are the examples from the demo page, with the code below it which made the shadow. For each shadow, you need to declare the dimensions for -webkit-box-shadow: and -moz-box-shadow:, which takes care of any browser that supports the box-shadow at this point.

The three numbers are similar to using text-shadow with CSS3, the first number is how far right the shadow is from the “box”, the next number is how far below, and the final number is the amount of blur for the shadow. Finally, you declare the color of the shadow.

You’ll see on a couple of them I used the awesome border-radius to show how the shadow wraps around a rounded corner. If you need a refresher on the border-radius declarations, look here. If you want to check out some examples and code of text-shadow, look here.

{
-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000
}

{
-webkit-box-shadow: 6px 6px 6px #444;
-moz-box-shadow: 6px 6px 6px #444
}

{
-webkit-box-shadow: 4px 4px 6px #F6C;
-moz-box-shadow:4px 4px 6px #F6C
}

{
-webkit-box-shadow: 6px 6px 10px #000;
-moz-box-shadow: 6px 6px 10px #000;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border:15px solid #F90
}

{
-webkit-box-shadow: 6px 6px 10px #990;
-webkit-border-radius:12px;
-moz-box-shadow: 6px 6px 10px #990;
-moz-border-radius:12px;
border:12px solid #000
}

{
-webkit-box-shadow: 0px 0px 20px #6F0;
-moz-box-shadow: 0px 0px 20px #6F0
}

{
-webkit-box-shadow: 0px 0px 30px #000;
-moz-box-shadow: 0px 0px 30px #000
}

Fastforward to CSS3. Now we can define a shadow behind live text on a website. Wiggity whaaat? That’s right, simply with some good old CSS. Of course you’ll need to use a real browser, as of any other cool CSS technique, but I won’t even begin to go into that topic. So why is this so great?

• Search engines can read the text
• Easily change the color of the text
• Easily change the color, size, or blur of the shadow
• Easily change the background color or image behind the text
• Your friends will be like totally impressed

An example of this is the title to every article on this lil website of mine. Do you see the shadow behind the title “Using Text-Shadow with CSS3“? If you don’t for the love of god.. DOWNLOAD FIREFOX! Check out the demo for some more examples of text-shadow created with CSS3, and then continue reading to learn how to write the CSS.

View Demo

The CSS to create the text-shadow is pretty simple. It’s written like this:

{text-shadow: 2px 2px 4px #000}

The first number is how far right of the text the shadow should go, the second is how far below the text, and the final number is the amount of blur to apply to the shadow. Then of course the color of the shadow is declared.

You can see below the examples from the demo page, and below them are the CSS styles that create each effect.

In this next example you can see how you can create a beveled look by using a shadow that goes zero pixels to either side, but goes 1 pixel straight up above the text.

So there it is, creating text-shadows with CSS3. You might also want to check out a recent article where I show how to use border-radius with CSS3; (which is how the rounded corners on these divs above were created).

Check out the example I created, and then keep reading to find out how to create the above nav with nothing more than some CSS.

View Demo

First create your unordered list in your XHTML.

The first thing to do with your CSS is to make your unordered list display on the same line, and with no bullet points.

The next step is to style the links. We’ll add some padding around the links to space them out, and to give the background color the width and height we want. On the hover state of the links I made the border appear as you roll over the link.

You’ll see I made an “active” state for the current page you are on. I set the cursor for the active state to be the “default” cursor. This is so when you roll over the link of the current page you are on the pointer cursor will turn into the arrow, giving the illusion that it isn’t a link (even though it really is).

So there it is, with this basic foundation and your imagination you can make a variety of looks for your navigation. Enjoy!

You can make separate images for the top rounded corners, the middle content section, and the bottom rounded corners. With this method you make the middle background image repeat on the y-axis as the content grows longer, which forces the box to grow and the bottom rounded corners to expand.

That’s a much better option, but still takes some time to create the images and set up the box. And of course if you want to change the color of the box or border you need to create new images.

And then there was CSS3. One of the most exciting things of the new CSS3 spec is “border-radius”. What this means is that you can define the radius of any of the corners of a box, creating rounded corners. This is of course the ultimate, since the colors of the box and borders can be changed; and the box can grow wider and longer as content is expanded or enlarged. As with the other CSS3 features, all browsers don’t support this yet. So at this time it’s best to use it in situations where it helps visually, but doesn’t destroy the design if it doesn’t work in a browser. For example, check out the top of my twitter page in Internet Explorer (which doesn’t support border-radius), and Firefox (which does).

You can see how in Internet Explorer the rounded corners do not appear. In Firefox they do. It doesn’t change the usability of the site if the corners don’t show up, it just looks better when they do. Another example of this is on my website. I use the border-radius for the breadcrumb navigation. See it here. The links show the rounded corners in compliant browsers, and will be a box with straight corners in non-compliant browsers. It’s like a treat for people with current browsers.

Here is how to use CSS border-radius.

.roundBox {
-webkit-border-radius:10px;
-moz-border-radius:10px
}

You’ll notice how you need to write slightly different code for Mozilla and WebKit based browsers. Eventually all browsers should all support rounded corners and universal code will be created. But even writing two different extensions like I showed above is a lot easier than creating multiple images.