Css tutorials
67 video tutorials
Tutorials 11 to 20 on 67
#9: Starry Night: 3D Background with the Parallax Effect
free tutorial by css-tricks.com in Css tutorials
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…
#10: Fixed Width, Fluid Width & Elastic Width
free tutorial by css-tricks.com in Css tutorials
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…
#11: Working Modularly with PHP
free tutorial by css-tricks.com in Css tutorials
Many sites do not use any fancy Content Management System (CMS) to generate their pages, they are just just good ol’ static HTML content. A site for your grandmothers pie baking business probably only has a few pages, perhaps a homepage, about…
#12: Converting a Photoshop Mockup: Part Two, Episode One
free tutorial by css-tricks.com in Css tutorials
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…
#13: Converting a Photoshop Mockup: Part Two, Episode Two
free tutorial by css-tricks.com in Css tutorials
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…
#14: Converting a Photoshop Mockup: Part Two, Episode Three
free tutorial by css-tricks.com in Css tutorials
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…
#15: Introduction to Firebug
free tutorial by css-tricks.com in Css tutorials
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…
#16: Creating the Photoshop Mockup
free tutorial by css-tricks.com in Css tutorials
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.
#17: Sliding Doors Button
free tutorial by css-tricks.com in Css tutorials
While sliding doors is far from a new concept and will be obsoleted once we see wider support for multiple backgrounds (CSS3), it is still a good one for your bag-of-tricks. The theory is that if we have an extra hook in our markup, we can apply two…
#18: Introduction to the Band Website Template
free tutorial by css-tricks.com in Css tutorials
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.