Browsing Tag

gradients

Sort by

Quick Tip: Mimic Equal Columns with CSS3 Gradients
videos

Quick Tip: Mimic Equal Columns with CSS3 Gradients

on Nov 11th 2010 with 42 comments

What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as, say, the primary content section exceeds the height of the sidebar.

Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images. The irony in this is that we’re using CSS3 gradients to create an effect that doesn’t contain a gradient! Read on to learn more.

(Continue)


This entry is part 4 of 16 in the CSS3 Mastery Session
Build Kick-Ass Practical CSS3 Buttons
videos

Build Kick-Ass Practical CSS3 Buttons

on May 12th 2010 with 119 comments

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

(Continue)

Quick Tip: Understanding CSS3 Gradients
videos

Quick Tip: Understanding CSS3 Gradients

on Mar 23rd 2010 with 73 comments

Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.

(Continue)