http://www.css-tricks.com/videos en-us Copyright CSS-Tricks.com Tips, Tricks, and Tutorials Chris Coyier CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. CSS-Tricks Screencasts is focused on showing you tips, tricks, techniques about web design. Code samples can be extremely helpful, but sometimes it is even more helpful to watch someone as they code. In CSS-Tricks Screencasts will show you real live CSS and HTML code being written and tested right on the screen. Topics will vary but will always center around design and usability. Copyright CSS-Tricks.comcss,web,design,html,tutorialTechnology/Software How-Tochriscoyier@gmail.comChris Coyiernocss,web,design,html,tutorial http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/415072931/css-tricks-video-39.php CSS-Tricks How to Use sIFR 3 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, how to create a "Back to Top" button, and then show some iPhone pages I've made. Thur, Oct 09 2008 12:00:00 GMT 22:10 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=yMpZM"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=yMpZM" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=m56jm"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=m56jm" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=kRQ0M"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=kRQ0M" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/415072931" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-39.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-39.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/409569625/css-tricks-video-38.php CSS-Tricks Basics and Tips on Designing for the iPhone 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, how to create a "Back to Top" button, and then show some iPhone pages I've made. Thur, Oct 02 2008 12:00:00 GMT 31:13 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=WK8TM"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=WK8TM" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=EUBmm"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=EUBmm" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=07giM"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=07giM" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/409569625" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-38.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-38.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/403307230/css-tricks-video-37.php CSS-Tricks Status, Fluid and Menu Bar Apps 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. Thur, Sep 25 2008 12:00:00 GMT 19:37 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=PO0OL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=PO0OL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=CVApl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=CVApl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=C6qvL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=C6qvL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/403307230" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-37.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-37.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/395262319/css-tricks-video-36.php CSS-Tricks Current Nav Highlighting: Using PHP to Set the Body ID 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 URI of the page and create the ID based on that. Nifty trick! Thur, Sep 18 2008 12:00:00 GMT 18:56 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=bKkUL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=bKkUL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Ftwyl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Ftwyl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=i1NWL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=i1NWL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/395262319" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-36.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-36.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/388817898/css-tricks-video-35.php CSS-Tricks Intro to jQuery 2 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! Thur, Sep 11 2008 12:00:00 GMT 24:55 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=pns1L"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=pns1L" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=1zlSl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=1zlSl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=RBXuL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=RBXuL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/388817898" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-35.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-35.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/382800332/css-tricks-video-34.php CSS-Tricks Integrating and Customizing Google Maps 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. Thur, Sep 03 2008 12:00:00 GMT 21:44 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=1j8CzL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=1j8CzL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=ZzLvtl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=ZzLvtl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=30rxAL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=30rxAL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/382800332" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-34.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-34.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/376637857/css-tricks-video-33.php CSS-Tricks eCommerce Product Page Makeover 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. It's like CSS-Tricks Screencast: Makeover Edition! Thur, Aug 28 2008 12:00:00 GMT 16:50 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=SXqqMK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=SXqqMK" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=YaDfYk"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=YaDfYk" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=A0jkyK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=A0jkyK" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/376637857" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-33.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-33.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/370156763/css-tricks-video-32.php CSS-Tricks Using the Unit PNG Fix 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 transparancy 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 "filter". A newcomer on the scene is the "Unit PNG Fix" which is ridiculously easy to use. Simply link up a very tiny JavaScript file in your header and you are done! Thur, Aug 21 2008 12:00:00 GMT 18:14 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=dABnWK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=dABnWK" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=WMM6Dk"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=WMM6Dk" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=npZNmK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=npZNmK" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/370156763" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-32.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-32.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/364233093/css-tricks-video-31.php CSS-Tricks Introduction to Google Analytics 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. Thur, Aug 14 2008 12:00:00 GMT 25:48 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=lCRHQK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=lCRHQK" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=IULRXk"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=IULRXk" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=MsjuTK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=MsjuTK" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/364233093" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-31.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-31.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/358454965/css-tricks-video-30.php CSS-Tricks Creating and Sending HTML Email 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 absoulely 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. Thur, Aug 07 2008 12:00:00 GMT 27:38 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=N9a2OK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=N9a2OK" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=kjphpk"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=kjphpk" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=aC5kgK"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=aC5kgK" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/358454965" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-30.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-30.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/350097513/css-tricks-video-29.php CSS-Tricks Google Search for Your Site 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! Thur, Jul 31 2008 12:00:00 GMT 16:19 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=T6DAQJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=T6DAQJ" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=OlpWRj"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=OlpWRj" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=TJYPTJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=TJYPTJ" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/350097513" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-29.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-29.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/343649660/css-tricks-video-28.php CSS-Tricks Using Wufoo for Web Forms 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. Thur, Jul 23 2008 12:00:00 GMT 27:47 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=BdJjSJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=BdJjSJ" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=t1L2xj"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=t1L2xj" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=X0fpMJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=X0fpMJ" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/343649660" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-28.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-28.m4v http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/337495952/css-tricks-video-27.php CSS-Tricks Designing for WordPress: Part Three 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 (with comment styling) and Pages. At the end we pop open the design in a bunch of different browsers to see how it holds up. Thur, Jul 17 2008 12:00:00 GMT 59:38 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=LxxylJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=LxxylJ" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=DZlVyj"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=DZlVyj" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=n6llNJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=n6llNJ" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/337495952" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-27.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-27.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/330864273/css-tricks-video-26.php CSS-Tricks Designing for WordPress: Part Two 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!" unless you want them to. Then we take a look at the modular nature of a WordPress theme and start altering the markup of the files and writing CSS. In part three, we will continue touching up the design, adding details and content. We may get to the finishing touches of adding the "extra-content" stuff like the Twitter feed, or that might be a part four. Thur, Jul 10 2008 12:00:00 GMT 52:48 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=PbdIGJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=PbdIGJ" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=HOR0Kj"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=HOR0Kj" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=JrACFJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=JrACFJ" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/330864273" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-26.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-26.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/324926564/css-tricks-video-25.php CSS-Tricks Designing for WordPress: Part One 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 worth! In part two, we will go over the theory behind designing for WordPress and how it's much like "working modularly" and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality. Thur, Jul 03 2008 12:00:00 GMT 16:27 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=s3jxkJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=s3jxkJ" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=9eYeSj"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=9eYeSj" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=F3UXtJ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=F3UXtJ" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/324926564" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-25.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-25.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/319875324/css-tricks-video-24.php CSS-Tricks Rounded Corners 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! Thur, Jun 26 2008 12:00:00 GMT 25:56 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=XEeviI"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=XEeviI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=vGdbWi"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=vGdbWi" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=uZnWbI"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=uZnWbI" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/319875324" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-24.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-24.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/314632268/css-tricks-video-23.php CSS-Tricks Conditional Stylesheets 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. Thur, Jun 19 2008 12:00:00 GMT 17:58 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=3jW0JI"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=3jW0JI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Tr46ri"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Tr46ri" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=VNElvI"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=VNElvI" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/314632268" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-23.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-23.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/309998211/css-tricks-video-22.php CSS-Tricks Cutting Clipping Paths 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 creative potential. Thur, Jun 12 2008 12:00:00 GMT 16:15 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=JlUVcI"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=JlUVcI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=HdRmKi"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=HdRmKi" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=zhft5I"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=zhft5I" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/309998211" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-22.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-22.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/304696964/css-tricks-video-21.php CSS-Tricks Walkthrough of Contact Form 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. Thur, Jun 05 2008 12:00:00 GMT 24:50 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=2YUnTI"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=2YUnTI" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=MFmQsi"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=MFmQsi" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=On2B3I"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=On2B3I" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/304696964" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-21.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-21.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/299859223/css-tricks-video-20.php CSS-Tricks Introduction to jQuery 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. Thur, May 29 2008 12:00:00 GMT 18:12 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=1QMp7H"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=1QMp7H" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=8Y4l1h"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=8Y4l1h" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=W922FH"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=W922FH" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/299859223" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-20.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-20.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/295449049/css-tricks-video-19.php CSS-Tricks Designing a Unique Page for Twitter Updates 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. Thur, May 22 2008 12:00:00 GMT 19:46 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=zBAHVH"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=zBAHVH" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=miFpwh"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=miFpwh" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=0QGtkH"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=0QGtkH" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/295449049" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-19.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-19.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/290969810/css-tricks-video-18.php CSS-Tricks Introduction to the Band Website Template 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. Thur, May 15 2008 12:00:00 GMT 12:06 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Aa6juH"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Aa6juH" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=VYmJVh"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=VYmJVh" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=l2QeUH"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=l2QeUH" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/290969810" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-18.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-18.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/286315839/css-tricks-video-17.php CSS-Tricks Sliding Doors Button While sliding doors is far from a new concept and will be obsoluted 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. In this screencast we do a quicky example of how this can work for a button. Thur, May 8 2008 12:00:00 GMT 14:28 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=j8hd4H"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=j8hd4H" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=402qjh"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=402qjh" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=t8xPBH"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=t8xPBH" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/286315839" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-17.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-17.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/280967011/css-tricks-video-16.php CSS-Tricks Creating a Photoshop Web Mockup 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. Thur, May 1 2008 12:00:00 GMT 22:04 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=eUgueG"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=eUgueG" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=L5nTbg"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=L5nTbg" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=RtHksG"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=RtHksG" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/280967011" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-16.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-16.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/276219554/css-tricks-video-15.php CSS-Tricks Introduction to Firebug 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. Thur, Apr 24 2008 12:00:00 GMT 13:28 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=mc8zL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=mc8zL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=BcCpl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=BcCpl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=PlBIL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=PlBIL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/276219554" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-15.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-15.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/272939830/css-tricks-video-14.php CSS-Tricks Coverting a Photoshop Mockup: Part Two, Episode Two 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. Fri, Apr 18 2008 12:00:00 GMT 23:58 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=tLKoL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=tLKoL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=A4nsl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=A4nsl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=XfdRL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=XfdRL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/272939830" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-14.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-14.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/267678680/css-tricks-video-13.php CSS-Tricks Coverting a Photoshop Mockup: Part Two, Episode Two 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. Fri, Apr 11 2008 12:00:00 GMT 25:45 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=N1EdL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=N1EdL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=9PxRl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=9PxRl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=H2IVL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=H2IVL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/267678680" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-13.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-13.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266023/css-tricks-video-12.php CSS-Tricks Coverting a Photoshop Mockup: Part Two, Episode One 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! Fri, Apr 03 2008 12:00:00 GMT 22:03 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=nzSML"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=nzSML" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=4GIZl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=4GIZl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=dPZEL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=dPZEL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266023" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-12.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-12.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266024/css-tricks-video-11.php CSS-Tricks Working Modularly with PHP Many sites do not use any fancy Content Managment 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 to insert into the page. This way, making changes to those sections changes all the pages at the same time, saving you time and potentially mistakes. At the end, I show you how you can still achieve unique effects in your navigation despite the code being identical. Fri, Mar 28 2008 12:00:00 GMT 14:44 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=5bD4L"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=5bD4L" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=jNw5l"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=jNw5l" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=eeDgL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=eeDgL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266024" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-11.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-11.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266025/css-tricks-video-10.php CSS-Tricks Fixed Width, Fluid Width & Elastic Width 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" abilities, which make fixed width sites behave like elastic width sites. At the end of the screencast I show a very simple example of you you can get started with all three types. Fri, Mar 20 2008 12:00:00 GMT 16:40 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=D5vnL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=D5vnL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=RKUTl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=RKUTl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=kBVzL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=kBVzL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266025" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-10.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-10.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266026/css-tricks-video-9.php CSS-Tricks Starry Night: 3D Background with the Parallax Effect 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 screencase also covers how to create a warning message that will display only in those browsers. Fri, Mar 14 2008 12:00:00 GMT 14:27 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Xfa2L"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Xfa2L" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Jyw9l"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Jyw9l" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=y8sHL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=y8sHL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266026" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-9.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-9.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266027/css-tricks-video-8.php CSS-Tricks CSS Formatting 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, like header, content, footer? Or do you do it by types of attributes like typography and layout? Being organized, hierarchical, and using CSS shorthand will go a long way in making you a better CSS coder. Fri, Mar 6 2008 12:00:00 GMT 14:39 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=cgi7L"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=cgi7L" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=ljqVl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=ljqVl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=rhc0L"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=rhc0L" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266027" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-8.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-8.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266028/css-tricks-video-7.php CSS-Tricks Creating a Three State Menu 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 elminates 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. Fri, Feb 28 2008 12:00:00 GMT 27:17 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=HTgIL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=HTgIL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=ngCIl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=ngCIl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=L0YWL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=L0YWL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266028" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-7.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-7.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266029/css-tricks-video-6.php CSS-Tricks Tools of the Trade Before I get too far along in these screencasts, I thought I would introduce you a little to my working enviornment 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 enviorment, I just want everyone to know, see, and understand what these programs are that I will be switching bank and forth between in upcoming podcasts. Fri, Feb 22 2008 12:00:00 GMT 15:33 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=ZEbEL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=ZEbEL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=g2oJl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=g2oJl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=P7DAL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=P7DAL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266029" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-6.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-6.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266030/css-tricks-video-5.php CSS-Tricks Columns of Equal Height 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. Sat, Feb 16 2008 12:00:00 GMT 12:39 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=vfSHlwG"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=vfSHlwG" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Aw2ySvg"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Aw2ySvg" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=LBXVSpG"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=LBXVSpG" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266030" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-5.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-5.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266031/css-tricks-video-4.php CSS-Tricks Forcing Scrollbars 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 th 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. Sun, Feb 10 2008 12:00:00 GMT 7:08 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=ka3bL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=ka3bL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=zQOcl"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=zQOcl" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=RmsmL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=RmsmL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266031" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-4.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-4.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266032/css-tricks-video-3.php CSS-Tricks Converting a Photoshop Mockup (part 3 of 3) 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. Wed, Feb 06 2008 12:00:00 GMT 10:10 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=9xmvL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=9xmvL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=pbt9l"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=pbt9l" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=lDd3L"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=lDd3L" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266032" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-3.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-3.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266033/css-tricks-video-2.php CSS-Tricks Converting a Photoshop Mockup (part 2 of 3) 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. Tue, Feb 05 2008 12:00:00 GMT 17:10 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=CUgEL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=CUgEL" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Smq2l"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Smq2l" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=zlqmL"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=zlqmL" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266033" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-2.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-2.mov http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~3/264266034/css-tricks-video-1.php CSS-Tricks Converting a Photoshop Mockup (part 1 of 3) 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. Mon, Feb 04 2008 12:00:00 GMT 31:53 css, web design, html, tutorial chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Tkt09DG"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Tkt09DG" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Hvug6tg"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Hvug6tg" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=8ozzCRG"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=8ozzCRG" border="0"></img></a> </div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/264266034" height="1" width="1"/>http://css-tricks.com/videos/css-tricks-video-1.phphttp://vnfiles.ign.com/ects/css-tricks/VideoCast-1.mov Chris CoyiernonadultTips, Tricks, and Tutorials