Let’s start with a cool ass CSS3 tip. I can’t claim credit for this, as I just watched a video of it over at Nettuts+, done by Jeffery Way (my favorite tutorial creator), which you can watch here if you want. But it is really simple, so I’ll give you the gist of it right here.

Ever do image reflections? If you build enough sites, you most likely have. You know what I’m talking about, right? You have an image, and a copy of the image is flipped vertical below it and faded out so it looks like it is a mirror image? Well, you can do that using only CSS3 now, but be aware, as of right now, it only works in Safari and Chrome. I really hope this one gets to Firefox soon, because I have to do this effect often enough where this would make it easy. Here is the CSS:

-webkit-box-reflect: below 4px - webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));

This is all one style, meaning it is not divided into multiple lines. You would put this on an image, and here is what all that crazy does. Obviously it reflects the image, below the original with a 4px gap between them. Adds a linear gradient to the reflection from top to bottom, starting with no color (transparent) and going to white. The color-stop number is how much the reflection shows. And that is it! This is actually one “cool” effect that I actually have a use for. Congrats to Safari/Chrome for getting this into their browsers…now get Firefox on the job.

Now, on to the jQuery!

I’m reading through my Learning jQuery 1.3 book, and I came across a part that I thought all you jQuery starters would like, because it is something you can start using right now. Inserting new elements into the DOM. “But Jeremy, you dumb ass, what if they have javascript disabled?!” First, stop screaming at me. This first part I’m going to show you doesn’t add anything special that a site can’t do without. It is more of a time saver.

I sometimes deal with sites at work that have LOTS of content. Some where it goes past our 30,000+ character limit we enforce to keep page weight down. And you know clients, “I want to have back to top links all over the freakin’ place!” This will make your life much easier if you have that issue.

Here is the jQuery:

$(document).ready(function () {
$('<a href="#top">back to top</a>')
    .insertAfter('p.section');
$('<a id="top"></a>')
    .prependTo('body');
});

The code is fairly straight forward. First, it creates the back to top link, and inserts one after every paragraph tag with a class of section. Then it adds one anchor tag with an id of ‘top’, and adds it directly after the body tag. Done and DONE! Now you don’t have to copy and paste all those damn things in. Just add the class to any paragraph tag you want the link after.

Tomorrow, I’ll show you how to use jQuery to add id’s to each list item in something like a navigation menu. Until then!

Coupon Code: webmachine

$('.smallHeader').replaceWith('<h1>Larger Header</h1>');

Tags: CSS, jQuery

This entry was posted on Wednesday, June 9th, 2010 at 3:23 am and is filed under CSS, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.