CSS-Tricks Screencasts

#123: If it Moves When You Click, Make Something Stick

chriscoyier@gmail.com (Chris Coyier) — Tue, 09 Apr 2013 17:21:47 +0000

The buttons on CSS-Tricks, at the time of this video, have a faux 3D effect. They look like a blue brick you are looking at from above at an angle. When you press down on them, their :active state is triggered (like all links/buttons/inputs) and the CSS moves them down and to the right, appearing as if you are literally pressing the brick down into the surface a bit.

What's the problem? When you move an element like that (in …

#122: The State of Favicons

chriscoyier@gmail.com (Chris Coyier) — Thu, 28 Mar 2013 15:19:18 +0000

Forever we all made 16x16 graphics and got them into the .ico format somehow. I probably used this converter tool a million times. Somewhere along the line it started to get more confusing. Browsers can support .png favicons too. And now there are retina displays, and nothing looks worse on retina than little tiny graphics scaled up. Browsers are starting to support 32x32 favicons now too. What are we to do?

The situation is that if you provide both, many …

#121: The Right CMS is a Customized One

chriscoyier@gmail.com (Chris Coyier) — Tue, 19 Mar 2013 00:40:54 +0000

The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. They require customization. For instance, a feature article for a news site isn't just a title and content anymore. It's a title, optional subtitle, alternate short title, blurb, full content, related articles, featured image, optional featured video, and optional slideshow/slides. If your CMS can make those fields available on the entry screen, that's a recipe for success.

This screencast covers customizing WordPress to be …

#120: A Sublime Text Snippet for Media Query Mixins

chriscoyier@gmail.com (Chris Coyier) — Fri, 15 Mar 2013 20:46:47 +0000

I've never messed with creating custom Sublime Text snippets before. So when James Nowland sent one in, I took the opportunity to learn. Here it is:

<snippet>
  <content><![CDATA[
@include breakpoint(${1:papa-bear / mama-bear / baby-bear}) {
    ${2:}
}
 
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<tabTrigger>mq</tabTrigger> 
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

The point of this particular snippet is to help with …

#119: Let’s Answer Forum Posts! Vol. 2

chriscoyier@gmail.com (Chris Coyier) — Wed, 23 Jan 2013 21:27:27 +0000

In this screencast we live answer more forums posts with no planning whatsoever. I don't think we hit a homerun on any of the threads we look at, but that's the lesson. You don't have to have the answers to everything to be a useful forum member. Just a few thoughts and your related experience can be helpful in nudging the original person in the right direction.…

#118: Introduction to CodePen PRO

chriscoyier@gmail.com (Chris Coyier) — Tue, 08 Jan 2013 19:40:21 +0000

CodePen PRO offers a slew of new features. You can read about them, but much better to show them right?

[Deep awesome voice]: and this is just the beginning.…

#117: Let’s Attempt To Do a “Pull Request”

chriscoyier@gmail.com (Chris Coyier) — Sat, 05 Jan 2013 19:42:03 +0000

I've never in my life submitted a "Pull Request" on GitHub. I wanted to give it a shot, so this video is capturing the moment of me attempting to figure it out. Fair warning, this isn't a succinct, quick tutorial. This is me thinking to myself and struggling through it all.

My idea was that I wanted to put FitVids.js onto cdnjs so people can link it up through there. Their process for doing that is by forking their GitHub …

#116: Let’s Answer Forum Posts!

chriscoyier@gmail.com (Chris Coyier) — Wed, 12 Dec 2012 00:03:40 +0000

In this screencast we pop over to The Forums to answer as many questions as we can. The point is just to have a little fun and show you how easy it is to contribute to the community. Become a good member there, and next time you are stuck your chances of getting help skyrocket!

You don't have to be a super genius at everything. I'm certainly not and I prove it in this screencast by not having a good …

#115: Don’t Overthink It Grids

chriscoyier@gmail.com (Chris Coyier) — Wed, 24 Oct 2012 14:02:00 +0000

Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that's a grid. There are new layout methods in CSS that are getting closer to prime time (like flexbox and grid layout) that will be very great for grids, but for now, floats are still doing the job.

I see a new grid framework just about every week. I think this saturation of grid frameworks gives rise …

#114: Let’s Do Simple Stuff to Make Our Websites Faster

chriscoyier@gmail.com (Chris Coyier) — Thu, 30 Aug 2012 22:18:18 +0000

I present four really simple things you can do to make your websites faster. Nothing even as complex as making image sprites (which ain't that complicated). These are all easy wins with big possible performance gains. Plus, we handle a "Performance Troll" at the end.

Links from the video:

HTML5 Boilerplate
gzipWTF.com
Billy Hoffman - Zoompf.com
Steve Souders - 80/20
Paul Irish

W3 Total Cache

#113: Creating and Using a Custom Icon Font

chriscoyier@gmail.com (Chris Coyier) — Wed, 22 Aug 2012 15:00:51 +0000

As we've said around here many times: icon fonts are awesome. They are efficient in the same way CSS sprites are efficient: lots of images usable for different areas/purposes in one single download. But they are even more awesome than sprites because they are vector and so can scale to any size, be shadowed, change color, and more. They also look fantastic on retina displays (or displays of any size and resolution, really).

To be the most efficient with your …

#112: Using CodePen

chriscoyier@gmail.com (Chris Coyier) — Wed, 27 Jun 2012 18:11:40 +0000

CodePen is an app for sharing and playing around with front end code. I made it with some friends of mine: Alex Vazquez and Tim Sabat. In this typical ramble-ridden screencast I introduce what it is, what it's for, how to use it, and some of its fancy features.…

#111: Get Yourself Preprocessing in Just a Few Minutes

chriscoyier@gmail.com (Chris Coyier) — Sun, 13 May 2012 16:49:39 +0000

There is nothing to be afraid about in this brave new world of preprocessing. Native apps make it so easy that it should be a vital part of any modern workflow. In this video we have a simple project in which we use Jade and Sass on. We use CodeKit to watch the project, which not only makes the preprocessing trivially easy, but helps in more ways like refreshing the browser, injecting styles, and optimizing images.

Links from the video:…

#110: Quick Overview of CSS Position Values

chriscoyier@gmail.com (Chris Coyier) — Sun, 18 Mar 2012 22:30:18 +0000

This is a quick beginner-level overview of the different CSS position values. In a nutshell: relative allows you to "nudge" and leaves the element's original position in the page flow. Absolute and fixed allow for exact placement of elements and remove them from the page flow. Fixed positioned elements are unaffected by scrolling. All of them set a new positioning context and allow z-index to work.

Links from Video:

Dabblet
Position (on MDN)

#109: Getting off FTP and onto Git Deployment with Beanstalk

chriscoyier@gmail.com (Chris Coyier) — Mon, 13 Feb 2012 20:09:35 +0000

In this screencast I move my own personal website from my old live FTP editing ways to a proper version controlled system including deployment. I haven't had much experience with this, so forgive me if it's a bit rough.

We start by moving the live website local, including bringing all the files down and copying the database. Then we set up a Git repository in Beanstalk and push it all up to that. Then we give Beanstalk our FTP credentials …

#108: Using Chartwell

chriscoyier@gmail.com (Chris Coyier) — Mon, 30 Jan 2012 01:33:53 +0000

Chartwell is a font specifically for making simple and beautiful pie charts, bar charts, and line graphs. It's as simple as writing out simple equations like 40+20+25+15. In desktop software like Adobe Illustrator, you control the graph by writing out the formula in that font then turning on ligatures. On the web, the formula is in text and you apply the font via @font-face and a JavaScript polyfill for ligature support. Browser support goes back even to IE 6.

Links …

#107: LiveReload, a Menu Bar App for Preprocessors and Speedy Development

chriscoyier@gmail.com (Chris Coyier) — Wed, 14 Dec 2011 16:17:56 +0000

LiveReload is a Mac-only menu bar app that is quite helpful for web developers. Just tell it to watch a specific folder, and when a file is saved, the browser will automatically refresh showing the change. So no need to switch applications and manually refresh, which is awkward and prone to breaking concentration.

Even better, LiveReload can trigger all the preprocessing to happen first. So if you like to work in SASS, Compass, LESS, Jade, CoffeeScript, Eco, HAML, Slim, or …

#106: Use BrowserStack for Live Web-Based Cross Browser Testing

chriscoyier@gmail.com (Chris Coyier) — Mon, 12 Dec 2011 16:02:51 +0000

There are many tools for showing you screenshots of websites in different browsers to help with testing. But a screenshot is lacking in so many ways: no clicking, no hovering, no typing, no resizing, no testing JavaScript or other interactive elements, nothing. Real cross-browser testing means opening those websites in real live browsers. Some people use virtual machines to do that testing, but that can be resource intensive in more ways than one.

BrowserStack is the holy grail of cross-browser …

#105: Using SpriteCow

chriscoyier@gmail.com (Chris Coyier) — Wed, 16 Nov 2011 16:04:42 +0000

In which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exact position values needed to use the individual images. Pseudo elements are also used to help maintain accessibility.

Links from the video:

SpriteCow

#104: Quick Tip: Use Dropbox to Make a Public URL for Anything

chriscoyier@gmail.com (Chris Coyier) — Mon, 07 Nov 2011 14:45:44 +0000

Just save the website from the browser (in Firefox, you get an .html file and all the resources), drop it in your Public folder, and use the right-click contextual menu to grab the public URL.…

#103: Integrating FitVids.js into WordPress

chriscoyier@gmail.com (Chris Coyier) — Wed, 02 Nov 2011 14:45:54 +0000

The default WordPress theme at the time of this screencast is TwentyEleven, a wonderfully simple and responsive design. That is, until we post an awesome YouTube video as a new blog post and the responsiveness breaks down. The video doesn't fill the area on wide screens and is too big on narrow screens, breaking outside the content area.

In this video we'll cover how to add jQuery to a WordPress theme, then download the jQuery plugin FitVids.js and integrate it …

#102: Braindump on Responsive Web Design

chriscoyier@gmail.com (Chris Coyier) — Fri, 14 Oct 2011 17:36:06 +0000

In which I show and explain the very basics of what "responsive web design" has come to mean. Then I go all over the place and show examples, related resources, relevant people, tips and tricks, and more.…

#101: Let’s Suck at GitHub Together

chriscoyier@gmail.com (Chris Coyier) — Thu, 25 Aug 2011 02:42:48 +0000

You are probably pretty aware of why using version control is a good thing. In case you aren't, I quickly go through that in this video. Then we get into the most basic thing we can possibly do: put a project onto GitHub. If you are like me, you don't particularly enjoy "the command line", but between that and a Mac GUI app, we manage to get it done.

Links from the Video:

GitHub
Tower
Slide to Unlock Tutorial -

#100: Let’s Write Semantic Markup

chriscoyier@gmail.com (Chris Coyier) — Wed, 17 Aug 2011 05:05:42 +0000

We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up. We don't write any actual CSS, but we discuss CSS as we go, because markup choices and where we do/don't need classes/ID's are directly related to that. …

#99: Overview of HTML5 Forms Types, Attributes, and Elements

chriscoyier@gmail.com (Chris Coyier) — Mon, 20 Jun 2011 11:37:16 +0000

HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it works, great, the form is better, if not, whatever. In this screencast we look at all the new types, attributes, and elements and finish up looking at real world forms and how they could be better if they used these …

#98: Playing with Body Borders

chriscoyier@gmail.com (Chris Coyier) — Fri, 27 May 2011 00:06:03 +0000

Putting a border around the inside of the browser window is such a simple little idea and can be a nice design effect. But how do we do it so that the borders don't scroll away as the page scrolls? And what about IE? And what about mobile devices? We look at a bunch of techniques for doing the body border, but they journey and technologies we look at on the way there are the interesting part.

Links from the …

#97: Intro to CSS Animations

chriscoyier@gmail.com (Chris Coyier) — Thu, 12 May 2011 19:46:09 +0000

Animations, like transitions, can alter page elements over time. Animations are more powerful and more complex in many ways. You need to declare an animation with a special syntax before you can use it, which allows you to specify values for multiple properties at different percentages of the animations completion ("keyframes"). Then when you do use it, there are lots of values you can set as to how you want it to behave. We'll cover all that as we build …

#96: localStorage for Forms

chriscoyier@gmail.com (Chris Coyier) — Fri, 15 Apr 2011 13:38:37 +0000

HTML5 has an incredibly simple method for storing persisting data called localStorage. Natively, you just call a method with key/value pair and that is saved (pretty much) forever. Knowing the key, you can retrieve it at any time. This can be used with "progressive enhancement" in mind, doing things to enhance experiences but not be required. In this screencast we'll look at how to save the data on a form (before submission) so in case the browser window closed …

#95: A Tale of Border Gradients

chriscoyier@gmail.com (Chris Coyier) — Thu, 07 Apr 2011 20:54:36 +0000

Turns out there is a simple way to accomplish gradients on borders. That took me longer than it should have to arrive at though, this screencast covers all the ways I tried and looked at along the way.

View Demo Download Files

Links from Video:

SnapBird (finding old tweets)
CSS3Please

#94: Intro to Pseudo Elements

chriscoyier@gmail.com (Chris Coyier) — Wed, 19 Jan 2011 16:09:51 +0000

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 elements are CSS 2, so browser support for them is pretty good!

Links from Video:

Nicolas Gallagher: interview, multiple backgrounds, icons
Meet the Pseudo Class Selectors
Matt Hamm: page curl
CSS Triangle

#93: CSS3 Slideup Boxes

chriscoyier@gmail.com (Chris Coyier) — Mon, 08 Nov 2010 11:37:09 +0000

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 box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.

View

#92: Code Walkthrough of Drawing Table

chriscoyier@gmail.com (Chris Coyier) — Thu, 07 Oct 2010 19:44:04 +0000

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 and useful as possible. In this screencast we walk through the existing code looking at the finished example, the markup, and the JavaScript powering that it - feature by feature.

Links from Video:

#91: The WordPress Loop

chriscoyier@gmail.com (Chris Coyier) — Tue, 31 Aug 2010 11:59:57 +0000

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 it works, related parts, and then demonstrate some alterations and various tricks. Things like running multiple loops, writing your own custom queries, and handling pagination with your own custom loops.

Links from Video:

Codex: query_posts

#90: Simple TextMate Tips

chriscoyier@gmail.com (Chris Coyier) — Thu, 22 Jul 2010 12:48:03 +0000

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 locally, I've been using much more TextMate, which I've always considered to be superior as a code editor but just wasn't as convenient as Coda being all-in-one. I'll cover some things I find cool and useful in TextMate, like vertical …

#89: Organizing a Photoshop Document

chriscoyier@gmail.com (Chris Coyier) — Thu, 08 Jul 2010 11:50:13 +0000

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 about what you are looking at not the left-brained organizational stuff. Then it compounds itself as you go in and out of the file for days on end. If you are handing this file off to someone else, or are …

#88: Intro to Compass/Sass

chriscoyier@gmail.com (Chris Coyier) — Wed, 23 Jun 2010 21:07:35 +0000

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 have any trouble writing CSS, but the thought of being able to using things like variables, mixins, and nesting is rather enticing. I learned quite a bit in my first musings with Compass/Sass and answered a lot of my own …

#87: Moving Up with MAMP

chriscoyier@gmail.com (Chris Coyier) — Thu, 17 Jun 2010 11:41:27 +0000

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 site. This entails moving files as well as moving the database, and changing a couple of values in that database.

Links from Video:

#86: First Moments with MAMP

chriscoyier@gmail.com (Chris Coyier) — Fri, 28 May 2010 12:52:41 +0000

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 MAMP (Mac, Apache, MySQL, and PHP) installed locally. It is an excellent program and works great. I go over what it's like in the first few minutes of using it, and get a fresh copy of WordPress installed locally.

Links …

#85: Best Practices with Dynamic Content

chriscoyier@gmail.com (Chris Coyier) — Thu, 13 May 2010 13:28:47 +0000

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 fetched via AJAX. The old article didn't encompass what I now consider to be best practices for this kind of thing. 1) Works fine with JavaScript disabled. 2) It is possible to "deep link" to specific content. 3) The browsers …

#84: Site Walkthrough of chris-mcgarry.com

chriscoyier@gmail.com (Chris Coyier) — Thu, 15 Apr 2010 13:02:12 +0000

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 (like Screencast #81). This time instead of using AJAX, all the content on the entire site exists on one page, and things are shuffled around through jQuery animations. The result is a somewhat Flash-like website, but without all the pitfalls …

#83: Thoughts on SEO

chriscoyier@gmail.com (Chris Coyier) — Thu, 01 Apr 2010 11:52:31 +0000

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, a SEO service that claims to do anything else seems shady. However, there are plenty of examples where seemingly doing everything right doesn't seem to work, and results that show up higher than your project look like pure garbage. SEO …

#82: CSS Image Switcher

chriscoyier@gmail.com (Chris Coyier) — Thu, 04 Mar 2010 13:04:34 +0000

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.

Links from Video:

Demo
Download

#81: AJAXing a WordPress Theme

chriscoyier@gmail.com (Chris Coyier) — Thu, 25 Feb 2010 13:30:35 +0000

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 most practical idea in the world, but it's kinda neat, and as I show in the video, I did find a nice real-world problem that it solved.

Links from Video:

#80: Regarding Wheel Invention

chriscoyier@gmail.com (Chris Coyier) — Thu, 11 Feb 2010 13:37:56 +0000

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: I'll write something up from scratch for you, it will be perfect, give me a couple of weeks. Wise developer: Let's just use a Flickr group, give me a couple of minutes.

"Reinventing the wheel" on the web means doing …

#79: Complete/Non-Queuing Animations with jQuery

chriscoyier@gmail.com (Chris Coyier) — Fri, 22 Jan 2010 15:04:21 +0000

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 a .stop() before the animation, but I find this abrupt and not ideal, because it prevents the animation from completing a full cycle. In this screencast we'll look at a few attempts at solving this and ultimately using a plugin …

#78: On Web Advertising

chriscoyier@gmail.com (Chris Coyier) — Mon, 04 Jan 2010 13:06:10 +0000

In this screencast I discuss online advertising. What it is, how it works, and why it isn't evil (except when it is). I talk about my experiences, the different services out there and the ones I use. Advertising is a symbiotic relationship between content websites and product/service websites. Goes with an accompanying article. …

#77: Styling an Individual Article

chriscoyier@gmail.com (Chris Coyier) — Wed, 16 Dec 2009 13:49:55 +0000

The idea of "art directing" posts is very popular lately. It's the idea of applying unique styling to an article on the web in the way that print designers uniquely style articles for, say, a magazine. This is more than just a trend, it's just a good idea. In this screencast I show and example of doing this with WordPress and a specific plugin made for helping with this idea.

Links from Video:

#76: A Tour of jQuery on a Live Site

chriscoyier@gmail.com (Chris Coyier) — Fri, 20 Nov 2009 15:04:19 +0000

I'm busy, you're busy, we're all busy trying to meet deadlines and get things done in this crazy web world. I love learning new technologies when I can, but I'm the first to admit that I reach for tools that I already know well because I can be instantly productive that way. jQuery is one of those tools for me. In this screencast I walk through a website where I used jQuery all over the place in different capacities to …

#75: How Not To Design a Checkout

chriscoyier@gmail.com (Chris Coyier) — Thu, 29 Oct 2009 00:11:20 +0000

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 on how not to design a checkout. It was confusing, frustrating, error-prone, and make me feel unsafe about even going through with the transaction. If you are designing a site to sell something online, nothing is more important to your …

#74: Editable CSS3 Image Gallery

chriscoyier@gmail.com (Chris Coyier) — Sun, 18 Oct 2009 23:23:49 +0000

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 made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Links from Video:

#73: Building a Website (3 of 3): WordPress Theme

chriscoyier@gmail.com (Chris Coyier) — Thu, 01 Oct 2009 17:36:26 +0000

In part 3 of this series, we take the HTML and CSS that we have already created for this design, and convert it into a WordPress theme. We start with a completely "blank" WordPress theme, then take different parts of the HTML and put them where they need to be in the theme. We are careful to keep as much dynamic WordPress stuff in there as possible, for example, dynamically creating the menu, loading jQuery the smart way, and more.…

#72: Building a Website (2 of 3): HTML/CSS Conversion

chriscoyier@gmail.com (Chris Coyier) — Wed, 23 Sep 2009 14:04:17 +0000

In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn't actually "slicing" the Photoshop file, but looking …

#71: Building a Website (1 of 3): Photoshop Mockup

chriscoyier@gmail.com (Chris Coyier) — Wed, 16 Sep 2009 15:59:08 +0000

This is the start of a three-part series on building a website. This will be a real website for a musician friend of mine, who's website I happen to ruin during a routine WordPress upgrade. In part 1, we start from absolute scratch in Photoshop, with just a few provided resources from the client. We design the homepage and skin for the site, according to new needs that the client has, the feel he wants to project, and keeping true …

#70: Random Pet Peeves

chriscoyier@gmail.com (Chris Coyier) — Thu, 10 Sep 2009 03:38:27 +0000

I just randomly go through some little annoyances and gripes I have with everything from OS X to Photoshop to WordPress to CSS. I thought of about 5 more the second I was done, but I'll spare you!…

#69: First Ten Minutes with TypeKit

chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Aug 2009 22:56:35 +0000

I got the invite from TypeKit, signed up, and had beautiful custom fonts rocking my page in just a few minutes. I'll show you the entire process from start to finish, as well as touch on the advantages and disadvantages.

Links from Video:

View Demo

#68: Think Geek Background Fade Technique

chriscoyier@gmail.com (Chris Coyier) — Wed, 12 Aug 2009 17:50:51 +0000

This video demonstrates the technique seen on the Think Geek 3.0 site. The bottom of the site has a design of a bunch of robots and as the screen is scrolled to the bottom, the color fades to black and the pattern turns into zombies. We recreate this from scratch with their graphics, and then flop them out for our own.

Links from Video:

View Demo
Download Files

#67: jQuery Part 3 – Image Title Plugin

chriscoyier@gmail.com (Chris Coyier) — Wed, 29 Jul 2009 12:23:34 +0000

This video focuses on taking an already existing idea and code and turning it into a jQuery plugin. In this case it helps keep our code as semantic as it can be, and with JavaScript off, degrades nicely. We cover the syntax of creating a plugin, show off the cool chain-ability of jQuery, and show how to make the plugin versatile and expandable.

Links from Video:

Part 1
Part 2

#66: Table Styling 2, Fixed Header and Highlighting

chriscoyier@gmail.com (Chris Coyier) — Wed, 01 Jul 2009 14:22:06 +0000

Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. Then we implement row AND column highlighting with a bit of semi-clever JavaScript.

Links from Video:

View Demo
Download Files

#65: Advanced Uses for Custom Fields in WordPress

chriscoyier@gmail.com (Chris Coyier) — Tue, 23 Jun 2009 19:35:14 +0000

More than any other single feature, what makes WordPress a CMS (as opposed to just a blogging platform) is custom fields. Custom fields are chunks of data that travel along with posts and pages in key/value pairs. This data can be pulled out and used in your templates as you choose, allowing for all kinds of smart and interesting things to be done.

Links from Video:

The Codex: Custom Fields

#64: Building a Photo Gallery

chriscoyier@gmail.com (Chris Coyier) — Tue, 09 Jun 2009 13:21:07 +0000

This photo gallery will automatically build itself from a directory of images, including sub-directories and the images inside them. Images open in a nice looking jQuery lightbox.

Links from Video:

#63: On Screencasting

chriscoyier@gmail.com (Chris Coyier) — Thu, 21 May 2009 15:32:04 +0000

This is somewhat of a behind the scenes look at how I create and distribute the screencast. I go over the hardware and software I use, how it gets stitched together, and the sizes/formats it gets put into and why. Then I talk a little bit about the distribution and how it gets out there to you all.

Links from Video:

#62: Advanced Form Styling & Functionality

chriscoyier@gmail.com (Chris Coyier) — Wed, 06 May 2009 16:51:49 +0000

This screencast walks through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. We then use PHP to optionally save the users name and email, as well as send the actual email.

Links from Video:

#61: Basic Table Styling with CSS

chriscoyier@gmail.com (Chris Coyier) — Wed, 22 Apr 2009 18:55:05 +0000

Tables are great. They are perfectly suited for use on the web. That is, for displaying tabular data! In this screencast we'll cover what that actually means, take a look at a table, the markup that creates it, quirks and things-you-should-know. Then we start styling it up with CSS and quickly touch on some jQuery bonus stuff at the end.

Links from Video:

View Demo
W3C on Tables
Nice tutorial from Veerle on CSS Table Styling

#60: AJAX Refreshing RSS Content

chriscoyier@gmail.com (Chris Coyier) — Wed, 08 Apr 2009 17:10:43 +0000

In video #55 the end result was the FeedSmusher, which inserted content from external RSS feeds onto a page of our own. In this screencast, we will start there and use AJAX (with help from jQuery) to refresh that content without requiring a page refresh.

Links from Video:

#59: Embedding Audio

chriscoyier@gmail.com (Chris Coyier) — Thu, 02 Apr 2009 21:27:54 +0000

Putting an image on a webpage is easy, audio files, not so much. HTML5 will make it as easy as it should be, but until then, we have to resort to other methods. This screencast covers four methods/players. Two use both JavaScript and Flash, one just Flash, one just JavaScript.

Links from Video:

View Demo
Download Files

#58: HTML & CSS – The VERY Basics

chriscoyier@gmail.com (Chris Coyier) — Wed, 25 Mar 2009 01:03:30 +0000

This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don't need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped …

#57: Using CSS3

chriscoyier@gmail.com (Chris Coyier) — Wed, 18 Mar 2009 17:31:30 +0000

The latest wave of web browsers have pretty decent support for a variety of CSS3 stuff. Particularly Safari 4 and Firefox 3.1. This screencast covers many of the techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image...

Links from Video:

View Demo / View CSS

#56: Integrating FoxyCart and WordPress

chriscoyier@gmail.com (Chris Coyier) — Thu, 05 Mar 2009 00:32:40 +0000

FoxyCart is a very adaptable eCommerce system. Products are built on-the-fly as part of add to cart buttons that are just simple HTML. This means that you can integrate it with just about any CMS. In this screencast, we integrate it with WordPress. We make a special page template just for products. This page template loads the necessary FoxyCart files and automatically has an add to cart button that is controlled with custom fields in WordPress.

Links from Video:

FoxyCart

#55: Adding RSS Content with SimplePie

chriscoyier@gmail.com (Chris Coyier) — Wed, 25 Feb 2009 22:11:50 +0000

The "Really Simple" part of RSS is sometimes misleading. What if you want to pull in content from an RSS feed and display it on your site? Doing that from scratch would be no-so-easy, but thankfully we have wonderful SimplePie to do the heavy lifting for us. In this screencast we build a really simple site that grabs content from multiple RSS feeds, smushes them together, and displays them using our own custom markup.

Links from Video:

SimplePie
View Demo

#54: Introduction to FLIR

chriscoyier@gmail.com (Chris Coyier) — Wed, 18 Feb 2009 00:32:19 +0000

FLIR (Face Lift Image Replacement) bills itself as an "alternative to sIFR". They are definitely in the same category. sIFR has some extra functionality, but is relies on more technology on both the server and client side. FLIR may be a little easier to use and requires less technology, but has less functionality. In this screencast I walk through integrating FLIR on a WordPress site I was working on.

Links from Video:

#53: Customizing PayPal Forms, Buttons, and Headers

chriscoyier@gmail.com (Chris Coyier) — Thu, 12 Feb 2009 00:33:57 +0000

PayPal, love it or hate it, is easiest way to send and receive money online. In this screencast we go through how to create a Buy Now button, which uses a custom email address, has a custom header, custom thank you page, and is custom styled. Of course we touch on a few other tips and tricks along the way.

At the end, I (randomly) quickly introduce a cool free download that contains a fully working Ruby on Rails application …

#52: Building a Print Stylesheet

chriscoyier@gmail.com (Chris Coyier) — Thu, 05 Feb 2009 14:36:32 +0000

My technique for building print stylesheets goes like this. 1) Start from scratch 2) Leave most defaults alone 2) Eliminate every thing on the page you don't need with display: none; 4) Put page-breaks where appropriate. Of course, I spend far too long explaining all this, but you get to see it being built live on CSS-Tricks.

Links from Video:

#51: A Lesson Learned in Accessibility

chriscoyier@gmail.com (Chris Coyier) — Thu, 22 Jan 2009 14:33:54 +0000

Even when designing with our best intentions toward accessibility, it often takes someone who really uses accessibility software to test the site and help us get the details right. The problem is compounded when dealing with AJAX style behavior. That is exactly what happened with my jQuery FAQ example. What I thought was nicely accessible turned out to not be. This screencast walks through what I needed to do to fix it.

Links from Video:

VoiceOver and Safari
View Demo

#50: Building a Customized and Dynamic Ordering Form

chriscoyier@gmail.com (Chris Coyier) — Tue, 20 Jan 2009 23:41:03 +0000

Real-life clients have real-life needs for their websites. They don't care about your fancy RSS feeds and AJAX, they just want their website to do what they tell you they want it to do. In this screencast I walk through an example feature I am building for a real-life client who needed some very specific functionality built into a page. It is an ordering process that needs to check for a valid zip code, and then do a bunch of …

#49: Hodgepodge of Photoshop Tricks

chriscoyier@gmail.com (Chris Coyier) — Mon, 19 Jan 2009 14:16:23 +0000

Photoshop is my tool of choice in designing for the web. I liken it to choosing the guitar as an instrument to play. A guitar sounds great alone and there are loads of resources to help you learn it. Photoshop is a very powerful tool all by itself and I'm going to add to that pile of resources by sharing some simple tips and tricks I used when using it every day.

Links from Video:

Photoshop
Are My Sites Up?

#48: Skinning phpBB

chriscoyier@gmail.com (Chris Coyier) — Sun, 18 Jan 2009 22:41:19 +0000

Creating a completely custom theme for the popular forums software phpBB would be a monster job. Fortunately, to get up and running quickly, we can simply wrap a default installation of phpBB into the skin of an existing site pretty easily. We do just that in this screencast, and work out the kinks that pop up.

Links from Video:

#47: CSS Shorthand

chriscoyier@gmail.com (Chris Coyier) — Sun, 18 Jan 2009 02:36:09 +0000

There are a handful of CSS attributes that can be combined into a single attribute for coding brevity. I endorse the use of CSS shorthand whenever possible. It saves space and makes code more readable. In this screencast I introduce all of the common ones and go over a few gotchas that can happen when using them.

At the end, I introduce a new site of mine I hope you all find useful: HTML-Ipsum

Links from Video:

Dustin Diaz: CSS

#46: Domains, DNS, Hosting and Google Apps

chriscoyier@gmail.com (Chris Coyier) — Sat, 17 Jan 2009 00:21:22 +0000

Dealing with domains and hosting and all the server setup stuff isn't usually the most comfortable stuff for web designers. In this screencast I walk though my regular process and share many little tips of how I like to handle it. I use a real live domain name that I recently purchased on Go Daddy, point it to my Media Temple hosting and then switch the email handling to Google Apps.

Links from Video:

#45: Using FoxyCart for eCommerce

chriscoyier@gmail.com (Chris Coyier) — Fri, 16 Jan 2009 02:52:28 +0000

FoxyCart is my new favorite eCommerce system. It is extremely easy to get started with. You have full design control over all aspects of it (cart, checkout, receipts). It has the features you need (downloadables, security, saved accounts, subscriptions). Best of all, it's not a bloated CMS. You can build products on-the-fly using very simple code. This means you can use it easily on static pages, with pre-existing CMSs or roll your own CMS. I'm going to walk through much …

#44: Hodgepodge of WordPress Tricks

chriscoyier@gmail.com (Chris Coyier) — Wed, 14 Jan 2009 18:27:03 +0000

It's WordPress Week here at CSS-Tricks, so I wanted to so a WordPress-themed screencast and cover a lot of mini-tips that haven't made it into previous WordPress screencasts. We cover:

Listing categories with a built-in function and building a tabbed navigation from them with "current tab" functionality
Numbering comments with a simple incremented PHP variable.
Improving WordPress search with a plugin and making better design choices.
Live comment previews with JavaScript and/or plugin.
Setting better titles for all pages.
Setting

#43: How to Use CSS Sprites

chriscoyier@gmail.com (Chris Coyier) — Wed, 14 Jan 2009 00:22:05 +0000

CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page by combining images and reducing that number of requests. In this screencast I'm going to show you how to do exactly that, by taking what would be 8 different images and combining them into one. As an added bonus, we then expand the …

#42: All About Floats Screencast

chriscoyier@gmail.com (Chris Coyier) — Mon, 12 Jan 2009 19:59:59 +0000

Even more-so than z-index (which we covered a few weeks ago), the float property is known to cause episodes of hair-pulling and monitor-punching. It seems simple enough in theory, but there are plenty of quirks to watch out for. We go from start to finish in this screencast defining what float is, how it works, how and why to clear them, and some browser differences.

Links from video:

All About Floats Article

#41: WordPress as a CMS

chriscoyier@gmail.com (Chris Coyier) — Sun, 11 Jan 2009 14:30:45 +0000

We once did a poll asking people what their favorite CMS was. WordPress was a run-away winner, but also got many comments of "WordPress isn't a CMS!!". Well clearly, in the strictest sense, WordPress is a CMS as it "manages content". But is WordPress really only suited for blogging, or can it be used for more traditional non-blog sites? In this screencast I attempt to show off a number of WordPress features that make it very "CMS-like" in …

#40: How z-index Works

chriscoyier@gmail.com (Chris Coyier) — Sat, 10 Jan 2009 22:24:36 +0000

Z-index can be a little confusing sometimes. In this screencast I attempt to explain how it works, how it's tied to positioning, some quirks, and some general advice.…

#39: How to Use sIFR 3

chriscoyier@gmail.com (Chris Coyier) — Fri, 09 Jan 2009 20:07:57 +0000

sIFR (Scalable Inman Flash Replacement) is a technology that allows you to use any font you wish on your web pages. Long story short, it uses JavaScript to target certain text page elements and replace them with a block of Flash, which is the same text only rendered with a new font. This means you are free to use any font you wish in your designs instead of being limited to very small set of "safe" web fonts. sIFR degrades …

#38: Basics & Tips on Designing for the iPhone

chriscoyier@gmail.com (Chris Coyier) — Fri, 09 Jan 2009 04:38:16 +0000

Designing a web page that is optimized for the iPhone isn't rocket science. It's the same HTML, CSS and JavaScript that you already know. The difference is that browsers and screens do not vary, you know exactly what you are dealing with. You can use that to your advantage and think about that experience when you create your UI. I start out with how to get your page formatted correctly, how to have differnet stylesheets for portrait and horizontal mode, …

#37: Status, Fluid and Menu Bar Apps

chriscoyier@gmail.com (Chris Coyier) — Thu, 08 Jan 2009 04:43:43 +0000

Fair warning: this screencast is fairly Mac-specific and I ramble on about all kind of random non-web design related stuff. I introduce the new web app Status that I've been working on. Then I show Fluid, which is a Mac app for creating site-specific desktop applications and create one for Status. Then while I was on the subject, I introduce a few other Menu Bar applications that I find indispensable.

Links from video:

#36: Current Nav Highlighting: Using PHP to Set the Body ID

chriscoyier@gmail.com (Chris Coyier) — Tue, 06 Jan 2009 18:20:51 +0000

One of the more efficient ways to handle current navigation highlighting is to give each of your navigation items a unique class name. Then give each page a unique ID on the body element. Then CSS can control what each navigation item looks like based on that body ID. But what if you are using a CMS like WordPress which includes that body tag as part of a template? In this case, we can use PHP to look at the …

#35: Intro to jQuery 2

chriscoyier@gmail.com (Chris Coyier) — Mon, 05 Jan 2009 17:13:30 +0000

Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too!

Links …

#34: Integrating and Customizing Google Maps

chriscoyier@gmail.com (Chris Coyier) — Sun, 04 Jan 2009 17:04:27 +0000

Google maps, with all the dragging and zooming and satellite view and all, is my mapping service of choice. Google offers an free API for their maps so you can integrate them right onto your site. Set you own default location, zoom level, widgetry. Even add your own markers with custom balloons. Remember though, if a map and directions are vital to your site, nothing beats some "plain English" directions.

Links from video:

#33: eCommerce Product Page Makeover

chriscoyier@gmail.com (Chris Coyier) — Sat, 03 Jan 2009 16:59:59 +0000

I subscribe to the theory that web page redesigns should be evolutionary not revolutionary. Making small changes, tweaks, and upgrades over time leads to a higher quality design than up and redesigning the entire thing on a whim or as a reaction. In this screencast, we take open up a screenshot of an eCommerce sites product page in Photoshop and start moving things around and making changes. Then we'll take a look at the updated page on the live site. …

#32: Using the Unit PNG Fix

chriscoyier@gmail.com (Chris Coyier) — Fri, 02 Jan 2009 17:18:13 +0000

Designing using alpha-transparent PNGs makes life so much easier and cooler designs possible. As we are all painfully aware, IE 6 and under do not support them. They display... but any areas of alpha transparency get turned into nasty blue-gray and are anything but transparent. There is a way to force IE to respect the alpha transparency though, commonly referred to as the PNG hack. There are various methods, all boiling down to the use of a proprietary Microsoft CSS …

#31: Introduction to Google Analytics

chriscoyier@gmail.com (Chris Coyier) — Thu, 01 Jan 2009 14:49:09 +0000

Google Analytics is a free service to track all sorts of information about the visitors to your website. I recently had a weird experience with the Analytics on CSS-Tricks, so I thought it would be a good time to introduce it to folks who might not already know much about it and also share that experience. As with most things, it has its ups and downs, so I introduce an alternative product at the end as well.

Links from video:…

#30: Creating and Sending HTML Email

chriscoyier@gmail.com (Chris Coyier) — Fri, 19 Dec 2008 17:27:31 +0000

Designing HTML Email is far cry from regular web design. Sure, they both us HTML elements, but the whole philosophy is different. In this world, you gotta do all you can do to make sure this single design is as viewable as absolutely possible in all email clients, and there are a heck of a lot more email clients than their are browsers. HTML Emails are all about table based layouts, inline styling, and direct URL's. Codin' like it's 1999.…

#29: Google Search for Your Site

chriscoyier@gmail.com (Chris Coyier) — Thu, 18 Dec 2008 14:46:32 +0000

Integrating search on a website can be an incredibly complex subject far beyond my web development skills. Fortunately, Google offers a service called "Custom Search Engine" which you can integrate right into your own site. This leverages Googles awesome search power, and it can all happen directly on your own website!

Links from video:

#28: Using Wufoo for Web Forms

chriscoyier@gmail.com (Chris Coyier) — Thu, 18 Dec 2008 01:30:10 +0000

Anytime anyone asks me about forms, I always mention Wufoo. At work and at home, almost every single form I create I just use Wufoo. It makes form creation so easy it's almost entertaining. In this screencast I walk you through how to get started with Wufoo and start using some of its more advanced features like custom themes, integrating PayPal payment, creating public reports, and user management.

Links from video:

Wufoo

#27: Designing for WordPress: Part Three

chriscoyier@gmail.com (Chris Coyier) — Tue, 16 Dec 2008 18:39:08 +0000

In part three of this series, we finish up the structure of the site and start diving into the details. The typography is set up, the right sidebar is set up, and the footer if flushed out. Then we use SimplePie to pull in the external RSS feed and jQuery to pull in the "social" stuff. Not exactly WordPress related, but I warned you! Then we look at styling up the rest of the WordPress layout types like Single pages …

#26: Designing for WordPress: Part Two

chriscoyier@gmail.com (Chris Coyier) — Mon, 15 Dec 2008 18:34:30 +0000

We have WordPress installed, now let's really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts/pages. Then we take a look at the Photoshop design and note some of the important aspects. Layout, color palette and font choices are all imporant things to consider as well as the overall feel. WordPress sites don't need to scream "Blog!" …

#25: Designing for WordPress: Part One

chriscoyier@gmail.com (Chris Coyier) — Sun, 14 Dec 2008 18:23:35 +0000

WordPress is a hugely popular CMS for blogging. The blog section of CSS-Tricks is run on WordPress and I am very happy with it. By popular request, we are going to walk through designing for WordPress. In part one, we will be downloading and installing WordPress. Then we will install the "Starkers" theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it's more trouble than it's …

#24: Rounded Corners

chriscoyier@gmail.com (Chris Coyier) — Sun, 14 Dec 2008 01:25:36 +0000

Here are FIVE different techniques you can use to create rounded corners for boxes on a website. There are always different ways to do things with CSS and rounded corners is a great example of that. Each of these five techniques has advantages and disadvantages. Knowing all of them so you can choose the perfect one in each situation is the kind of thing that makes you the best CSS ninja you can be!

Links from video:

View Demo
Download

#23: Conditional Stylesheets

chriscoyier@gmail.com (Chris Coyier) — Sat, 13 Dec 2008 01:15:34 +0000

Internet Explorer provides a way to target CSS styling information specifically for its different versions. These "conditional stylesheets" are the best way to handle CSS problems that pop up with your page in IE. They aren't "hacks" (which are liable to cause problems with new browsers down the road), they are perfectly valid code. Just be careful not to overdo it and make things more complicated for yourself.

Links from video:

IE-Only Stylesheets

#22: Cutting Clipping Paths

chriscoyier@gmail.com (Chris Coyier) — Fri, 12 Dec 2008 00:27:41 +0000

We're back in Photoshop this week because I wanted to talk a little bit about a very specific skill that I think is important for all designers. That is the Pen Tool and using it to hand-draw clipping paths. There are a variety of ways to make selections in Photoshop, but drawing a real vector path is the most tried-and-true and highest quality way to do so. Mastering this tool will make you a better designer and help unleash your …

#21: Walkthrough of Contact Form

chriscoyier@gmail.com (Chris Coyier) — Thu, 11 Dec 2008 00:24:38 +0000

In some ways, the Contact Form is the "Hello, World!" application of web designers and web developers. It is nothing that hasn't been done before a million times, but it is symbolic of being able to control the design of a page as well as make a page truly functional. In this screencast I talk about contact forms in general as well as quickly walk through the design, creating, and functionality of Contact Form.

Links from video:

Original Article
View

#20: Introduction to jQuery

chriscoyier@gmail.com (Chris Coyier) — Wed, 10 Dec 2008 00:18:03 +0000

The popular JavaScript library jQuery is an amazing way to extend the design possibilities of your site beyond what CSS can do. But luckily, if you are already comfortable with CSS, you have a huge head start in jQuery! This is a very basic introduction to including jQuery on your web page and getting started writing a few functions.

Links from video:

Make sure to check out Intro to jQuery 2, which expands on …

#19: Designing a Unique Page for Twitter Updates

chriscoyier@gmail.com (Chris Coyier) — Mon, 08 Dec 2008 23:07:29 +0000

This week I take you through the creation of simple webpage to display your recent 'Tweets' from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page.

Links from video:

Update (October 2012)

The JavaScript provided by Twitter that we used in this video no longer works. However, I quickly updated the demo to use their …

#18: Introduction to the Band Website Template

chriscoyier@gmail.com (Chris Coyier) — Mon, 08 Dec 2008 00:15:03 +0000

I have recently released a side project called the Band Website Template. This is just a quick tour of it, explaining why it was built and why I think it can be useful for bands and their web designers.

NOTE:… The Band Website Template is discontinued.

#17: Sliding Doors Button

chriscoyier@gmail.com (Chris Coyier) — Sun, 07 Dec 2008 00:11:07 +0000

While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two overlapping background images to a single spot of text. When that text grows or shrinks, these overlapping images and reveal more of themselves creating the illusion it is a single expandable graphic. …

#16: Creating the Photoshop Mockup

chriscoyier@gmail.com (Chris Coyier) — Fri, 05 Dec 2008 15:55:58 +0000

This episode is a prequal to episodes 12, 13, and 14. We go back to a blank Photoshop document and re-create it. There is no HTML/CSS in this episode, just pure Photoshop work.

Links from Video:

#15: Introduction to Firebug

chriscoyier@gmail.com (Chris Coyier) — Thu, 04 Dec 2008 15:51:47 +0000

Firebug is an essential Firefox extension for web designers and developers. You are able to quickly target any element on a page to see the markup, the CSS, the layout, and the DOM in an instant. Not only can you see all of this juicy information, you can edit and see the results directly in the browser window. This makes Firebug the go-to tool for debugging CSS trouble. Also indispensable for JavaScript programmers.

Links from video:

Firebug (Firefox extension)

#14: Converting a Photoshop Mockup: Part Two, Episode Three

chriscoyier@gmail.com (Chris Coyier) — Wed, 03 Dec 2008 15:21:11 +0000

We wrap up the mockup conversion here in Episode Three. We create the "article area" and the "sidebar" (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.

Links from Video:

#13: Converting a Photoshop Mockup: Part Two, Episode Two

chriscoyier@gmail.com (Chris Coyier) — Tue, 02 Dec 2008 15:03:17 +0000

In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and "on" states for the tabs. We then create the main content area and footer.

Links from Video:

#12: Converting a Photoshop Mockup: Part Two, Episode One

chriscoyier@gmail.com (Chris Coyier) — Mon, 01 Dec 2008 14:56:36 +0000

There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let's do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself! (note: Not anymore... but this is sorta how CSS-Tricks used to look …

#11: Working Modularly with PHP

chriscoyier@gmail.com (Chris Coyier) — Wed, 26 Nov 2008 15:49:13 +0000

Many sites do not use any fancy Content Management System (CMS) to generate their pages, they are just just good ol' static HTML content. A site for your grandmothers pie baking business probably only has a few pages, perhaps a homepage, about page, and contact page. Each of these pages has different main content, but much of it stays exactly the same, like the header, navigation, and footer. Think of these sections as "modules" that you can easily use PHP …

#10: Fixed Width, Fluid Width & Elastic Width

chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 15:46:45 +0000

There are three different types of layouts for websites: Fixed Width, Fluid Width, and Elastic Width. In this screencast we look at all these three varieties of sites out on the web as well as some hybrid sites and other techniques for making use of wider browser windows. True "fixed width" sites will be a thing of the past when the modern browsers of today take hold in greater numbers. Opera 9, Firefox 3, and IE 8 all have "zoom" …

#9: Starry Night: 3D Background with the Parallax Effect

chriscoyier@gmail.com (Chris Coyier) — Tue, 25 Nov 2008 03:08:06 +0000

Using three layers of alpha transparent PNG files, we can can create a pseudo 3-dimensional looking background for a web page. This screencast covers how to do that from start to finish. Since Internet Explorer 6 and under do not support alpha transparency in PNG's, this screencast also covers how to create a warning message that will display only in those browsers.

Links from video:

#8: CSS Formatting

chriscoyier@gmail.com (Chris Coyier) — Sun, 23 Nov 2008 18:39:51 +0000

Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it's harder to browse attributes. You can also choose how you want to group your CSS statements. Do you do it by section, …

#7: Three State Menu

chriscoyier@gmail.com (Chris Coyier) — Sat, 22 Nov 2008 18:36:35 +0000

Using a variation of the CSS Sprites technique, we can create a "three state" menu using only one image per menu item. This reduces the number of requests on your server as well as eliminates any "pauses" while moving to a different state like some other techniques can have. This tutorial takes you all the way through the process of creating the images to the HTML to the CSS.

Links from video:

View Demo
Download Files

#6: Tools of the Trade

chriscoyier@gmail.com (Chris Coyier) — Fri, 21 Nov 2008 15:40:22 +0000

Before I get too far along in these screencasts, I thought I would introduce you a little to my working environment and explain the tools that I use. First off, I work on a Mac, so these tools are Mac software. This isn't an endorsement of any particular working environment, I just want everyone to know, see, and understand what these programs are that I will be switching back and forth between in upcoming podcasts.

Links from video:

Adobe Creative

#5: Columns of Equal Height: Super Simple Two Column Layout

chriscoyier@gmail.com (Chris Coyier) — Thu, 20 Nov 2008 15:37:22 +0000

Forcing multiple columns to be of equal height is one of those tricky things in web design. In this screencast I'll show you a little trick around it. Instead of making the actual elements themselves equal height, we'll use a background image to "fake" the look of equal height columns.

Links from video:

Original Article
Faux Columns

#4: Forcing Scrollbars: Eliminating “Horizontal Jumps”

chriscoyier@gmail.com (Chris Coyier) — Wed, 19 Nov 2008 14:48:17 +0000

In this screencast I talk about how to force vertical scrollbars onto websites. Without doing this, pages with centered content can appear to "jump" to the left or right when going from a page that needs to vertically scroll to one that does not (and visa versa). I cover two different major techniques for doing this, since they both have their advantages and disadvantages between different browsers.

Links from video:

Original Article

#3: Converting a Photoshop Mockup (part 3 of 3)

chriscoyier@gmail.com (Chris Coyier) — Wed, 12 Nov 2008 20:35:40 +0000

I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content area. I create the the columns including the "quick links" section. I also talk a little bit about typography.

Links from video:

In this series:

Part 1
Part 2

#2: Converting a Photoshop Mockup (part 2 of 3)

chriscoyier@gmail.com (Chris Coyier) — Tue, 11 Nov 2008 20:29:20 +0000

In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some "filler" content for the main area before I end with building the footer.

Links from video:

#1: Converting a Photoshop Mockup (part 1 of 3)

chriscoyier@gmail.com (Chris Coyier) — Mon, 10 Nov 2008 22:41:45 +0000

In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I'm sure these will get more focused with time. Please let me have it with criticisms at my contact page.

Links from video:

In this series:

…