I love the little stuff jQuery can do

I was noodling around the other day with jQuery, and decided to share another simple little navigation script. It is only 8 lines of code, which includes the ready function, and closing brackets, so if you actually take into account just the stuff that matters, only 5 lines. You can check out the demo below.

View Demo

Yes, all it does is move the arrow around on rollover, but it is a simple effect and you might be able to come up with something better knowing how to do this.

Here is the HTML you will need:

<div id="container">
	<ul>
    	<li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
    <div id="arrow"></div>
</div>

Here is the CSS:

#container {
	font: bold 14px Arial, Helvetica, sans-serif;
	width: 1000px;
	margin: 50px auto;
	position: relative;
	border-bottom: 1px #99CC99 solid;
	padding: 0 0 2px;
}
 
ul {
	margin: 0;
	padding: 0;
	background-color: #778377;
	overflow: hidden;
}
 
li {
	list-style: none;
}
 
a {
	display: block;
	float: left;
	padding: 5px 10px;
	border-right: 1px #000000 solid;
	text-decoration: none;
	color: #ffffff;
	text-align: center;
	width: 100px;
	outline: none;
	background-color: #778377;
	-moz-transition-property: background-color;
	-webkit-transition-property: background-color;
	-moz-transition-duration: 0.8s;
	-webkit-transition-duration: 0.8s;
}
 
a:hover {
	color: #99CC99;
	background-color: #525f52;
}
 
#arrow {
	width: 20px;
	height: 20px;
	background: url(images/newMenuArrow.png) no-repeat left top;
	position: absolute;
	top: 20px;
	left: 0;
	margin: 0 0 0 55px;
}

If you look at this nav in a webkit browser you will see the background color transitions that are defined in the CSS. In every other browser, you just won’t see the color fade in.

Here is the jQuery:

$(document).ready(function() {
	var currentPosition = 0;
	var moveWidth = 120;
 
	$('ul').delegate("li", "mouseover", function() {
		currentPosition = ($(this).index());
		$('#arrow').animate({'left' : moveWidth*(currentPosition)}, 200);	
	});
});

What is going on there?

Glad you asked or there wouldn’t be a point to this, would there? First are a couple of variables which you will need to make all this work. The currentPosition variable is the index value of the ‘li’ you rollover. At the start, it is set to 0. The moveWidth is set to 120 because I made this navigation to be a fixed width nav. Now we get into the actual move stuff code.

The delegate is actually cool in that it sets the mouseover handler on the ‘ul’. It checks to see if an ‘li’ was moused over, and if so, run the function. If you didn’t use delegate, you would then have a handler on each ‘li’. This means better efficiency with jQuery. So you mouseover an ‘li’, and the function is called, which sets the current position to the index value of ‘this’, which is the ‘li’ your mouse is on. Then the animation on the div with an id of ‘arrow’ happens. That div moves ‘left’ equal to the amount of the variable ‘moveWidth’ (which is 120) times the currentPosition variable. So if you rollover the second ‘li’, its index value is 1, then times that by 120. In that case, ‘left’ would be 120. Those numbers are recalculated every time you rollover an ‘li’ and the ‘arrow’ div then moves the correct amount. The ’200′ at the end is just the speed I want the animation to move. You can change that to whatever you want.

Further reading

Like I stated at the beginning, this is a simple script, doing a simple animation. If you look at it in a webkit browser, you will see the color changes from the CSS transition. If you are really new to jQuery, looking at little bits of code like this helps you figure out a lot. I also wrote an article a while back on jQuery’s delegate method, which you can read here.

Any questions, let me know! And I hope you guys new at jQuery learned a little!

Coupon Code: webmachine

I’ll be showing you how to do a trap door navigation, which I’m sure has been done before. But I’ll be showing you how to do it in jQuery AND Ext. Why? Because I had to do it in both at work. A trap door navigation is basically a two image system where the ‘li’ gets one image, and the ‘a’ tag gets another so that as the link expands, the image grows with it. When you rollover each navigation item, the images then change.

Why thought can’t you do this with just CSS? You could try like I did using something like ‘li:hover’, but the problem occurs on when the images actually change on rollover. There are issues with the ‘li’ image changing because the ‘a’ tag is on top and that is what you are rolling over. Javascript is used then to correct the issue. Check out the result:

View Demo

What you need to start with, is a cut up image (I prefer slicing, but you do it however you want). You need to versions: what the buttons will look like normally, and what they look like on hover. You end up with 4 images – 2 for the normal, 2 for hover. Below is what I did for the rollover image:

Sliced nav image

The slice with the number 2 is what goes on the ‘li’, while the ’1′ goes on the ‘a’ tag.

Here is the basic HTML you need:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Our Really Kick Ass Blog</a></li>
<li><a href="#">Contact us</a></li>
</ul>

Below is the CSS you need (any other tags don’t matter for the tutorial). As you can see, the ‘li’ has a background call for the image that is seen normally, and it is the longer image of the two. The ‘a’ tag has a background call of the shorter image.

li {
	list-style: none;
	background: url(images/trapOff_02.jpg) no-repeat right top;
	float: left;
}
 
a {
	text-decoration: none;
	color: #000000;
	display: block;
	float: left;
	text-transform: uppercase;
	background: url(images/trapOff_01.jpg) no-repeat left top;
	padding:11px 16px 3px 13px;
}
 
a:hover {
	color: #ffffff;
}

Now onto the jQuery, which I’ll explain after you look over it:

$('ul>li>a').hover(function() {
        $(this).parent().css('background-image', 'url("images/trapOn_02.jpg")');               
        $(this).css("background-image", 'url("images/trapOn_01.jpg")');  
  }, function() {               
       $(this).parent().css('background-image', 'url("images/trapOff_02.jpg")');               
        $(this).css('background-image', 'url("images/trapOff_01.jpg")');                  
  });

The break down

All it is, is a basic hover() method. The first line above, searches for the ‘a’ tag in a list item within a ul (ul>li>a), and puts the hover() method on it. The second line finds the ‘a’ tag, but get’s its parent, which would be its it containing ‘li’. It then uses the css() method to change the background-image to the rollover state image. The third line does the same for the actual ‘a’ tag.

The callback function, then reverses the images so that when you are not hovering over the navigation item, it goes back to normal. That is all there is to it.

Ext – The Extra Terrestrial

To do the same exact thing in Ext JS, some of the stuff changes. I won’t go over it, because most of you probably don’t even know the library exists, but you can see the differences.

Ext.select('div#slot-navigation>ul>li>a').on('mouseover', function(e,t,o) {
        Ext.fly(t).parent().setStyle({
          'background-image': 'url("/images/trapOn_02.jpg")'       
        });               
        Ext.fly(t).setStyle({
          'background-image': 'url("/images/trapOn_01.jpg")'       
        });    
  }); 
 
  Ext.select('div#slot-navigation>ul>li>a').on('mouseout', function(e,t,o) {               
        Ext.fly(t).parent().setStyle({
          'background-image': 'url("/images/trapOff_02.jpg")'       
        });               
        Ext.fly(t).setStyle({
          'background-image': 'url("/images/trapOff_01.jpg")'       
        });                  
  });

Final thoughts

Sometimes CSS isn’t enough to accomplish a certain effect. In this case, I wish it was because it seems like such a simple thing. But, it doesn’t take much javascript to make this work. Hope you learned something!

Coupon Code: webmachine

I’ve read a couple of posts/articles in the past week that REALLY got me excited again about CSS. A guy over at Google, Tab Atkins, has hinted at it, and then this article by Johan Brook talks about it as well.

What the hell am I talking about you ask? Well by the title of this post you should have figured it out.You know all those articles I’ve posted about my experience with Sass and how much I love it? Or maybe my artilce on LESS.js? There are other articles around the net where people commented their worries and complaints on why they didn’t need or use it. Well guess what…you might want to rethink that and start learning. Variables, mixins and nesting might be coming to CSS itself. If you didn’t read the article I linked to above, Webkit is thinking about it, and it may be here as soon as the end of this year.

What does this mean for web developers?

Adding these things into CSS would be a dream come true, and now that there is some actual discussion going on to make this happen (and from people at Google!), that dream is closer to reality. If Chrome (I assume Safari is included in that) adds this functionality in, I think Firefox will be close behind. That’s cool and all, I know, but what does that mean for us?

Simple answer: A whole lot of awesome! Smaller and tight stylesheets! Possibly quicker development time. Might as well start learning it now, cause its not hard, but you do have to put some effort into it to get it down.

CSS seems to be growing in what it handles and does, and faster than people are learning it. Trust me, I work with people who don’t even have CSS2 down and they’ve been working with it for two years. If adding things like this culls the heard a little, I for one am all for it.

What are these new features anyway?

Here is a real quick example of what I have used so far in my redesign of my website, so you can see what we have to look forward to. This is from my Sass file, and is for the right sidebar of my home page.

Below includes some variables, a couple of mixins, and some nested stuff:

/Variables
$dkgray: #2d2d2d;
$orange: #f15c22;
$wht: #ffffff;
$w: 1020px;
$r: right;
$l: left;
 
@mixin font ($size, $weight, $family: "Arial,Helvetica,sans-serif"){
  font: {
    family: #{$family};
    size: $size;
    weight: #{$weight};
  }
}
@mixin sprite($left, $top) {
    background:  url(../images/iconSprite.png) no-repeat $left $top;
}
 
#calltoAction {
	width: 260px;
	height: 181px;
	background: url(../images/calltoAction.png) no-repeat left top;
	color: $dkgray;
	padding: 25px 0 0;
	h1 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: center;
		text-shadow: none;
	}
	h2 {
		@include font(42px, "bold", "Bebas, Arial,Helvetica,sans-serif");
		@include sprite(210px, 13px);
		color: $dkgray;
		text-align: center;
		padding: 0 18px 4px 0;
		text-shadow: 2px 2px 3px #999;
		border: none;
		a {
			color: $dkgray;
			&:hover {
			color: $orange;
			}
		}
	}
	h3 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: right;
		margin: 0 20px 0 0;
	}
}

The tag with an id of #calltoAction has a variable call:

color: $dkgray

Now, $dkgray is set to #2d2d2d, but the best part is, I don’t have to remember the damn hex code for that color. Seems silly at first, but takes less thinking on my part, and really easy to change that color across the board if I have to. No find and replace needed.

You will also see that there is an h1 nested with in that #calltoAction, which only styles the h1 tags within it. This avoids repetition by nesting selectors within one another. Awesome. If you look at the above code you can see I’ve nested some things even deeper, to style the ‘h2 a’ styles.

There is also the mixin calls. If you look at the top of the code above, you see a mixin for the sprite. Anytime I want to use that same sprite (and I do quite often), I type something like this:

@include sprite(210px, 13px);

All that I have to change each time are the pixel numbers for the position. This means less typing and smaller file sizes when all of these things are used. A LOT less repetition goes on throughout as well.

What do you think about this?

Sass and Compass let me do this cool crap now, but if CSS gets this functionality, and compiling happens in browser, there is going to be a lot of happiness. Probably a lot of grumbling and haters as well, but who cares about them? CSS was becoming tedious to write for me without Sass. This will make it fun again for me, and a lot faster to write. I think it needed it, and this is long over due. What do you guys think?

Coupon Code: webmachine

That sums it up quite nicely I think. If you click on the demo below (my actual redesign) and look at it in Chrome (or Safari, though I didn’t look I’ll assume it works there), you will notice that when you roll over the social media icons in the right sidebar, they will change size. I was very proud of myself for accomplishing what I think very few web developers actually use. I’ll go over what I think about CSS3 Animations at the end of the article, but for now, let’s go over how I accomplished this.

View Demo

Cool eh? Until you actually see how much CSS is needed to accomplish this. Keep in mind that I wrote this in Sass (and using Compass’ built in CSS3 mixins), so it actually took waaaaay less lines to do. What I’ll show you though is the actual CSS output that you would have to write if you are NOT writing Sass…which is most of you. The icons are in an unordered list, just so you are informed

The first part are the styles for the li’s:

#social ul li {
list-style: none;
float: left;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
-webkit-animation-name: resize2;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}

As you can see I have a transform: scale on there that is actually keeping it the actual size it should be. That is because there is a hover on the li that will increase its size, so I need the un-hovered li to be at the default. After that you have a call to an animation called ‘resize2′. Remember that, because you’ll see what is going on with that in a bit. I want the animation to last a half second, iteration-count means how many times and I only want it to run once, and then I want it to ease in and out smoothly. So far so good?

Now for the li:hover styles:

#social ul li:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-animation-name: resize;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}

There are two things different here. First I am scaling the size to 1.1 of what the actual size is. This says that when you hover over the ‘li’, make it bigger. Second, I am calling an animation called ‘resize’. NOW for the fun stuff.

Animations – Think of Flash frames written out as text commands

That is exactly what came to mind when I was writing it last night. Remember when I said remember ‘resize2′? Well here are the two actual animations that the li’s are calling:

@-webkit-keyframes resize {
	0% {
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	}
  100% {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  }
}
 
@-webkit-keyframes resize2 {
	0% {
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	}
  100% {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  }
}

Looks like a sort of jQuery function or if/else statement…or something. Either way, it is crazy to look at, and it helps if you think of it as a Flash tween. The first animation, ‘resize’, is actually for the ‘li:hover’, which says at 0% (think frame 1 in Flash) start out at the default size, and at 100% (last frame in Flash animation) make it 10% bigger (the 1.1). The ‘resize2′ animation does the exact opposite which is called out on the ‘li’ (meaning when you are not hovering on it).

There is one side effect on this and that is that when you reload the page, it starts the animation ‘resize2′ because you are not hovering. Doesn’t bother me, and I find it actually cool so I left it the way it is.

Now that I’ve done it, what do I think?

Ok, I wrote my first actual CSS3 animation. I think it is cool, and I have rolled over it about 50 times just to give myself a pat on the back each time. What is your first thought when looking at all of that? That is a lot of css, isn’t it? Pretty much what I thought, and that is just to get the social icons to grow big and small on the hover. Now imagine if you have a ton of other crap that you want to do slick little animations to.

What made this a non-thing for me is that Sass and Compass make writing something like this easy. But writing it out like most of you would seems like a serious pain in the ass. I could have written something similar using jQuery in like 5 lines of code and in about 10 minutes. On the one hand I find it cool that this was done using only CSS. On the other, it is only supported in 2 browsers (Chrome and Safari) and 1 Beta…I hope (FF 4). It does the scaling in FF 3.6, just not the smooth animation. jQuery would have hit all of them.

I am torn between thinking how cool that is, and if something like this should even be in CSS. This goes beyond the basic styling of an element. This is doing some functionality on top, that to me can be more efficiently done in jQuery, so why in the world would I do this again? I will, but it is more of bragging rights than because I should.

My question to you though is two fold: Should CSS be handling this, and if yes, why would you when you could get it done quicker and with less using javascript?

If you want to read more on cool CSS3 animations, transitions and transforms – I highly recommend this.

Coupon Code: webmachine

NOTE: I am going to review it, not go into detail into how things work – there are plenty of tutorials on that (one of which is listed below.
If not for this tutorial by Joshua Johnson, I will have to admit that the 960gs is terribly confusing. He explains how the grid works in plain english, and what the push/pull classes do. I started my redesign build last night, and as previously stated before, I was going to try my hand at this whole grid thing. Follow along, and you will see what I think.

Learning Curve

Either I’m an idiot, or the 960gs is way harder than I thought it was going to be. How could I not understand what is going on under the hood from the get go? First, it didn’t help that I started with the 16 column while designing in Photoshop, only to realize that I wanted the 24 when I started building it. I am already down for the count, because the grids do not line up the same way, due to there being more margin in the 16 column version.

One thing that bugs the hell out of me is that the PSD files are at 1020px wide. Why is there nowhere that says why this is. Do I crop it exactly to 960? If so, why not just make the damn thing AT 960px? So what are you supposed to do? I designed it at the 1020px size and lined everything up at the column lines. I had stuff going beyond, but that was pure graphics stuff – nothing that needed to be lined up. This is the kind of thing that drives me nuts though…the site itself.

Here is the basic low down on learning how to use the 960 Grid System. The first time you use it, you will say to yourself “What the #@%#?” The second time you use it, it will be easier and things will start making a lot more sense. A few times in, and you will be pro. The problem though is that the tutorial I linked to above, was the first one that I actually understood on using some of the classes within the system. The actual site for it is not a great place for documentation.

Let’s start with the pros

I’ll start with the good stuff first, so you don’t feel I am trashing the system.

• CSS – once you understand what each class does, it becomes a breeze to make a layout. Full width column for header, grid 10 there, grid 5 there, push this one, and pull that one. The 960gs can really speed up development.
• Measurements are done for you – No thinking about widths, margins, positions…everything is calculated for you.
• Pre-made templates are great – other than the size issues I had in the PS files, they are easy, well done, and very modifiable.
• Insane amount of templates – Sounds the same but not…the 960gs not only comes in 12, 16 or 24 column templates, it has all the css, sample code, and there is a template for pretty much every piece of software you could possible use (Photoshop, Illustrator, Indesign, Flash, Fireworks…and crap I haven’t heard of).
• Templates/Prototypes – If you are making template based sites or just making a quick prototype, this is where the 960gs shines because of the speed factor.

The stuff I don’t like

Please read this knowing that it is my opinion. I am not bashing the 960gs, I am just telling you what I think the pros and cons are.

• Flexibility – If I want to shift things left, I have to modify the CSS. So what? Well, the damn thing is set at very particular sizes, and really, if I am going to have to adjust a bunch of the styles, I might as well have done it myself. A push or pull shoves the container a specified amount. I felt like if I changed the CSS, I was already ditching the grid.
• Semantics – while this doesn’t bother me much, if you had to hand this off to someone who didn’t know the system, they would look at the class names and scratch their head in confusion. I’m not pro at the semantic thing, but I do try.
• Classes – you can really start adding a ton of classes to the element you are styling. like “grid_5 push_1 prefix_2″…I am making that up, but you get the picture. I’ve read “Ya, but you put an id on it then”…so now I’m just cluttering crap up to make sense out of it?
• Extra containers – maybe this is just my not having enough experience, but if I put padding on say “grid_5″, I have to change the width of grid_5, but that hits all of them, so now I have to add a special class? Or add a container just to do the padding. I feel there is too much potential for divititis using the 960gs.
• Unused classes – there is going to be a bunch of classes that you will not use during a build, which then means you will most likely go through and weed them out.

Final thoughts

I’m glad I tried it out, as it gave me something new to learn. Once you have learned how everything works, the 960gs can really speed up development time. Will I use it for my redesign now that I have worked through it? Not on this redesign. Will I use it for a different project? Yes! I liked it enough to have a full go at it. The photoshop templates alone are good just for design purposes. I feel I have less control over the CSS using the 960gs, but if you use it from the start, and have a clear idea of where you are going, then this is a good tool.

Coupon Code: webmachine

First off, we know for a fact that Safari and Chrome support Transitions, because we’ve all been using one of them to see the cool crap people have been doing. FireFox 4 will support it and they keep adding to it all the time. IE9, as of what I have read, will not. They are still missing a lot of other things, so this is not surprising. But since it is still too early to tell, who knows what the final product will have. The main thing to know is, if you haven’t started getting your CSS3 chops down, you should start. It won’t be long before we are using it on a regular basis. Personally, I use quite a few, but transitions is one that I have stayed away from.

The basic syntax

If you have used CSS3 styles, then you are used to the vendor prefixes. They might be annoying, but they make sense and it just means some additional copying. A simple transition you might have seen is to fade in the background color of a button. Here is what the CSS would look like:

a { 
width: 100px;
height: 30px;
text-align: center;
padding: 15px 0;
display: block; 
color:#ffffff;
background-color: #000000;  
-webkit-transition:background-color 1s ease-in;  
-moz-transition:background-color 1s ease-in;  
-o-transition:background-color 1s ease-in;  
transition:background-color 1s ease-in;  
} 
 
a:hover {
background-color: #ff0000;
}

It turns out that I had nothing to be afraid of, and neither should you. Type in the vendor prefix, then the colon, followed by the property you are transitioning, the amount of time you want the transition to take, and finally the type.

Skew, Scale, Rotate, and Translate

What? These are simple, yet cool. Ever create a button where the text was set at an angle, but you had to use Photoshop to do it? Well, Rotate will keep the text as actual text, and make it easier to fix if someone needs to change what it is saying. Here is what the CSS would look like for each of these:

Skew:

.box {
-moz-transform:skew(20deg);
-webkit-transform:skew(20deg);
-o-transform:skew(20deg);
transform:skew(20deg);
}

Scale – the numbers are percentages, where 1 = 100%:

.box {
-moz-transform:scale(1, 1.5);
-webkit-transform:scale(1, 1.5);
-o-transform:scale(1, 1.5);
transform:scale(1, 1.5);
}

Rotate:

.box {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}

Translate:

.box {
-moz-transform:translate(100px, 100px);
-webkit-transform:translate(100px, 100px);
-o-transform:translate(100px, 100px);
transform:translate(100px, 100px);
}

Easy right? Just remember that skew will distort, scale changes size, rotate turns, and translate moves. But what if you want to do more than one transition or transform? That’s what you want to know now, right? Well, good thing I did the demo that I’ll link to later, or I wouldn’t have known. There was a lot of trial and error, smiles and clapping, swearing and finger pointing at the screen, and….some discovery.

You can’t eat just one!

First thing to remember: you can only have one transform or transition…how do I say this without confusing the crap out of you…property ‘line’. Better if I show you…

This is the BAD:

-webkit-transform: scale(1.5,1.5);
-webkit-transform: rotate(30deg);

Why is that bad? Oh my god, I just pasted that in, give me a second you impatient lot. Because like every other property, the second one overwrites the first. For some reason I thought the above would be different though. They are different transitions right? Yes, but of course…no. Here is what it should look like:

-webkit-transform: scale(1.5,1.5) rotate(30deg);

There is one main syntax part to note when doing multiple transitions vs transforms: use a space between each different transform, and a comma to seperate each transition. You can view my little demo below (Safari or Chrome at the moment), and immediately after is the CSS for the bottom button.

View Demo

#backMovement a {
	color: #ffffff;
	display: block;
	width: 120px;
	height: 50px;
	padding: 15px 0 5px;
	text-decoration: none;
	text-transform: uppercase;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	border: 1px #f60 solid;
	text-shadow: 1px 4px 8px #F60;
	-moz-box-shadow: 1px 4px 8px #F60;
	-webkit-box-shadow: 1px 4px 8px #F60;
	box-shadow: 1px 4px 8px #F60;
	-moz-transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	-webkit-transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	-o-transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	transform: scale(1.5,1.5) rotate(30deg) translate(50px, 50px) skew(20deg);
	background: url(images/grid.jpg) no-repeat 0px -104px;
	-moz-transition: background-position 1s, color 1s ease-in, text-shadow 1s ease-in;
	-webkit-transition: background-position 1s, color 1s ease-in;
	-o-transition: background-position 1s, color 1s ease-in;
	transition: background-position 1s, color 1s ease-in;
}
 
#backMovement a:hover{
	background-position: 0 0;
	color: #F60;
	text-shadow: 1px 4px 8px #fff;
}

Let’s wrap this up

You can obviously see that there is a LOT of lines of css for this stupid button. It’s not even that great looking and it took 31 lines of CSS (block form of course)! Now, think about this…you want to add a gradient, use multiple images, and god knows what. I realize that realistically a lot of the CSS would be trimmed off of this button because most likely you are not going to rotate, skew, translate, color change, background position movement and who knows what else I put on there. BUT…if you think about it, most of that is not that far fetched.

Here is something else to consider. Let’s say you make the button in Photoshop and it is on an image sprite. Which can you do faster, the CSS method or the image method, and what will the actual file size contribution be? Meaning which will weigh more? You do still need the background image for the CSS method. What you do save in the long run, is time on any changes.

One thing I like about the making a button this way is that you can have chunks of the CSS stored in snippets, so that if you need a particular part, you don’t have to write it from scratch every time.

What are your thoughts on this? Let’s here ‘em!

Coupon Code: webmachine

$('.content').scroll(function() {
alert('You are scrolling');
});

NOTE: I am not bashing the article, because I think it is well written. This is my opinion on the mistakes listed. Even though I don’t agree with some, I applaud the author for the piece.

A week or so ago, I read an article called “12 Common CSS Mistakes Web Developers Make“, and after reading it for a second time, I find that I don’t agree with a lot of the article. Frankly, some just are not mistakes, but a person’s preference. As I move along in my web development career, it becomes more apparent that there is less right vs wrong than people would have you believe.

The Zeppelin of Resets

The author’s first listed mistake is not using a proper reset. I agree. See? I’m totally not just bashing. While I find Eric Meyer’s reset CSS incredibly bloated and insane…I use it. Why? Because it is better than the one I had made, and it just plain makes sense. If you don’t know why you would need a reset, or what one is, you will find out in a hurry when you open your site in IE. Man, ul’s and p tags used to drive me insane. Thank you Eric Meyer for your brilliance because it has saved me countless headaches.

Now onto what I disagree with

Ok, here are the ones that I disagree with calling them mistakes. Shorthand CSS. It takes a while to get them down, but once you do, life becomes a little faster. A quick example:

/* Non shorthand */
.myClass {
background-image: url(../images/photo1.jpg);
background-repeat: no-repeat;
background-position: left top;
}
 
/* Shorthand version */
.myClass {
background: url(../images/photo1.jpg) no-repeat left top;
}

See? Much easier…but not the point. I don’t think using long hand is a mistake. To me, the only thing that matters is that you are using the properties correctly. Yes you save file/page weight, but I’m a fan of minifing css which could help that out a lot. Plus, for a majority of people, you are not going to be using the thousand lines or more CSS files that I see every day. I’m just not calling this one bad. I would much rather have a person on my team using longhand rather than just bad css.

Adding ‘px’ after the ’0′ in a property’s value is another of the mistakes listed. Nope. Again, not a mistake. Are you adding small amounts of weight to the page when it is all taken in together? Yes, but I dare you to make a test where you can actually notice the difference. Again, minifing the CSS is going to take care of the major weight killer. I will call this one preference too.

Who the #$%@ types red?

Number 6 in the article baffles me. People using the word ‘red’ instead of a hex number like ‘#ff0000′. Not because it isn’t a mistake…it is, and his reason is correct with how browsers interprets what ‘red’ is, but that he thinks people are actually doing this. I’ve worked with a decent amount of designers and developers not, and the ONLY people I have seen use the color names are programmers. They don’t care. They throw lime, red, yellow, navy and all sorts of god awful colors on the page just so they know what sections are different, not because they think they are pretty. I just can’t believe there are people doing this that are being serious in their design. If you are doing a super rough demo….maaaaaaybe….nope, never mind…still wouldn’t happen. I agree its a mistake…I disagree that people are doing it, and YOU cannot convince me of that. I call bullshit.

Redundancy

I feel redundant just by typing that heading. Anyway, he is saying that creating styles that share the same properties is a mistake. Can’t agree on that either, but this probably has to do with my having to work with content editors that have varying levels of CSS skill. Example of what the author is talking about:

.myClass1 {
color: #fff;
font-size: 14px;
text-align: right;
}
 
.myClass2 {
color: #fff;
font-size: 14px;
text-align: right;
border-bottom: 1px #ff0000 solid;
}

It could be condensed to this:

.myClass1, .myClass2 {
color: #fff;
font-size: 14px;
text-align: right;
}
 
.myClass2 {
border-bottom: 1px #ff0000 solid;
}

This falls more into the “I love writing CSS so much that I repeat things unnecessarily” than an actual mistake.

Others he lists like “too much white space” and “organizing your CSS in a logical way”, and using one stylesheet, not mistakes. Here is some redundancy…minify it (linked to my article about it above)…gets rid of all the white space. And logical way? I know I am sounding testy here, but I am not bashing his points…just don’t agree. Logical to who exactly? Order it any damn way you want, because realistically, we are all addicted to Firebug anyway. I never search through a CSS file, I Firebug what I’m looking for, find the line and use the shortcut in whatever IDE I am using to Go To Line: whatever. I structure my CSS the same way every time, so I usually have a general idea of where something will be. But one developer’s logical is another’s madhouse.

What I consider actual mistakes – Negative Margins

Using negative top margins in an attempt to position something the way you want it. Ever see that? I used to do it when I first got into CSS years ago. Can’t seem to get a div where it needs to go, so you end up with a top margin of like -240px or something. Bad. Get a handle on positioning divs and this will never happen again. IE doesn’t play nice with the whole negative margin thing. Completely horrible idea, and I see it used all the time.

Let’s make everything important so we don’t know what IS important

Not everything is as important as people think. No, I mean that literally. I have seen too many uses of !important on a property, simply because the CSS writer doesn’t know how to overwrite that particular style. With that stupid !important on there, it becomes a real pain in the ass to change later.

Margin and Padding usage

My favorite. Disregard on proper usage of margin or padding. I have seen people use one instead of the other to the point where changing a layout or div position becomes a giant cluster of crap. Don’t mix and match them to suite your needs, use them properly please! Another actual mistake.

Root Beer Floats

I think a lot of newbie web developers/designers do this when they are starting out. They figure out what float does, and then float the hell out of everything. Totally unnecessary and can be hard to change things in a complicated design when everything and its mother is floated. Use it when you need it(and don’t forget to feed it, can you picture that!), not to make root beer floats out of your page.

Conclusion of all this

The author of the original article did a good job at pointing some things out, but I have to disagree on some of the things he calls mistakes. I believe most could be called a preference thing. To me, a mistake is when you are doing something wrong that has the potential to wreck a page, or makes it difficult to change once done.

Anyone out there now any other ‘actual’ mistakes? Let me know!

Coupon Code: webmachine

I received a tweet the other day about these cool CSS3 buttons called BonBon Buttons. The site says they are named after the French word for candy, but after looking at them, they look like Pez to me. Hmmm…that is what I will call mine…Pez! Regardless they are very pretty. Even better, the creator of them lists where it won’t work. He was just tooling around one day and made these buttons. Well, I decided to do the “poor man’s version” of those. And unlike the BonBon buttons, my Pez button will work in IE6 as long as you use CSS PIE, with the exception of text-shadow, and the radial gradient. Those two properties don’t add all that much, and even without them they look good in IE.

View Demo

Are there 4 tons of CSS involved?

There is well over 100 lines of CSS in the BonBon version, so I wanted to reduce that amount to something close to manageable. It still looks good, but I had to cut a bunch of stuff out. Here is a look at the actual CSS code for my button.

a {
position: relative;
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #76A14B;
text-decoration: none;
text-align: center;
-webkit-border-radius: 25px 10px 25px 10px;
-moz-border-radius: 25px 10px 25px 10px;
border-radius: 25px 10px 25px 10px;
border: 2px solid #BFE599;
padding: 10px 20px;
display: block;
width: 100px;
margin: 0 auto;
-moz-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
-webkit-box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
box-shadow: 0px 6px 0px #76a14b, 0 12px 9px #666666;
text-shadow: 2px 2px 5px #ffffff;
behavior: url(images/PIE.htc);
}
 
.glassy {
background: -moz-radial-gradient(center top , ellipse farthest-corner, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), -moz-linear-gradient(top, #CCFF99, #99CC66);
background-image: -webkit-gradient(radial, 100 100, 32, 118 118, 15, from(rgba(255, 255, 255, 0)), to(#ffffff)), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFF99), to(#99CC66));
-pie-background: linear-gradient(top, #CCFF99, #99CC66);
}

The glassy part adds the background gradients as well as white radial gradient at the top of the button. So I reduced it down to like 30 lines of CSS for a pretty cool button.There are a few things to note:

1) As stated before, you MUST use CSS Pie for this to work in IE.

2) Ignore the webkit radial gradient, because I didn’t figure out how to do it correctly. Webkit’s syntax is a pain in the ass, so I just didn’t get it working correctly. If anyone wants to get that part done and post it, that would be great.

3) For IE6 to work, the ‘a’ tag MUST be positioned relative. The effects get blow away if you do not.

Final thoughts on this little experiment

The really cool part for me about doing this, is that I’ve used two things/techniques from my previous posts. I’m using CSS Pie, and using multiple box-shadows on an element, which I wrote about here.

I really like taking other people’s code, and seeing if I can do it with less code. Granted, here I am leaving some things out, but the overall effect comes through. My Pez button still looks like candy, and it didn’t take a vast amount of CSS to work. Would I use this button myself rather than cut images? Actually, with it pre-made, yes. If it wasn’t, then no. It took me a while to get everything the way I wanted it, and you just can’t waste that much creating a single button. So in production, I would have Sliced ‘n’ Diced an image. Now, if you had a library of pre-made, small weight budget CSS3 buttons, then I might start using these types of things more often. Maybe I’ll start one and throw it out for you guys.

Take the code above and have fun with it. If you come up with something better, let me know!

Coupon Code: webmachine

There are four types of positioning: static, fixed, relative, and absolute. Static is the default position state which means it isn’t positioned. It goes where it normally would on the page. Fixed is positioned relative to the browser window, and won’t move even if the window is scrolled. Relative positioning allows you to use the top, right, bottom, and left CSS properties to position an element relative to where it would appear in the document. Absolute is the tricky one, because it is basically removed from the document, and placed EXACTLY where you want it to go.

A note on :relative

If you position something relative, and then use top and left to shift it over, don’t expect everything below it to shift as well. It still occupies the space in the document normally, you are just shifting it from its initial placement.

Let’s take a look

View the following demos to get a clearer picture of what I am talking about.

When you position something absolute, you need to remember that it is removed from the flow of the document – everything else will ignore it. The element is positioned relative to the first parent element that has a position other than static, if there are none, it will use . If that is the case, and you set the element’s top and left to 0, it will appear at the very top left edge of the window. No matter how you resize that window, that element will always be at the very top left. Take a look at what we would have.

View Demo

Here is what the css looks like:

#one {
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 0;
	left: 0;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

How to put it where you want it

Let’s say though, that you want an element in a specific spot that shows exactly where you want it all the time. Easy. Position one of its parents to relative!

View Demo

Here is what the css would look like:

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
}

All that was changed, was adding position: relative to div #one, and changing the top and left numbers to div 2. Change them to 0 using Firebug, and you will see that 0 means positioned at the top left of div #one now.

One is never enough

Ooohhhh…I get it, you can’t just have one. You want another div there positioned absolutely. AND…you want this new div to appear under the red one.

View Demo

#one {
position: relative;
width: 966px;
background: #999999;
margin: 40px auto;
}
 
#two {
	position: absolute;
	top: 50px;
	left: 500px;
	background: #ff0000;
	width: 200px;
	height: 50px;
	z-index: 2;
}
 
#three {
	position: absolute;
	top: 85px;
	left: 550px;
	background: #999900;
	width: 200px;
	height: 50px;
}

All I changed there, aside from adding the styles for div #three, is add z-index to div #two. It doesn’t matter what order the absoluted divs are in, just what z-index they have. Whichever element has the higher z-index, will show on top.

Closing thoughts

CSS positioning is actually very easy. Once you know how to use them, figuring out why an element isn’t positioned the way you thought it would be, becomes a lot easier, too. I can’t think of a time where I have used :fixed, but :relative and :absolute are thrown around enough that it is a must to learn if you haven’t yet. Hopefully now, you get a more clear picture of what they do, and how to control them! Let me know if you have any questions.

Coupon Code: webmachine

So I read an article today that I thought was going to suck. Nope, I was wrong. While I knew most of it, there was one thing that popped out at me today. See? Learnin’ all the time! CSS3 has some cool stuff that is easier to do than opening up Photoshop and creating an image for it. If you got my tweet today, which most of my subscribers didn’t because you don’t follow me on twitter (FOLLOW ME!), then you have an inkling of what I am talking about.

Text-shadow is a really good addition to CSS, I use it on my titles and what-not, and with the use of blur on them, it creates a nice subtle effect. What I did NOT know, is that you can have multiple shadows on the text, adding more awesome to the already kick ass property. Let me show you what the styles look like.

text-shadow: 4px -2px 11px #0033FF,
	2px -7px 10px #00CCFF,
	5px -8px 26px #00CCCC,
	 4px 6px 9px #999999;

VIEW DEMO

Yep! You read that right, there are 4 shadows going on there

Holy hell, 4 text-shadows thrown on to create, while not a stellar looking effect, a crazy looking block of text. You know what is even more nuts than that? Can you guess? GOOD JOB! You guys are smarter than I thought, and you are right. You can add as many text-shadows as you want on that thing, seperated by commas. Not only that, but you can do the same thing for box shadows.

This just proves that there is always something new to learn about the things you think are are good at. Obviously I won’t be using this type of effect all that much, but it altered my way of thinking about CSS3 a little. If I can do this…maybe I can do something else that I didn’t think of.

Any other CSS3 stuff you guys know that others might not? Let us know here!

Oh, and I styled the demo buttons finally. Always adding stuff here.

Coupon Code: webmachine

$('p:only-child').addClass('highlight');