//AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Thu, 20 Nov 2008 15:40:22 +0000 //AN_Xml: //AN_Xml: 15:33 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Im1XhqEVbmI:nLYHxxeVK4Q:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Im1XhqEVbmI:nLYHxxeVK4Q:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=Im1XhqEVbmI:nLYHxxeVK4Q:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Im1XhqEVbmI:nLYHxxeVK4Q:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/Im1XhqEVbmI" height="1" width="1"/>http://css-tricks.com/video-screencasts/6-tools-of-the-trade/http://vnfiles.ign.com/ects/css-tricks/VideoCast-6.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/s_cOzyHygHI/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/5-columns-of-equal-height-super-simple-two-column-layout/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #5: Columns of Equal Height: Super Simple Two Column Layout //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml:<p><strong>Links from video:</strong> </p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/super-simple-two-column-layout/">Original Article</a></li> //AN_Xml:<li><a href="http://www.alistapart.com/articles/fauxcolumns/">Faux Columns</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Thu, 20 Nov 2008 15:37:22 +0000 //AN_Xml: //AN_Xml: 12:39 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=s_cOzyHygHI:fLH50kYIxS4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=s_cOzyHygHI:fLH50kYIxS4:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=s_cOzyHygHI:fLH50kYIxS4:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=s_cOzyHygHI:fLH50kYIxS4:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/s_cOzyHygHI" height="1" width="1"/>http://css-tricks.com/video-screencasts/5-columns-of-equal-height-super-simple-two-column-layout/http://vnfiles.ign.com/ects/css-tricks/VideoCast-5.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/7x4VPUegGEU/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #43: How to Use CSS Sprites //AN_Xml: //AN_Xml: <p>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. <strong>As an added bonus,</strong> we then expand the &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Thu, 20 Nov 2008 00:22:05 +0000 //AN_Xml: //AN_Xml: 25:21 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=BVS94iLU"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?d=41" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=8o94H9Fm"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=8o94H9Fm" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=61H56YZZ"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?d=50" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/7x4VPUegGEU" height="1" width="1"/>http://css-tricks.com/video-screencasts/43-how-to-use-css-sprites/http://vnfiles.ign.com/ects/css-tricks/VideoCast-43.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/rdGxM0E8UiU/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/19-designing-a-unique-page-for-twitter-updates/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #19: Designing a Unique Page for Twitter Updates //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml:<p><strong>Links from video:</strong> </p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/examples/TwitterPage/">View Demo</a></li> //AN_Xml:<li><a href="http://css-tricks.com/videos/materials/TwitterPage.zip">Download Files</a></li> //AN_Xml:<li><a href="http://twitter.com/chriscoyier">Twitter</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 19 Nov 2008 23:07:29 +0000 //AN_Xml: //AN_Xml: 19:46 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rdGxM0E8UiU:Z39h1db7S48:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rdGxM0E8UiU:Z39h1db7S48:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=rdGxM0E8UiU:Z39h1db7S48:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rdGxM0E8UiU:Z39h1db7S48:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/rdGxM0E8UiU" height="1" width="1"/>http://css-tricks.com/video-screencasts/19-designing-a-unique-page-for-twitter-updates/http://vnfiles.ign.com/ects/css-tricks/VideoCast-19.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/r5mRHRwxpM8/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/14-converting-a-photoshop-mockup-part-two-episode-three/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #14: Converting a Photoshop Mockup: Part Two, Episode Three //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml:<p><strong>Links from Video:</strong></p> //AN_Xml:<ul style="width: 45%; float: left;"> //AN_Xml:<li><a href="http://css-tricks.com/examples/MockupConversion/">View Demo</a></li> //AN_Xml:<li><a href="http://css-tricks.com/examples/MockupConversion.zip">Download Files</a></li> //AN_Xml:</ul> //AN_Xml:<ul style="width: 45%; float: right;"> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/">Part One</a></li> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/">Part Two</a></li> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/16-creating-the-photoshop-mockup/">Prequel</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 19 Nov 2008 15:21:11 +0000 //AN_Xml: //AN_Xml: 23:58 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=r5mRHRwxpM8:CwQ2pBpymUw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=r5mRHRwxpM8:CwQ2pBpymUw:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=r5mRHRwxpM8:CwQ2pBpymUw:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=r5mRHRwxpM8:CwQ2pBpymUw:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/r5mRHRwxpM8" height="1" width="1"/>http://css-tricks.com/video-screencasts/14-converting-a-photoshop-mockup-part-two-episode-three/http://vnfiles.ign.com/ects/css-tricks/VideoCast-14.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/NOjtVPSkKY4/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #13: Converting a Photoshop Mockup: Part Two, Episode Two //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml:<p><strong>Links from Video:</strong></p> //AN_Xml:<ul style="width: 45%; float: left;"> //AN_Xml:<li><a href="http://css-tricks.com/examples/MockupConversion/">View Demo</a></li> //AN_Xml:<li><a href="http://css-tricks.com/examples/MockupConversion.zip">Download Files</a></li> //AN_Xml:</ul> //AN_Xml:<ul style="width: 45%; float: right;"> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/">Part One</a></li> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/14-converting-a-photoshop-mockup-part-two-episode-three/">Part Three</a></li> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/16-creating-the-photoshop-mockup/">Prequel</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 19 Nov 2008 15:03:17 +0000 //AN_Xml: //AN_Xml: 25:45 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=NOjtVPSkKY4:kg5IadBtbD4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=NOjtVPSkKY4:kg5IadBtbD4:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=NOjtVPSkKY4:kg5IadBtbD4:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=NOjtVPSkKY4:kg5IadBtbD4:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/NOjtVPSkKY4" height="1" width="1"/>http://css-tricks.com/video-screencasts/13-converting-a-photoshop-mockup-part-two-episode-two/http://vnfiles.ign.com/ects/css-tricks/VideoCast-13.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/E30248fmiHY/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #12: Converting a Photoshop Mockup: Part Two, Episode One //AN_Xml: //AN_Xml: <p>There has been LOTS of great feedback on the <a href="http://css-tricks.com/videos-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/">first series</a> 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! (<em>note</em>: Not anymore... but this is sorta how CSS-Tricks used to look &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 19 Nov 2008 14:56:36 +0000 //AN_Xml: //AN_Xml: 22:03 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=E30248fmiHY:UHlPMfLFJLk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=E30248fmiHY:UHlPMfLFJLk:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=E30248fmiHY:UHlPMfLFJLk:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=E30248fmiHY:UHlPMfLFJLk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/E30248fmiHY" height="1" width="1"/>http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/http://vnfiles.ign.com/ects/css-tricks/VideoCast-12.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/tVFy-LyYbTo/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/4-forcing-scrollbars-eliminating-horizonatal-jumps/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #4: Forcing Scrollbars: Eliminating “Horizontal Jumps” //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml:<p><strong>Links from video:</strong> </p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/">Original Article</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 19 Nov 2008 14:48:17 +0000 //AN_Xml: //AN_Xml: 07:08 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tVFy-LyYbTo:_kS1R3Jbvv8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tVFy-LyYbTo:_kS1R3Jbvv8:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=tVFy-LyYbTo:_kS1R3Jbvv8:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tVFy-LyYbTo:_kS1R3Jbvv8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/tVFy-LyYbTo" height="1" width="1"/>http://css-tricks.com/video-screencasts/4-forcing-scrollbars-eliminating-horizonatal-jumps/http://vnfiles.ign.com/ects/css-tricks/VideoCast-4.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/rnX6ruo42_E/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/27-designing-for-wordpress-part-three/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #27: Designing for WordPress: Part Three //AN_Xml: //AN_Xml: <p>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 &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Sat, 15 Nov 2008 18:39:08 +0000 //AN_Xml: //AN_Xml: 59:37 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rnX6ruo42_E:TiFAsH1BQrY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rnX6ruo42_E:TiFAsH1BQrY:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=rnX6ruo42_E:TiFAsH1BQrY:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=rnX6ruo42_E:TiFAsH1BQrY:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/rnX6ruo42_E" height="1" width="1"/>http://css-tricks.com/video-screencasts/27-designing-for-wordpress-part-three/http://vnfiles.ign.com/ects/css-tricks/VideoCast-27.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/yorMsTq4w_o/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/26-designing-for-wordpress-part-two/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #26: Designing for WordPress: Part Two //AN_Xml: //AN_Xml: <p>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!" &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Sat, 15 Nov 2008 18:34:30 +0000 //AN_Xml: //AN_Xml: 52:48 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=yorMsTq4w_o:ziaPT3NuwCw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=yorMsTq4w_o:ziaPT3NuwCw:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=yorMsTq4w_o:ziaPT3NuwCw:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=yorMsTq4w_o:ziaPT3NuwCw:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/yorMsTq4w_o" height="1" width="1"/>http://css-tricks.com/video-screencasts/26-designing-for-wordpress-part-two/http://vnfiles.ign.com/ects/css-tricks/VideoCast-26.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/7C2YoU4FCOU/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #25: Designing for WordPress: Part One //AN_Xml: //AN_Xml: <p>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 &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Sat, 15 Nov 2008 18:23:35 +0000 //AN_Xml: //AN_Xml: 16:27 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7C2YoU4FCOU:rXw3sykd0tw:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7C2YoU4FCOU:rXw3sykd0tw:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=7C2YoU4FCOU:rXw3sykd0tw:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7C2YoU4FCOU:rXw3sykd0tw:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/7C2YoU4FCOU" height="1" width="1"/>http://css-tricks.com/video-screencasts/25-designing-for-wordpress-part-one/http://vnfiles.ign.com/ects/css-tricks/VideoCast-25.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/tIroGuR0Ns0/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/36-current-nav-highlighting-using-php-to-set-the-body-id/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #36: Current Nav Highlighting: Using PHP to Set the Body ID //AN_Xml: //AN_Xml: <p>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 &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Sat, 15 Nov 2008 18:20:51 +0000 //AN_Xml: //AN_Xml: 18:56 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tIroGuR0Ns0:LyKeWCOYuHM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tIroGuR0Ns0:LyKeWCOYuHM:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=tIroGuR0Ns0:LyKeWCOYuHM:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=tIroGuR0Ns0:LyKeWCOYuHM:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/tIroGuR0Ns0" height="1" width="1"/>http://css-tricks.com/video-screencasts/36-current-nav-highlighting-using-php-to-set-the-body-id/http://vnfiles.ign.com/ects/css-tricks/VideoCast-36.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/7vj7mNzSbFo/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/37-status-fluid-and-menu-bar-apps/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #37: Status, Fluid and Menu Bar Apps //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml:<p><strong>Links from video:</strong> </p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://fluidapp.com/">Fluid</a></li> //AN_Xml:<li><a href="http://statushq.com/">Status</a></li> //AN_Xml:<li><a href="http://www.smileonmymac.com/TextExpander/">TextExpander</a></li> //AN_Xml:<li><a href="http://skitch.com/">Skitch</a></li> //AN_Xml:<li><a href="http://www.scrnshots.com/">ScrnShots</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Sat, 15 Nov 2008 04:43:43 +0000 //AN_Xml: //AN_Xml: 19:37 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7vj7mNzSbFo:4xGlQRdT66c:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7vj7mNzSbFo:4xGlQRdT66c:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=7vj7mNzSbFo:4xGlQRdT66c:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7vj7mNzSbFo:4xGlQRdT66c:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/7vj7mNzSbFo" height="1" width="1"/>http://css-tricks.com/video-screencasts/37-status-fluid-and-menu-bar-apps/http://vnfiles.ign.com/ects/css-tricks/VideoCast-37.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/0Q6vPAYm9H4/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #38: Basics & Tips on Designing for the iPhone //AN_Xml: //AN_Xml: <p>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, &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Sat, 15 Nov 2008 04:38:16 +0000 //AN_Xml: //AN_Xml: 31:13 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=0Q6vPAYm9H4:6kh51dOuzew:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=0Q6vPAYm9H4:6kh51dOuzew:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=0Q6vPAYm9H4:6kh51dOuzew:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=0Q6vPAYm9H4:6kh51dOuzew:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/0Q6vPAYm9H4" height="1" width="1"/>http://css-tricks.com/video-screencasts/38-basics-tips-on-designing-for-the-iphone/http://vnfiles.ign.com/ects/css-tricks/VideoCast-38.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/wzv4vaFmR4c/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/3-converting-a-photoshop-mockup-part-3-of-3/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #3: Converting a Photoshop Mockup (part 3 of 3) //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml: //AN_Xml:<p><strong>Links from video:</strong></p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/videos/materials/AwesomeWebsiteMockup.psd">Download Photoshop File</a></li> //AN_Xml:<li><a href="http://css-tricks.com/videos/materials/Conversion.zip">Download Website Files</a></li> //AN_Xml:</ul> //AN_Xml: //AN_Xml: //AN_Xml:<p><strong>In this series:</strong></p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/">Part 1</a></li> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/2-converting-a-photoshop-mockup-part-2-of-3/">Part 2</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 12 Nov 2008 20:35:40 +0000 //AN_Xml: //AN_Xml: 31:53 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=wzv4vaFmR4c:6yo-GFxNqvE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=wzv4vaFmR4c:6yo-GFxNqvE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=wzv4vaFmR4c:6yo-GFxNqvE:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=wzv4vaFmR4c:6yo-GFxNqvE:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/wzv4vaFmR4c" height="1" width="1"/>http://css-tricks.com/video-screencasts/3-converting-a-photoshop-mockup-part-3-of-3/http://vnfiles.ign.com/ects/css-tricks/VideoCast-3.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/1IcVMIzqpF8/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/2-converting-a-photoshop-mockup-part-2-of-3/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #2: Converting a Photoshop Mockup (part 2 of 3) //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml: //AN_Xml:<p><strong>Links from video:</strong></p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/videos/materials/AwesomeWebsiteMockup.psd">Download Photoshop File</a></li> //AN_Xml:<li><a href="http://css-tricks.com/videos/materials/Conversion.zip">Download Website </a></li>&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 12 Nov 2008 20:29:20 +0000 //AN_Xml: //AN_Xml: 17:10 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=1IcVMIzqpF8:9qanVWdlVE0:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=1IcVMIzqpF8:9qanVWdlVE0:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=1IcVMIzqpF8:9qanVWdlVE0:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=1IcVMIzqpF8:9qanVWdlVE0:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/1IcVMIzqpF8" height="1" width="1"/>http://css-tricks.com/video-screencasts/2-converting-a-photoshop-mockup-part-2-of-3/http://vnfiles.ign.com/ects/css-tricks/VideoCast-2.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/ZsiuDzauFAI/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/39-how-to-use-sifr-3/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #39: How to Use sIFR 3 //AN_Xml: //AN_Xml: <p>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 &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 12 Nov 2008 20:07:57 +0000 //AN_Xml: //AN_Xml: 22:10 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=ZsiuDzauFAI:GEg-iyrfX6I:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=ZsiuDzauFAI:GEg-iyrfX6I:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=ZsiuDzauFAI:GEg-iyrfX6I:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=ZsiuDzauFAI:GEg-iyrfX6I:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/ZsiuDzauFAI" height="1" width="1"/>http://css-tricks.com/video-screencasts/39-how-to-use-sifr-3/http://vnfiles.ign.com/ects/css-tricks/VideoCast-39.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/jbCPsWZFQe0/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #42: All About Floats Screencast //AN_Xml: //AN_Xml: <p>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.</p> //AN_Xml:<p><strong>Links from video:</strong> </p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/all-about-floats/">All About Floats Article</a></li> //AN_Xml:&hellip;</ul> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Wed, 12 Nov 2008 19:59:59 +0000 //AN_Xml: //AN_Xml: 27:38 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=QbEKO2am"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?d=41" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=Xq7eM12i"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=Xq7eM12i" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=SGT7FbWF"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?d=50" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/jbCPsWZFQe0" height="1" width="1"/>http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/http://vnfiles.ign.com/ects/css-tricks/VideoCast-42.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/tfbv7d3Dh2M/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/41-wordpress-as-a-cms/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #41: WordPress as a CMS //AN_Xml: //AN_Xml: <p>We once did a poll asking people what their favorite CMS was. WordPress was a run-away winner, but also got many comments of "<em>WordPress isn't a CMS!!</em>". Well clearly, in the strictest sense, WordPress <strong>is</strong> 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 &hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Thu, 06 Nov 2008 14:30:45 +0000 //AN_Xml: //AN_Xml: 27:19 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=AjDBqu2b"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?d=41" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=D9AVrgLw"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?i=D9AVrgLw" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?a=7qkYqMrc"><img src="http://feeds.feedburner.com/~f/CSS-Tricks-Screencasts?d=50" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/tfbv7d3Dh2M" height="1" width="1"/>http://css-tricks.com/video-screencasts/41-wordpress-as-a-cms/http://vnfiles.ign.com/ects/css-tricks/VideoCast-41.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/7VsR8v4VO8s/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #1: Converting a Photoshop Mockup (part 1 of 3) //AN_Xml: //AN_Xml: <p>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 <a href="http://css-tricks.com/contact">contact page</a>.</p> //AN_Xml: //AN_Xml:<p><strong>Links from video:</strong></p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/videos/materials/AwesomeWebsiteMockup.psd.zip">Download Photoshop File</a></li> //AN_Xml:<li><a href="http://css-tricks.com/videos/materials/Conversion.zip">Download Website Files</a></li> //AN_Xml:<li><a href="http://www.arbys.com/">Arby's</a></li> //AN_Xml:</ul> //AN_Xml: //AN_Xml: //AN_Xml:<p><strong>In this series:</strong></p> //AN_Xml:<ul> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/2-converting-a-photoshop-mockup-part-2-of-3/">Part 2</a></li> //AN_Xml:<li><a href="http://css-tricks.com/video-screencasts/3-converting-a-photoshop-mockup-part-3-of-3/">Part 3</a></li> //AN_Xml:</ul> //AN_Xml: //AN_Xml:<p><br style="clear: both;"/>&hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Mon, 03 Nov 2008 22:41:45 +0000 //AN_Xml: //AN_Xml: 10:10 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7VsR8v4VO8s:Z1MrDcngECQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7VsR8v4VO8s:Z1MrDcngECQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=7VsR8v4VO8s:Z1MrDcngECQ:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=7VsR8v4VO8s:Z1MrDcngECQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/7VsR8v4VO8s" height="1" width="1"/>http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/http://vnfiles.ign.com/ects/css-tricks/VideoCast-1.m4v //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: http://feedproxy.google.com/~r/CSS-Tricks-Screencasts/~3/Qp4I4jjTwxI/ //AN_Xml: //AN_Xml: http://css-tricks.com/video-screencasts/40-how-z-index-works/ //AN_Xml: //AN_Xml: CSS-Tricks //AN_Xml: //AN_Xml: #40: How z-index Works //AN_Xml: //AN_Xml: <p>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.&hellip;</p> //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: Mon, 03 Nov 2008 22:24:36 +0000 //AN_Xml: //AN_Xml: 18:37 //AN_Xml: //AN_Xml: css, web design, html, tutorial //AN_Xml: //AN_Xml: chriscoyier@gmail.com (Chris Coyier)no<div class="feedflare"> //AN_Xml:<a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Qp4I4jjTwxI:5u-iNG__3lc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Qp4I4jjTwxI:5u-iNG__3lc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?i=Qp4I4jjTwxI:5u-iNG__3lc:gIN9vFwOqvQ" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?a=Qp4I4jjTwxI:5u-iNG__3lc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/CSS-Tricks-Screencasts?d=7Q72WNTAKBA" border="0"></img></a> //AN_Xml:</div><img src="http://feeds.feedburner.com/~r/CSS-Tricks-Screencasts/~4/Qp4I4jjTwxI" height="1" width="1"/>http://css-tricks.com/video-screencasts/40-how-z-index-works/http://vnfiles.ign.com/ects/css-tricks/VideoCast-40.m4v //AN_Xml: //AN_Xml: //AN_Xml: Chris CoyiernonadultTips, Tricks, and Tutorials //AN_Xml: //AN_Xml: //AN_Xml: