CSS-Tricks Screencasts

You know about responsive images. It’s about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it …

Pseudo elements are visible elements on a web page that aren’t “in the DOM” or created from HTML, but are instead inserted directly from CSS. This allows you to do lots of neat design-y things without cluttering the markup. Pseudo …

Follow along as we use a few very simple CSS3 transitions to create a “slideup” box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized …

The Drawing Table is in essence a mini one-page jQuery application. It has one primary function, creating a colored design by changing the colors of cells in an HTML table. However it has many features to make this as easy …

There is no shortage of documentation on WordPress’ famous content-spewing structure, but I still feel like there is more confusion and mystery surrounding “The Loop” than there should be. In this screencast I try and explain what it is, how …

TextMate is a mac-only code editor. Sorry to all the PC users this time around. If you’ve been watching these screencasts for a long time, you know I used to mostly use Coda. Since I’ve been working a lot more …

If you are like me, you are both guilty of seriously unorganized Photoshop documents and appreciate well organized ones. The disorganization isn’t intentional, it’s just born of (if you’ll pardon the likely-inaccurate cliché) being in right-brained creative mode and caring …

Ask a bunch of designers what they wish CSS could do that it can’t now, and you’ll get a big list that reads much like the list of features for the Compass/Sass framework. If you are like me, you don’t …

Working locally with MAMP is awesome, but what about when you need to take that site live? Last time we got a version of WordPress installed locally, now we’ll take that local version and move it to a real live …

I’m way behind the times on this one, but until recently, I have never really developed locally. Everything I did was “going commando” and working directly on servers. The situation arose where I really needed to, so now I have …

One of the articles I updated during “May is Maintenance Month” was an article about dynamic content. The idea was a simple website where clicking a link would fade out the existing content and fade in new content that it …

I built a site for a musician friend of mine who is putting out a new album. Clearly having playable tracks is important, but the classic issue of having those tracks stop when a new page is loaded comes up …

Fair warning: more rambling than usual. Listen to my thoughts about SEO. What I think I know is that SEO is a series of fairly obvious best practices. A SEO service that helps you with those things can be good, …

Roll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning.…

Watch me bumble my way through adding AJAX functionality to a WordPress theme. The idea is that any internal link on the site will load into the main content area without requiring a page refresh, including search. Not always the …

A couple needs a photo gallery for their wedding, where everyone can browse and upload their own photos from the wedding. Beginner developer: I know of some great software we can use, give me a couple of days. Skilled developer:…

When you use jQuery’s .animate() function with something like a hover event, those animations will “queue up”. That is, if you hover multiple times, that animation will fire multiple times. The classic method to prevent this is to throw in …

You’ll have to forgive me here folks, this isn’t a very constructive screencast. I was frustrated at the crappy checkout process for a software product I was trying, so I thought I’d screencast it as a lesson to us all …

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and …