CSS-Tricks

About this original series

  • Category

    How To

  • # Episodes

    16 episodes

  • Rating

    TV-G

Episodes of CSS-Tricks

    • Play #10: Fixed Width, Fluid Width & Elastic Width - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #10: 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 wid...

      • Release date
        Jun 9, 2011
      • Runtime
        16:40
    • Play #9: Starry Night: 3D Background with the Parallax Effect - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #9: Starry Night: 3D Background with the Paralla...

      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.

      • Release date
        Jun 9, 2011
      • Runtime
        14:28
    • Play #8: CSS Formatting - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #8: 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 h...

      • Release date
        Jun 8, 2011
      • Runtime
        14:40
    • Play #7: Creating a Three State Menu - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #7: 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 /videos/images to the HTML to the CSS.

      • Release date
        Jun 8, 2011
      • Runtime
        27:17
    • Play #6: Tools of the Trade: The Mac Software I Use for Web Design - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #6: Tools of the Trade: The Mac Software I Use f...

      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 back and forth between in upcoming podcasts.

      • Release date
        Jun 8, 2011
      • Runtime
        15:34
    • Play #5: Columns of Equal Height: Super Simple - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #5: Columns of Equal Height: Super Simple

      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.

      • Release date
        Jun 8, 2011
      • Runtime
        12:40
    • Play #4: Forcing Scrollbars: Eliminating "Horizontal Jumps" - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #4: Forcing Scrollbars: Eliminating "Horizontal ...

      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 vice versa). I cover two different major techniques for doing this, since they both have their advantages and disadvantages between different browers.

      • Release date
        Jun 4, 2011
      • Runtime
        07:08
    • Play #3: Converting a Photoshop Mockup (part 3 of 3) - CSS-Tricks on Blip CSS-Tricks episodes on Blip

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

      I finish up the design in part three of this series on converting an Adobe Photoshop website mockup into an actual HTML/CSS website.

      • Release date
        Jun 3, 2011
      • Runtime
        31:54
    • Play #2: Converting a Photoshop Mockup (part 2 of 3) - CSS-Tricks on Blip CSS-Tricks episodes on Blip

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

      In part two of the 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.

      • Release date
        Jun 2, 2011
      • Runtime
        17:11
    • Play #1: Converting a Photoshop Mockup (part 1 of 3) - CSS-Tricks on Blip CSS-Tricks episodes on Blip

      #1: 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.

      • Release date
        May 30, 2011
      • Runtime
        10:11
Discover the best in original web series.© 2012 Blip Networks, Inc. All Rights Reserved.