Codrops » CSS

CSS Buttons with Pseudo-elements

Sergio Camalich — Wed, 11 Jan 2012 16:42:09 +0000

Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past.

In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

The font used is ‘Open Sans’ by Steve Matteson.

Disclaimer:
I’ll not be using CSS vendor prefixes in this tutorial or else it would be crazy long, but you will find them in the downloadable files.

I avoided CSS transitions since, right now, Firefox is the only browser that supports them on pseudo-elements. Plus, I believe that these buttons work just fine without them.

Markup

The structure of all these buttons needs just one anchor tag for it to work, since we will be creating the other elements with the ::before pseudo-class.


     Click me!

Example 1

I think this is the easiest one, with a very regular CSS.

CSS

First of all, we will give the general style of the button, including its active state. It is important to notice the relative positioning, since it will help us later with the positioning of the ::before element:

.a_demo_one {
	background-color:#ba2323;
	padding:10px;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	border: solid 1px #831212;
	background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%);
	border-radius: 5px;
}

.a_demo_one:active {
	padding-bottom:9px;
	padding-left:10px;
	padding-right:10px;
	padding-top:11px;
	top:1px;
	background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%);
}

Then, we create the gray container using the ::before pseudo-element. Absolute positioning makes our life easier to, believe it or not, position our element:

.a_demo_one::before {
	background-color:#ccd0d5;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding:8px;
	left:-8px;
	top:-8px;
	z-index:-1;
	border-radius: 5px;
	box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}

Example 2

This one is a little bit more complex because of the 3D’ish look. This button is outside of its ‘container’, but when you click it, it goes down:

CSS

.a_demo_two {
	background-color:#6fba26;
	padding:10px;
	position:relative;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
	box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
	border-radius: 5px;
}

.a_demo_two:active {
	top:7px;
	background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
	box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
	color: #156785;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
	background: rgb(44,160,202);
}

And here’s the tricky part:

Since the position of the pseudo-element depends on its parent, once the parent moves down a few pixels, you have to move up the pseudo-element that same amount of pixels.

.a_demo_two::before {
	background-color:#072239;
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	padding-left:2px;
	padding-right:2px;
	padding-bottom:4px;
	left:-2px;
	top:5px;
	z-index:-1;
	border-radius: 6px;
	box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
	top:-2px;
}

Example 3

I think this one is my favorite since it was the first one I ever made this way and people seem to really like it. It is a divided button that “breaks” once you click it.

CSS

Again, the first thing we have to do is create the lighter part. In here, you’ll notice a right margin, this is in order to compensate for the width of the pseudo-element if you want to center the button. You don’t need it if that is not a problem for you.

.a_demo_three {
	background-color:#3bb3e0;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	border-left:solid 1px #2ab7ec;
	margin-left:35px;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_three:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

And then the pseudo-element’s CSS:

.a_demo_three::before {
	content:"·";
	width:35px;
	max-height:29px;
	height:100%;
	position:absolute;
	display:block;
	padding-top:8px;
	top:0px;
	left:-36px;
	font-size:16px;
	font-weight:bold;
	color:#8fd1ea;
	text-shadow:1px 1px 0px #07526e;
	border-right:solid 1px #07526e;
	background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}

.a_demo_three:active::before {
	top:-3px;
	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}

Example 4

This time, we will use the pseudo-element as a pointer, using one image as a background, though you can use some of those great icon fonts.

CSS

.a_demo_four {
	background-color:#4b3f39;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	padding:10px 20px;
	padding-right:50px;
	background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
	border-radius: 5px;
	box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}

.a_demo_four:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
	box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}

.a_demo_four::before {
	background-color:#322620;
	background-image:url(../images/right_arrow.png);
	background-repeat:no-repeat;
	background-position:center center;
	content:"";
	width:20px;
	height:20px;
	position:absolute;
	right:15px;
	top:50%;
	margin-top:-9px;
	border-radius: 50%;
	box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}

.a_demo_four:active::before {
	top:50%;
	margin-top:-12px;
	box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

Example 5

This example is a bit cheesy, I know, but you can use it in so many and really useful ways.

CSS

.a_demo_five {
	background-color:#9827d3;
	width:150px;
	display:inline-block;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
	text-decoration:none;
	color:#fff;
	position:relative;
	margin-top:40px;
	padding-bottom:10px;
	padding-top:10px;
	background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%);
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999;
}

.a_demo_five:active {
	top:3px;
	background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%);
	box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999;
}

.a_demo_five::before {
	background-color:#fff;
	background-image:url(../images/heart.gif);
	background-repeat:no-repeat;
	background-position:center center;
	border-left:solid 1px #CCC;
	border-top:solid 1px #CCC;
	border-right:solid 1px #CCC;
	content:"";
	width:148px;
	height:40px;
	position:absolute;
	top:-30px;
	left:0px;
	margin-top:-11px;
	z-index:-1;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.a_demo_five:active::before {
	top: -33px;
	box-shadow: 0px 3px 0px #ccc;
}

In the end

And well, this is it, for now. Remember that these buttons are still kind of experimental, so not every browser supports them that well.

Thank you for reading this tutorial and I hope that you find it useful.

View demo Download source

Slopy Elements with CSS3

Mary Lou — Wed, 21 Dec 2011 11:27:36 +0000

View demo Download source

It’s always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only.

So, let’s begin!

Example 1

In our first example, we want to have a pretty normal layout with a little twist: we want a diagonal separation between the elements. We will achieve that by rotating the wrappers of the content articles. But, since we don’t want the content itself to be rotated, we’ll simply rotate each article back.

The Markup

Let’s create a section for our whole content and inside we’ll add some divisions with the class se-slope. Each one is going to have an article with some headline and text:


	
		
			Some headline
			Some text

Now, let’s check our the style.

The CSS

The body will have the same background color like all the even se-slope elements, which is pink. This will “hide” some edges of the rotated elements:

body{
	background: #e90089;
}

The main wrapper will have the overflow hidden because we will want to pull the rotated elements in a way that they would stick out, so let’s not show that:

.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	padding-top: 150px;
}

The divisions will all be rotated: the odd ones will be black and rotated 5 degrees and the even ones will be pink and rotated -5 degrees. Because of the rotation, we’ll need to adjust the positioning of the odd elements in order to fit as we want them to. So, we’ll add a negative top margin in order to pull them up:

.se-slope{
	margin: 0 -50px;
	transform-origin: left center;
}
.se-slope:nth-child(odd){
	background: #000;
	transform: rotate(5deg);
	margin-top: -200px;
	box-shadow: 0px -1px 3px rgba(0,0,0,0.4);
}
.se-slope:nth-child(even){
	background: #e90089;
	transform: rotate(-5deg);
	box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset;
}

Let’s center the article:

.se-content{
	margin: 0 auto;
}

Let’s give the headline a special look. We’ll add the :before and :after pseudo element in order to create some asymmetric triangles on both sides using the transparent border trick:

.se-content h3{
	font-size: 60px;
	position: relative;
	display: inline-block;
	padding: 10px 30px 8px 30px;
	height: 80px;
	line-height: 80px;
	margin-bottom: 20px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope:nth-child(odd) .se-content h3{
	background: #e90089;
	color: #000;
}
.se-slope:nth-child(even) .se-content h3{
	background: #000;
	color: #e90089;
}
.se-content h3:before{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-right: 60px solid black;
	position: absolute;
	left: -59px;
	top: 0px;
}
.se-content h3:after{
	content: '';
	width: 0;
	height: 0;
	border-top: 38px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid black;
	position: absolute;
	right: -59px;
	top: 0px;
}

Let’s adjust the color for the odd elements:

.se-slope:nth-child(odd) .se-content h3:before,
.se-slope:nth-child(odd) .se-content h3:after{
	border-right-color: #e90089;
	border-left-color: #e90089;
}

The style for the paragraph will be the following:

.se-content p{
	width: 75%;
	max-width: 500px;
	margin: 0 auto;
	font-style: italic;
	font-size: 18px;
	line-height: 24px;
	padding-top: 10px;
}

With the :first-letter selector we can style the first letter differently:

.se-content p:first-letter{
	font-size: 40px;
	font-family: 'Adobe Garamond Pro', Georgia, serif;
}

Let’s rotate the article back to 0 and adjust the paddings to fit the content nicely:

.se-slope:nth-child(odd) .se-content{
	transform: rotate(-5deg);
	color: #e90089;
	padding: 130px 100px 250px 100px;
}
.se-slope:nth-child(even) .se-content{
	transform: rotate(5deg);
	color: #000;
	padding: 150px 100px 250px 100px;
}

And that was the first example! Let’s look at the second one.

Example 2

In the second example, we’ll only use the transparent border trick and some pseudo elements in order to create an arrow-shaped, alternating structure.

The Markup

In the second example we’ll have the same structure, except for some classes: we’ll be adding the class sl-slope-black or sl-slope-pink, depening on which color we want the division to be:


	
		
			Some headline
			Some text

Let style ‘em!

The CSS

The container will have the same style as before and the body will have a pink background, again:

body{
	background: #e90089
}
.se-container{
	display: block;
	width: 100%;
	overflow: hidden;
	box-shadow: 0px 0px 10px #000;
}

The slope divisions will be floating and we’ll stack two next to each other, so let’s set the width to 50%:

.se-slope{
	width: 50%;
	height: 300px;
	position: relative;
	float: left;
	overflow: hidden;
}

Let’s add some padding to the content:

.se-slope .se-content{
	margin: 50px 100px 0px 100px;
}

Let’s give the background colors to the black and pink divisions:

.se-slope-black{
	background: #000;
}
.se-slope-pink{
	background: #e90089;
}

So, each black element is going to have a :after pseudo element style for the arrow shape. The odd black elements will have it pointing to the left and the even ones will have it pointing to the right:

.se-slope-black:nth-child(odd):after,
.se-slope-black:nth-child(even):after{
	content: '';
	position: absolute;
	bottom: 0px;
	width: 0px;
	height: 0px;
	border-top: 150px solid transparent;
	border-bottom: 150px solid transparent;
}
.se-slope-black:nth-child(odd):after{
	border-right: 60px solid #e90089;
	right: 0px;
}
.se-slope-black:nth-child(even):after{
	border-left: 60px solid #e90089;
	left: 0px;
}

Let’s style the headlines and give them the respective background color:

.se-content h3{
	z-index: 10;
	font-size: 30px;
	margin-top: 60px;
	position: relative;
	display: inline-block;
	padding: 15px 20px;
	line-height: 40px;
	font-family: 'Bitter', 'Trebuchet MS', Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.se-slope.se-slope-black h3{
	background: #e90089;
}
.se-slope.se-slope-pink h3{
	background: #000;
}

Let’s add some skewed shape to the ends of the heading using :after and :before:

.se-slope.se-slope-black h3:after,
.se-slope.se-slope-black h3:before,
.se-slope.se-slope-pink h3:after,
.se-slope.se-slope-pink h3:before{
	content: '';
	width: 0px;
	height: 0px;
	top: 0px;
	position: absolute;
}
.se-slope.se-slope-black h3:after{
	border-top: 70px solid transparent;
	border-left: 30px solid #e90089;
	right: -30px;
}
.se-slope.se-slope-black h3:before{
	border-bottom: 70px solid transparent;
	border-right: 30px solid #e90089;
	left: -30px;
}
.se-slope.se-slope-pink h3:after{
	border-top: 70px solid transparent;
	border-right: 30px solid #000;
	left: -30px;
}
.se-slope.se-slope-pink h3:before{
	border-bottom: 70px solid transparent;
	border-left: 30px solid #000;
	right: -30px;
}

We’ll use the paragraph as a decorative element. The ones on the left side will be rotated 15 degrees and the ones on the right side will be rotated -15 degrees:

.se-content p{
	position: absolute;
	z-index: 9;
	opacity: 0.3;
	font-size: 50px;
	text-align: left;
	transform-origin: top center;
}
.se-slope:nth-child(even) .se-content p{
	transform: rotate(-15deg);
	top: -100px;
	right: -50px;
	text-align: left;
	width: 95%;
}
.se-slope:nth-child(odd) .se-content p{
	transform: rotate(15deg);
	top: -100px;
	left: -50px;
	text-align: right;
	width: 90%;
}
.se-slope.sl-slope-pink .se-content p{
	color: #000;
}

And that’s it! I hope you enjoyed this tutorial and find it useful!

View demo Download source

HTML Only – The Significance of Proper Markup in Web Design

Patrick Cox — Wed, 31 Aug 2011 10:13:24 +0000

On our trip back from Yellowstone National Park recently, we wanted to stop by a Redbox and grab a few DVD’s for our daughter to watch on the way. Not familiar with the surroundings, I pulled out my semi-smart Blackberry phone and hit up Redbox.com to find some locations and maybe reserve a few items. After the phone locked up while “loading style sheets” (I’ll blame T-Mobile’s coverage for this one) I turned off CSS and reloaded. With Javascript disabled I received the bare bones HTML only Redbox site and was greeted with big text that read “Sorry, Your Shopping Cart is Full“. I’m not sure where that came from since I hadn’t signed into my account yet, but I should have realized that this was the first of many problems I would have.

The bare bones HTML site was pretty easy to read and I was able to located the “Find A Redbox” button but was unable to click on it. My cursor highlighted the button, but no clicky for me. After reloading with a few times with Javascript and without I was finally able to click the button and fill out the form, but the Javascript buttons wouldn’t work yet again. Eventually (45 minutes later) I was able to almost have success. But luckily, my wife just Google texted Redbox and with seconds received a few texts with Redbox locations. Now, I’m not writing this to talk about how great Google text is, I’m writing this to discuss how websites like Redbox.com can make their web experiences better even when the operating system, service and all other variables are not.

The fix is really pretty simple, it’s really just a matter of making sure that our markup is readable, workable, usable. These are really just basic things that we all know, but it seems like there is still a lot of sites being created with bad habits, so it’s a matter of changing a few old habits.

Try implementing some of these methods on your next project:

think about content before you code
make sure it works before you style
think more semantically

Content, Content, Content

Content is the reason why anybody actually visits a website. Some of us visit or find sites just for pure design reasons, but the majority of surfers, shoppers and readers only view websites for the content. People are generally looking for something to learn, buy or inspire them so the content is still king over pretty design. Your HTML should always present all the important content you want your users to view – avoid injecting important content through Javascript or CSS. Along with headers and paragraphs, also make sure you include forms, buttons, navigation and images.

Images can be tricky, especially when you are thinking mobile first because you don’t want to load a bunch of images that are not necessary and slow down you mobile load time. Some designers prefer to never use the tag and load images via CSS through the background property, but this method may hurt the bare bones user experience because images can be just as valuable as content. My little rule of thumb is to separate images into two categories: content and style. ‘Style’ images are used for navigation buttons, backgrounds, list icons, etc. ‘Content’ images are images that relate to the actual content like author pics, related images within articles, or basically any image that is inline with content.

Refrain from using any inline styling. Now depending on the OS, CSS inline styles may or may not be displayed when CSS is turned off so it becomes unpredictable and we all know we should never use inline CSS (if at all possible). But more critical, use discretion on HTML styles like height and width. If you are presenting some table data or something that needs to be laid out then by all means lay it out – that makes your HTML easier to read and follow. Basically, don’t use CSS inline styles and avoid block HTML styling where possible.

Everything Needs to Work

Okay, now this really is a no-brainer, but there are probably thousands of sites out there that don’t work properly when stripped down to HTML only. If you have a search form or any kind of form, make sure the user can fill it out and submit it without any a Javascript (JS) or CSS crutch. At the very least, if you have forms or functions that require JS, add a friendly, nice reminder that such elements need JS turned on in order to work – this will at least let the user know so that they can make the decision instead of fumbling around for an hour trying to figure it out.

A great way to make sure your site works properly is to write your HTML first before you jump into the CSS and JS. This will allow you to focus on the content and the functions and test them before you start making everything pretty. I used to write my HTML and CSS together, where I would take a portion of the psd file (like the header) and code it up completely with images and layout, then move to the next portion. But now, I stare at the psd file, code up the layout in my head (or in a sketch book), and then write my HTML from start to finish.

Think More Semantically

The big buzz word in web design (beside HTML5, CSS3 or responsive web design) is “semantic markup“. But what really is it? Semantic markup is just basically the meaning of the content and using the tags that reflect that meaning. A good example is the difference between the strong/em tags versus the bold/italic tags. Bold and italic are really just a text style but they don’t really show any meaning to the text – strong and em attach meaning to the content as well as assign style.

Now, thanks to HTML5, we have a variety of tags we can use to make out site more semantic like ‘header’, ‘footer’, ‘aside’ and ‘article’, just to name a few. Not everything is implemented in HTML5 but there is still a lot of new tags that you can use to markup your site in a more semantic way. Even if you decide not to make the jump in quite yet or you want to use new HTML5 tags that aren’t fully adopted yet, just assign your divs those tag names and get in the habit. Assign your header div the id of “header” or assigning your post divs, change their class name to “article”. The point is this: start thinking about semantics and start thinking about what HTML5 can do, even just thinking about your code more semantically now is better than not.

So Easy a Caveman Can Do It

HTML is the most primitive web language and is the foundation of pretty much every web site – it’s so easy even a caveman can do it… right. This doesn’t mean that it’s the easiest thing to use in it’s bare form or even easy to design with (hence CSS). Not everybody knows how to start a fire with just a few twigs and rock, so not everybody will know how to work an HTML only view of a website – that’s why design is so important – but we can design our HTML code better to make the experience a little bit easier to read, work and use.

Beautiful Photo Stack Gallery with jQuery and CSS3

Mary Lou — Sun, 27 Jun 2010 17:33:26 +0000

View demo Download source

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack. In the photo stack view, we can browse through the images by putting the top most image behind all the stack with a slick animation.

We will use jQuery and CSS3 properties for the rotated image effect. We will also use the webkit-box-reflect property in order to mirror the boxes in the album view – check out the demo in Google Chrome or Apple Safari to see this wonderful effect.

We will also use a bit of PHP for getting the images from each album.

So, let’s start!

The Markup

In our HTML structure we will have several elements. The main ones are for the album columns with thumbnail and description, and the preview with the photo stack.
The structure for the album view is going to look as follows:



	
	

	

		
			
			
				Album title
				Description text
			
		

		
			...
		

		...

The opacity of the album div is going to be 0 in the beginning, we will then use JavaScript to fade in the columns.
The information that we need to provide in the HTML is the location of each album and its thumbnail images. With our little PHP script we will then get all the images from the respective album.

The structure for the dark overlay and the preview with the photo stack is going to look like this:

We will dynamically insert the pictures of each album into the ps_container div.
Now, let’s take a look at the PHP.

The PHP

Our PHP file will be called from our JavaScript and we will get the information with AJAX call. The PHP looks as follows:

$location 	= 'albums';
$album_name	= $_GET['album_name'];
$files 		= glob($location . '/' . $album_name . '/*.{jpg,gif,png}', GLOB_BRACE);
$encoded 	= json_encode($files);
echo $encoded;
unset($encoded);

The CSS

The style for the gallery is going to contain some CSS3 properties and also a Webkit specific property for a mirror effect.
Let’s start by resetting some paddings and margins and defining the general style for the body:

body, ul, li, h1, h2, h3{
	margin:0;
	padding:0;
}
body{
	background:#121212;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#fff;
	overflow-x:hidden;
}

We will continue with the style of the preview. The overlay is going to have the following style:

.ps_overlay{
    z-index:90;
    background:#111;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    opacity:0.5;
}

The container for the photo stack will have a defined height and width. We will position it absolutely and center it with the “50%/negative margins” method:

.ps_container{
	width:480px;
	height:350px;
	position:absolute;
	top:50%;
	margin-top:-175px;
	left:50%;
	margin-left:-240px;
	z-index:100;
}

The image will have a thick white border and a nice box shadow. We will center the image relatively to its container but since we will only know the width and height of the images once we dynamically add them, we will set the margins in our JavaScript function:

.ps_container img{
	border:10px solid #fff;
	position:absolute;
	top:50%;
	left:50%;
	-moz-box-shadow:1px 1px 10px #000;
	-webkit-box-shadow:1px 1px 10px #000;
	box-shadow:1px 1px 10px #000;
}

The close button for the preview is going to be fixed at the top right of the window:

a.ps_close{
	background:#000 url(../images/close.png) no-repeat center center;
	cursor:pointer;
	width:56px;
	height:56px;
	position:fixed;
	right:10px;
	top:10px;
	z-index:1000;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	opacity:0.6;
}

We will show a “next photo” element on top of the current image when the user hovers over it:

a.ps_next_photo{
	position:absolute;
	top:50%;
	left:50%;
	width:56px;
	height:56px;
	margin:-28px 0 0 -28px;
	z-index:200;
	cursor:pointer;
	background:#000 url(../images/next_photo.png) no-repeat 50% 50%;
	opacity:0.6;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

The hover classes for the last two elements:

a.ps_next_photo:hover,
a.ps_close:hover{
	opacity:0.8;
}

Now we are going to define the style for the album view and its columns. The slider container will be positioned relatively. With the auto values for the left and right margins we center the container horizontally on the page:

.ps_slider{
	width:845px;
	height:300px;
	position:relative;
	margin:110px auto 0px auto;
}

The navigation elements are going to have the following style:

.ps_slider a.next,
.ps_slider a.prev{
	position:absolute;
	background-color:#000;
    background-position:center center;
    background-repeat:no-repeat;
    border:1px solid #232323;
    width:20px;
    height:20px;
    top:50%;
    margin-top:-10px;
    opacity:0.6;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    cursor:pointer;
    outline:none;
}
.ps_slider a.prev{
    left:-30px;
    background-image:url(../images/prev.png);
}
.ps_slider a.next{
    right:-30px;
    background-image:url(../images/next.png);
}
.ps_slider a.prev:hover,
.ps_slider a.next:hover{
    border:1px solid #333;
    opacity:0.9;
}

We also define a class for the navigation elements when they are disabled:

.ps_slider a.disabled,
.ps_slider a.disabled:hover{
    opacity:0.4;
    border:1px solid #111;
    cursor:default;
}

Each album column is going to have the following style:

.ps_slider .ps_album{
	width:140px;
	height:310px;
	padding:10px;
	background-color:#333;
	border:1px solid #444;
	position:absolute;
	top:0px;
	text-align:center;
	cursor:pointer;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
	-webkit-box-reflect:
		below 5px
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(transparent),
			color-stop(0.6, transparent),
			to(rgb(18, 18, 18))
		);
}

The last property is the Webkit box reflex that mirrors the columns. We say that it should mirror the element in a gradient like way.

We add a hover class for the whole column:

.ps_slider .ps_album:hover{
		background-color:#383838;
}

The thumbnail image and the content of the column are going to have the following styles:

.ps_slider .ps_album img{
	height:90px;
	border:1px solid #444;
	-moz-box-shadow:1px 1px 4px #000;
	-webkit-box-shadow:1px 1px 4px #000;
	box-shadow:1px 1px 4px #000;
}
.ps_slider .ps_album .ps_desc{
	display:block;
	color:#666;
	background:#111 url(../images/overlay.png) no-repeat bottom right;
	height:200px;
	margin-top:10px;
	text-align:left;
	line-height:20px;
	overflow:hidden;
	text-overflow:ellipsis;
	border:1px solid #393939;
	-moz-box-shadow:0px 0px 2px #000 inset;
	-webkit-box-shadow:0px 0px 2px #000 inset;
	box-shadow:0px 0px 2px #000 inset;
}
.ps_slider .ps_album:hover .ps_desc{
	background-image:none;
}
.ps_slider .ps_album .ps_desc span{
	display:block;
	margin:0px 10px 10px 10px;
	border-top:1px solid #333;
	padding-top:5px;
}
.ps_slider .ps_album .ps_desc h2{
	margin:10px 10px 0px 10px;
	text-align:left;
	padding-bottom:5px;
	font-weight:normal;
	color:#ddd;
	text-shadow:0px 0px 1px #fff;
	border-bottom:1px solid #000;
}

The loading element will show when we click on an album and all the images get loaded in the preview:

.ps_slider .loading{
	background:#121212 url(../images/loading.gif) no-repeat 50% 50%;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	opacity:0.7;
}

For the opacity to work in IE you need to add this filter (with the right value):
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
I did not want to uglify the code.

Let’s add the magic!

The JavaScript

First, we need to define some variables that help us control the album navigation and keep some elements. The variable positions saves the left value for each album column. This depends on the width of the column.

/**
* navR,navL are flags for controlling the albums navigation
* first gives us the position of the album on the left
* positions are the left positions for each of the 5 albums displayed at a time
*/
var navR,navL	= false;
var first		= 1;
var positions 	= {
	'0'		: 0,
	'1' 	: 170,
	'2' 	: 340,
	'3' 	: 510,
	'4' 	: 680
}
var $ps_albums 		= $('#ps_albums');
/**
* number of albums available
*/
var elems			= $ps_albums.children().length;
var $ps_slider		= $('#ps_slider');

We are going to give an initial positioning to the album columns:


/**
* position all the albums on the right side of the window
*/
var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
$ps_albums.children('div').css('left',hiddenRight + 'px');

/**
* move the first 5 albums to the viewport
*/
$ps_albums.children('div:lt(5)').each(
	function(i){
		var $elem = $(this);
		$elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
			if(elems > 5)
				enableNavRight();
		});
	}
);

For sliding through the albums, we will define what happens when we click on the next or previous button and create two functions for moving left or right:

/**
* next album
*/
$ps_slider.find('.next').bind('click',function(){
	if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
	disableNavRight();
	disableNavLeft();
	moveRight();
});

/**
* we move the first album (the one on the left) to the left side of the window
* the next 4 albums slide one position, and finally the next one in the list
* slides in, to fill the space of the first one
*/
function moveRight () {
	var hiddenLeft 	= $ps_albums.offset().left + 163;

	var cnt = 0;
	$ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
			var $this = $(this);
			$ps_albums.children('div').slice(first,parseInt(first+4)).each(
				function(i){
					var $elem = $(this);
					$elem.animate({'left': positions[i] + 'px'},800,function(){
						++cnt;
						if(cnt == 4){
							$ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
								//$this.hide();
								++first;
								if(parseInt(first + 4) < elems)
									enableNavRight();
								enableNavLeft();
							});
						}
					});
				}
			);
	});
}

/**
* previous album
*/
$ps_slider.find('.prev').bind('click',function(){
	if(first==1  || !navL) return;
	disableNavRight();
	disableNavLeft();
	moveLeft();
});

/**
* we move the last album (the one on the right) to the right side of the window
* the previous 4 albums slide one position, and finally the previous one in the list
* slides in, to fill the space of the last one
*/
function moveLeft () {
	var hiddenRight 	= $(window).width() - $ps_albums.offset().left;

	var cnt = 0;
	var last= first+4;
	$ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
			var $this = $(this);
			$ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
				function(i){
					var $elem = $(this);
					$elem.animate({'left': positions[i+1] + 'px'},800,function(){
						++cnt;
						if(cnt == 4){
							$ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
								//$this.hide();
								--first;
								enableNavRight();
								if(first > 1)
									enableNavLeft();
							});
						}
					});
				}
			);
	});
}

The next helper functions deal with disabling and enabling the the navigation items:

/**
* disable or enable albums navigation
*/
function disableNavRight () {
	navR = false;
	$ps_slider.find('.next').addClass('disabled');
}
function disableNavLeft () {
	navL = false;
	$ps_slider.find('.prev').addClass('disabled');
}
function enableNavRight () {
	navR = true;
	$ps_slider.find('.next').removeClass('disabled');
}
function enableNavLeft () {
	navL = true;
	$ps_slider.find('.prev').removeClass('disabled');
}

In the next steps we will define what happens when we open an album. We first make the loading element appear and show the preview after we loaded all the images. The information of the source comes from an AJAX call to our PHP class. For the rotation effect, we use the rotate CSS3 property which we restrict to a certain range of degrees, so that we don’t rotate an image crazily:

var $ps_container 	= $('#ps_container');
var $ps_overlay 	= $('#ps_overlay');
var $ps_close		= $('#ps_close');
/**
* when we click on an album,
* we load with AJAX the list of pictures for that album.
* we randomly rotate them except the last one, which is
* the one the User sees first. We also resize and center each image.
*/
$ps_albums.children('div').bind('click',function(){
	var $elem = $(this);
	var album_name 	= 'album' + parseInt($elem.index() + 1);
	var $loading 	= $('',{className:'loading'});
	$elem.append($loading);
	$ps_container.find('img').remove();
	$.get('photostack.php', {album_name:album_name} , function(data) {
		var items_count	= data.length;
		for(var i = 0; i < items_count; ++i){
			var item_source = data[i];
			var cnt 		= 0;
			$('').load(function(){
				var $image = $(this);
				++cnt;
				resizeCenterImage($image);
				$ps_container.append($image);
				var r		= Math.floor(Math.random()*41)-20;
				if(cnt < items_count){
					$image.css({
						'-moz-transform'	:'rotate('+r+'deg)',
						'-webkit-transform'	:'rotate('+r+'deg)',
						'transform'			:'rotate('+r+'deg)'
					});
				}
				if(cnt == items_count){
					$loading.remove();
					$ps_container.show();
					$ps_close.show();
					$ps_overlay.show();
				}
			}).attr('src',item_source);
		}
	},'json');
});

/**
* when hovering each one of the images,
* we show the button to navigate through them
*/
$ps_container.live('mouseenter',function(){
	$('#ps_next_photo').show();
}).live('mouseleave',function(){
	$('#ps_next_photo').hide();
});

The nice animation of putting the current image at the back of our stack is defined in the following:

/**
* navigate through the images:
* the last one (the visible one) becomes the first one.
* we also rotate 0 degrees the new visible picture
*/
$('#ps_next_photo').bind('click',function(){
	var $current 	= $ps_container.find('img:last');
	var r			= Math.floor(Math.random()*41)-20;

	var currentPositions = {
		marginLeft	: $current.css('margin-left'),
		marginTop	: $current.css('margin-top')
	}
	var $new_current = $current.prev();

	$current.animate({
		'marginLeft':'250px',
		'marginTop':'-385px'
	},250,function(){
		$(this).insertBefore($ps_container.find('img:first'))
			   .css({
					'-moz-transform'	:'rotate('+r+'deg)',
					'-webkit-transform'	:'rotate('+r+'deg)',
					'transform'			:'rotate('+r+'deg)'
				})
			   .animate({
					'marginLeft':currentPositions.marginLeft,
					'marginTop'	:currentPositions.marginTop
					},250,function(){
						$new_current.css({
							'-moz-transform'	:'rotate(0deg)',
							'-webkit-transform'	:'rotate(0deg)',
							'transform'			:'rotate(0deg)'
						});
			   });
	});
});

We animate the top and left margins with certain values that create the “putting back” effect. Since our structure always shows the last image on the top, we will also need to insert the moving image at the beginning, so that it appear as last one in the stack.

Clicking on the close element brings us back to the album view:

/**
* close the images view, and go back to albums
*/
$('#ps_close').bind('click',function(){
	$ps_container.hide();
	$ps_close.hide();
	$ps_overlay.fadeOut(400);
});

Our famous resize function resizes the image according to the given container width and height.
In the end of the function we apply the sizes and we also apply the negative margins – remember, that’s the way we can center an absolute positioned element; we defined top and left in the CSS to be 50%, so now we need to pull it to the right place with these margin values.

/**
* resize and center the images
*/
function resizeCenterImage($image){
	var theImage 	= new Image();
	theImage.src 	= $image.attr("src");
	var imgwidth 	= theImage.width;
	var imgheight 	= theImage.height;

	var containerwidth  = 460;
	var containerheight = 330;

	if(imgwidth	> containerwidth){
		var newwidth = containerwidth;
		var ratio = imgwidth / containerwidth;
		var newheight = imgheight / ratio;
		if(newheight > containerheight){
			var newnewheight = containerheight;
			var newratio = newheight/containerheight;
			var newnewwidth =newwidth/newratio;
			theImage.width = newnewwidth;
			theImage.height= newnewheight;
		}
		else{
			theImage.width = newwidth;
			theImage.height= newheight;
		}
	}
	else if(imgheight > containerheight){
		var newheight = containerheight;
		var ratio = imgheight / containerheight;
		var newwidth = imgwidth / ratio;
		if(newwidth > containerwidth){
			var newnewwidth = containerwidth;
			var newratio = newwidth/containerwidth;
			var newnewheight =newheight/newratio;
			theImage.height = newnewheight;
			theImage.width= newnewwidth;
		}
		else{
			theImage.width = newwidth;
			theImage.height= newheight;
		}
	}
	$image.css({
		'width'			:theImage.width,
		'height'		:theImage.height,
		'margin-top'	:-(theImage.height/2)-10+'px',
		'margin-left'	:-(theImage.width/2)-10+'px'
	});
}
});

And that’s it! We hope you enjoyed this tutorial and find it useful!

P.S. Because of some Webkit properties, this demo is a really nice experience if you use a Webkit browser like Chrome or Safari. It will also be fully functional in all latest browsers like Firefox and IE (without those beautiful properties, though).

View demo Download source

Message from TestkingWe offer professional testking RH302 training with testking 646-671 video tutorials and testking 70-643 guide to help the designers learn how to create beautiful website designs using Jquery and css.

Collective: 50 Great CSS Awarded Websites and Works Of Designers, Design Agencies

Community — Mon, 07 Jun 2010 14:11:43 +0000

One of the best CSS showcase site is The CSS Awards Site.The reason is that, they analyse the submitted CSS sites very detailed.They have really professional judges and all the CSS sites are selected daily under a strict system of valoration and every month they decide the “Site Of The Month”.

Source

http://designbeep.com/2010/05/15/50-great-css-awarded-websites-of-designersdesign-agencies-and-studios/

Collective: Browser Compatible Info for HTML and CSS

Community — Wed, 12 May 2010 19:10:22 +0000

CSS and HTML is used to design a website to look attractive. However, the development of CSS and HTML, and every browser that is not balanced to make the UI developers need to ensure that information can be seen very well in every browser.
Browser becomes a very important media for conveying information in the Internet world. And appearance to be a very important step to ensure the information presented is easy and convenient to read.
This article has been collecting a variety of info about compatible browsers for CSS and HTML…

Source

http://www.denbagus.net/browser-compatible-html-and-css/

Beautiful Background Image Navigation with jQuery

Mary Lou — Wed, 05 May 2010 11:46:42 +0000

View demo Download source

In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.

Note: There is a new version which let’s you customize things better:
Sliding Background Image Menu with jQuery

We will be using the amazing Background-Position Animation Plugin by Alexander Farkas.

The photos that we will be using are from Pat’s beautiful B&W collection on Flickr.

There will be a little bit of CSS3 involved which absence will almost not be notable when using a browser that does not support its properties (like IE).

We tried to make this one cross-browser compatible and voilà! It works beautifully in Google Chrome, Firefox, Opera, Safari, IE8, IE7 and guess what, it even works respectively in IE6. (We are using an adapted style sheet and you will have to apply some PNG fix if you want the sub-menu backgrounds to be semi-transparent. )

OK, so let’s get started!

The Markup

The HTML will consist of a wrapper div and an unordered list with three list items. We will initially set some “bg” classes that will have the respective background images. The “menuWrapper” will always have the “bg” class of the current list item so that we have the background image of the current list item.


	
		
			Our Passion
			
				Submenu 1
				Submenu 2
				Submenu 3
			
		
		
			Our Brands
			
				Submenu 1
				Submenu 2
				Submenu 3
			
		
		
			Contact
			
				Submenu 1
				Submenu 2
				Submenu 3

For the background animation plugin to work correctly we need to set the position of the background image as inline styles initially. We already set the right position for each background image, for example, the third item will have the background image positioned to the outer right.

As you can see, every list item has another sub-list with three more items. The background image position of these sublists is set to a value that hides the image. When we animate the background then, we will create the effect of sliding it in from the left or the right.

The CSS

Let’s start by the general style of the the “menuWrapper” which will contain the font styles and the size of the whole element:

.menuWrapper{
    font-family: "Trebuchet MS", Arial, sans-serif;;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform:uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    position:relative;
    margin:20px auto;
    height:542px;
    width:797px;
    background-position:0 0;
    background-repeat:no-repeat;
    background-color:transparent;
}

The list and the list items of the first layer will have the following style:

ul.menu{
    list-style:none;
    width:797px;
}
ul.menu > li{
    float:left;
    width:265px;
    height:542px;
    border-right:1px solid #777;
    background-repeat:no-repeat;
    background-color:transparent;
}
ul.menu > li.last{
    border:none;
}

The selector “>” addresses only the li elements of the first layer and will not be applied to the ones of the sub-menus. We will give the last li the class “last” in order to remove the right border.

The following three classes define the background images. We will give these classes to all the li elements depending on which one we hover. So, if we hover the second li, we will give the “bg2″ class to all the first layer list items:

.bg1{
    background-image: url(../images/1.jpg);
}
.bg2{
    background-image: url(../images/2.jpg);
}
.bg3{
    background-image: url(../images/3.jpg);
}

Let’s define the look of the link elements in the first layer list. Since the li elements have a big height, we need to push the link elements down. We do that by setting a high top margin:

ul.menu > li > a{
    float:left;
    width:265px;
    height:50px;
    margin-top:450px;
    text-align:center;
    line-height:50px;
    color:#ddd;
    background-color:#333;
    letter-spacing:1px;
    cursor:pointer;
    text-decoration:none;
    text-shadow:0px 0px 1px #fff;
}

To center the text of a link element vertically, you can give a line-height value equal to the height of the element. (I don’t know why, but when I started with learning CSS, I automatically always used paddings to adapt the height of the element and to center it. Using line-height was a real delight because you can control sizes much better like that.)

The second layer lists would naturally appear after the first layer list, so we use a negative top margin to “pull” them up:

ul.menu > li ul{
    list-style:none;
    float:left;
    margin-top:-180px;
    width:100%;
    height:110px;
    padding-top:20px;
    background-repeat:no-repeat;
    background-color:transparent;
}

The li elements of the sub-menu will be initially hidden. In the script we will fade them in when we hover over their parent list item link:

ul.menu > li ul li{
    display:none;
}

Now we define the classes for the background images of the sub-menus:

ul.menu > li ul.sub1{
    background-image:url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
    background-image:url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
    background-image:url(../images/bg3sub.png);
}

The link elements of the li elements will have the following style:

ul.menu > li ul li a{
    color:#fff;
    text-decoration:none;
    line-height:30px;
    margin-left:20px;
    text-shadow:1px 1px 1px #444;
    font-size:11px;
}

ul.menu > li ul li a:hover{
    border-bottom:1px dotted #fff;
}

The first sub-list will be shown in the beginning:

ul.menu > li ul.sub1 li{
    display:block;
}

And that’s all the style. Take a look at the ZIP file for the IE6 style sheet.
Now let’s take a look at the JavaScript.

The JavaScript

What we do in the script is the following: we first check where we are coming from and then we animate the background positions of the list elements in the first level and the backgrounds of the sub-menus accordingly:

$(function() {
	/* position of the  that is currently shown */
	var current = 0;

	$('#bg1,#bg2,#bg3').mouseover(function(e){

		var $this = $(this);
		/* if we hover the current one, then don't do anything */
		if($this.parent().index() == current)
			return;

		/* item is bg1 or bg2 or bg3, depending where we are hovering */
		var item = e.target.id;

		/*
		this is the sub menu overlay. Let's hide the current one
		if we hover the first 
 or if we come from the last one,
		then the overlay should move left -> right,
		otherwise right->left
		 */
		if(item == 'bg1' || current == 2)
			$('#menu .sub'+parseInt(current+1))
			    .stop()
				.animate({backgroundPosition:"(-266px 0)"},300,function(){
					$(this).find('li').hide();
				});
		else
			$('#menu .sub'+parseInt(current+1))
				.stop()
				.animate({backgroundPosition:"(266px 0)"},300,function(){
					$(this).find('li').hide();
				});

		if(item == 'bg1' || current == 2){
			/*
			if we hover the first 
 or if we come from
			the last one, then the images should move left -> right
			*/
			$('#menu > li')
				.animate({backgroundPosition:"(-800px 0)"},0)
				.removeClass('bg1 bg2 bg3')
				.addClass(item);
			move(1,item);
		}
		else{
			/*
			if we hover the first 
 or if we come
			from the last one, then the images should move
			right -> left
			*/
			$('#menu > li')
				.animate({backgroundPosition:"(800px 0)"},0)
				.removeClass('bg1 bg2 bg3')
				.addClass(item);
			move(0,item);
		}

		/*
		We want that if we go from the first one to the last one
		(without hovering the middle one), or from the last one
		to the first one, the middle menu's overlay should also
		slide, either from left to right or right to left.
		 */
		if(current == 2 && item == 'bg1'){
			$('#menu .sub'+parseInt(current))
			.stop()
			.animate({backgroundPosition:"(-266px 0)"},300);
		}
		if(current == 0 && item == 'bg3'){
			$('#menu .sub'+parseInt(current+2))
			.stop()
			.animate({backgroundPosition:"(266px 0)"},300);
		}

		/* change the current element */
		current = $this.parent().index();

		/* let's make the overlay of the current one appear */

		$('#menu .sub'+parseInt(current+1))
			.stop().animate({backgroundPosition:"(0 0)"},300,function(){
				$(this).find('li').fadeIn();
			});
	});
	/*
	dir:1 - move left->right
	dir:0 - move right->left
	 */
	function move(dir,item){
		if(dir){
			$('#bg1').parent()
					 .stop()
					 .animate({backgroundPosition:"(0 0)"},200);
			$('#bg2').parent()
					 .stop()
					 .animate({backgroundPosition:"(-266px 0)"},300);
			$('#bg3').parent()
					 .stop()
					 .animate({backgroundPosition:"(-532px 0)"},400,function(){
						$('#menuWrapper').removeClass('bg1 bg2 bg3')
										 .addClass(item);
					 });
		}
		else{
			$('#bg1').parent()
					 .stop()
					 .animate({backgroundPosition:"(0 0)"},400,function(){
						$('#menuWrapper').removeClass('bg1 bg2 bg3')
										 .addClass(item);
					 });
			$('#bg2').parent()
					 .stop()
					 .animate({backgroundPosition:"(-266px 0)"},300);
			$('#bg3').parent()
					 .stop()
					 .animate({backgroundPosition:"(-532px 0)"},200);
		}
	}
});

And that’s it! A beautiful cross-browser capable effect!
I hope that you enjoyed the tutorial.

View demo Download source

Message from TestkingIf want to learn professional web designing but have no time to attent regular class then testking a+ is best solution though. Download the testking mcse design tutorials and testking VCP-410 study guide to learn how to create beautiful and unique logo designs.

A Fresh Bottom Slide Out Menu with jQuery

Mary Lou — Tue, 09 Mar 2010 20:22:23 +0000

View demo Download source

In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. It will slide out from the bottom revealing the description text and some icon. We will use some CSS3 properties for some nice shadow effects and jQuery for the interaction.

The Luna Grey iconset can be downloaded at DryIcons: http://dryicons.com/free-icons/preview/luna-grey-icons/

In the downloadable ZIP I will not be able to provide them, but I kept the naming, so that you can easily integrate it.

Ok, let’s start with the Markup.

The Markup

The menu will be placed inside of a container. The menu itself will be an unordered list with link elements inside. The link elements will contain two spans: one for the title and one for the description. We will also have an i element for the icon:


	
		
			
				
				About
				
					Learn about us and our services
				
			
		
		 
			
				
				Work
				
					See our work and portfolio
				
			
		
		
			
				
				Help
				
					Talk to our support
				
			
		
		 
			
				
				Search
				
					Search our website

Don’t forget to adapt the link element and to add your destination into an href if you need to.

The CSS

Let’s start with the style of the surrounding container. The container will be of relative position since we will make the menu absolute. We will have to hide the description part of the menu items and so we will hide any overflow of the container. If you place this menu absolutely to the page, i.e. at the bottom, the description part will simply disappear outside of you window. This container allows you to see how to implement this menu relatively to some other element:

.container{
    width:900px;
    height:130px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    border:3px solid #fff;
	background-color:#fff;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    -moz-border-radius:0px 0px 20px 20px;
    -webkit-border-bottom-left-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    border-radius:0px 0px 20px 20px;
}

We create some fancy shadowing and rounded borders with the CSS3 properties. Keep in mind that they will only work in modern browsers (so, basically all except marvelous IE).
The list will have the following style:

ul#menu{
    list-style:none;
    position:absolute;
    bottom:0px;
    left:20px;
    font-size:36px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    color:#999;
    letter-spacing:-2px;
}
ul#menu li{
    float:left;
    margin:0px 10px 0px 0px;
}
ul#menu a{
    cursor:pointer;
    position:relative;
    float:left;
    bottom:-95px;
    line-height:20px;
    width:210px;
}

As you can see, we hide the push the link element down in order to almost hide the description span. We do that by giving a negative bottom position. You can adapt this value to make the span appear a little bit more or not at all.
Now, let’s take a look at the classes for the icons:

.icon_about,
.icon_work,
.icon_help,
.icon_search{
    width:64px;
    height:64px;
    display:block;
    left:140px;
    top:50px;
    position:absolute;
}
.icon_about{
    background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
    background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
    background:transparent url(../images/find.png) no-repeat top left;
}

The CSS of the title and description spans will look as follows:

ul#menu span.title{
    display:block;
    height:26px;
    text-shadow:1px 1px 1px #000;
    color:#B7B7B6;
    text-indent:10px;
}
ul#menu span.description{
    width:140px;
    height:80px;
    background-color:#B7B7B6;
    border:3px solid #fff;
    color:#fff;
    display:block;
    font-size:24px;
    padding:10px;
    -moz-box-shadow:1px 1px 6px #000;
    -webkit-box-shadow:1px 1px 6px #000;
    box-shadow:1px 1px 6px #000;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

We also want the two spans to change text and background color, so we define the style for the hover of the parent link element:

ul#menu a:hover span.description{
    background-color:#54504F;
}
ul#menu a:hover span.title{
    color:#54504F;
}

And that’s all the style. Now, let’s add some nice interaction effects with jQuery.

The Javascript

The JavaScript will be pretty straightforward since we will only do two things: slide out the link element and the icon. The following function makes that happen (and the opposite when we move the mouse out):

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-15px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-95px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

In order to slide out the link element, we change the bottom position and animate that. For the icon we change the top value and give the effect more time, since we want to create a little delay.

And that’s it! Enjoy it!

View demo Download source

Message from TestkingWhether you want to get itil certification or interested in cisco certification, using ccna prep resources you pass your certification exam on first attempt.

Photo Zoom Out Effect with jQuery

Mary Lou — Sun, 07 Mar 2010 15:46:51 +0000

View demo Download source

Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out. This effect could be used in photography websites or image galleries. Our example uses some black and white images to focus on the effect.

Ok, let’s get started.

The Markup

We will create some wrappers for the images which will be divs. These wrappers will hide any overflow, because we don’t want the picture (which will be much bigger) to show completely. Inside we will have a link element that surrounds the image:

All images have the same size (500px times 333px) because we want the effect to be the same on each image. You can use images of a different size, but keep in mind that you need to adapt the JavaScript function in order to achieve a smooth effect.

The CSS

The wrapper for the link and the image will float left and have relative positioning. The image will have absolute positioning and we will define the top and left in a way that it centers the image:

.wrap{
    width:200px;
    height:200px;
    margin:0px;
    overflow:hidden;
    position:relative;
    float:left;
}
.wrap a img{
    border:none;
    position:absolute;
    top:-66.5px;
    left:-150px;
    height:500px;
    opacity: 0.5;
}

As mentioned before, the image has a height of 333px. We want the image to be “zoomed in” initially so we set the size bigger. In this case we chose to set it to a height of 500px. When setting the size of just one side, the image will resize accordingly and you don’t have to worry about the other value.

With the JavaScript function we will then zoom the image out.

The JavaScript

The function for hovering over the images will be pretty straightforward: we make the image opaque, change the height to 200px and set the top and left to zero. When moving the mouse out we will set the style back to the initial one:

$(function() {
	$('#container img').hover(
		function(){
			var $this = $(this);
			$this.stop().animate({
					'opacity':'1.0',
					'height':'200px',
					'top':'0px',
					'left':'0px'
				});
		},
		function(){
			var $this = $(this);
			$this.stop().animate({
				'opacity':'0.5',
				'height':'500px',
				'top':'-66.5px',
				'left':'-150px'
				});
		}
	);
});

And that’s it!
Enjoy!

View demo Download source

Message from TestkingGet professional ccie training to learn about jQuery plugins. Sign up for ccent course to prepare and pass your itil v3 certification on time.

Our 10 Absolute Favorite Smashing Magazine Articles

Mary Lou — Tue, 23 Feb 2010 13:02:05 +0000

Some years back when I was starting to study I began to regularly read news and blogs on the web. It was a very exciting time back then since there were many “first timers” rising up.

One of those innovative “first timers” was Smashing Magazine and whenever I was reading their posts I felt like walking inside of a shopping mall at sales time (the girls will understand).

There were so many goodies and interesting articles to soak in (“we smash you with the information which will make your life easier. really.”). My favorite were and still are articles about CSS and design trends. And as a developer you couldn’t really live without the “Lists” which would include collections of reference cards and cheat sheets of all kinds of languages (even LaTeX which was widely used for creating homework and scientific papers in universities, at least in Germany) and, of course, all the other famous collections.

Now, that we have our own little blog about web development and design, I can’t help but to think that one of the reasons why we did it is because of all of the inspiration and discussion that came along with Smashing Magazine and the whole community that was based upon it. They were and are that big example that you point at and say “this is how you do it”, and it made many bloggers follow their footsteps.

So, this article is not going to be a roundup of things that I believe are the best Smashing Magazine articles. It is going to be a collection of articles that shaped me as a web developer and recall nostalgic memories when I read them again (some of them are really “old” and one might not want to use them for inspiration nowadays :-D).

Here they are, our 10 absolute favorite Smashing Magazine Articles:

1.Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby…

This is a great collection of cheat sheets and reference cards from Actionscript to XML. It was incredibly helpful to have this at hand.

2.19 More Free Quality Fonts

This one was an amazing collection of free fonts. Smashing Magazine classic: free and quality.

3.CSS-Based Forms: Modern Solutions

It was THE reference for form design. Whenever I had to create a form, I opened this article. I still do it…

4.Freebies Round-Up: Icons, Buttons and Templates

Here we have one of these articles where you drooled over as a web developer. I was thinking, OMG this is too good to be true…ALL FREE?

5.83 Beautiful WordPress Themes You (Probably) Haven’t Seen

The absolute gigantic WordPress themes showcase.

6.70 Expert Ideas For Better CSS Coding

This is one of the articles where you can say that it determined your style of coding CSS. It was one of the few really complete guides on how to start and organize your stylesheet creation. Classic!

7.CSS-Based Navigation Menus: Modern Solutions

I think the term “Modern Solutions” is so Smashing Magazine. There was a really classy comment on this one by Agust Gudbjornsson:

Great article guys (as usual!),

Really need to comment on some of the users who commented here above where they talk about the modern part of the menus.

The meaning of modern is not something that you don’t see anywhere else or have never seen before, modern means that its used by variety of companies/people in the today market, in this case websites. By saying that these menus are not modern is kind of stupidity or lack of knowledge over the today´s web designs, since you see nearly all major players (such as apple.com) online use menus such as those.

Tabbed menus have been available since paper tabbed bags where created, even before that time. That does not mean that they cant be modern in the year 2008 on websites :o)

Weird to see how people can always complain, or be the “clever” one.

Appreciate the time that these guys are giving us here at SM, awesome content and good resource to keep alive!

Agust

8.35 (Really) Incredible Free Icon Sets

Of course, there were many free icon sets that Smashing Magazine made round-ups of, but this one stood in my head as the most beautiful one. Again, I was thinking, no way these ones are for free!

9.9 Common Usability Mistakes In Web Design

This one really makes you think. I was horrified with how many mistakes I have been doing in designing and this articles just threw it right into my face! It gave so many detailed and helpful ways to rethink my designs.
At this point, a great thanks to Dmitry Fadeyev! You can read more of him on http://www.usabilitypost.com/ or at Smashing Magazine under http://www.smashingmagazine.com/author/dmitry-fadeyev/

10.Design Patterns: Badges, Tag Clouds, Huge Fonts

Ok, this one is really nostalgic, I have to smile at it now, but in 2006 it was so incredibly hip! Some of these trends really made their way and still persist in web design nowadays.

…and that’s it!

Of course, there are so many articles that one could list here. But this was my little collection of Smashing posts that really smashed me! Enjoy!