BestGFX

As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

This one is for those who are hoping to take their first steps into web design. This 70 minute Premium video tutorial will assume that you have zero knowledge of CSS. Over the course of the screencast, you ll learn about the basic syntax, a plethora of different properties, and how to create the beginnings of your very first website.

Thanks to advanced CSS properties, such as gradients and shadows, it s now quite easy to turn a dull web form into something beautiful with minimal effort. I ll show you how in today s tutorial!

In this Premium video tutorial, you’ll learn how to use a grid to create a simple newspaper-like website from scratch. Along the way, you’ll learn helpful techniques:

* Create the layout of a website from scratch.
* Easy ways to target IE7 and IE6 with only a single character
* Learn how to use the 960 grid system
* Take advantage of new CSS3 to create multiple columns!

If you ve ever used a piece of software, like Picasa or iPhoto before, you ll be aware of the fact that there is a slider at the bottom, which allows you to specify how large each photo should be. Move the slider up a few ticks, and all the photos will zoom in a bit. Thanks to the HTML5 and the new range input, we can mimic this effect rather easily. Along the way, we ll also learn about a variety of awesome new CSS3 features, including transition, nth-child, rotations, scaling, and more.

If you ve ever used a piece of software, like Picasa or iPhoto before, you ll be aware of the fact that there is a slider at the bottom, which allows you to specify how large each photo should be. Move the slider up a few ticks, and all the photos will zoom in a bit. Thanks to the HTML5 and the new range input, we can mimic this effect rather easily. Along the way, we ll also learn about a variety of awesome new CSS3 features, including transition, nth-child, rotations, scaling, and more.

One of the new features in HTML5 is native drag and drop. Surprisingly, Internet Explorer has had support for this since version 5.5; in fact, the HTML5 implementation is based on IE s support. In this week s Premium tutorial and screencast, we ll look at how to implement native drag and drop to build a simple shopping cart interface.

The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.

The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.

Just when you thought you d seen all the cool features of HTML5, I m here to bring you yet another one. The internet is no longer about just websites; it s about web applications. Often, our users are on portable or mobile devices, and they won t always have access to a network. With HTML5 s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.

Many might not be aware that, with CSS, we can achieve reflections quite easily in all webkit-based browsers, which represent roughly 20% of all browser usage. The key is in the vendor-specific, -webkit-box-reflect property. I ll show you how to use it in today s video quick tip!

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let s take a look in this video quick tip.