Adobe Dreamweaver CS6 Working With Gradients

Working With Gradients

• We are going to look at adding CSS3 gradient properties to our homepage
• Gradients can be added to content areas within a web page but they are a bit tricky to make cross browser
• Open the gradients.html file and take a look at it in the browser
• Drop shadows have been added but the box still appear to look very flat in the browser
• We will convert our solid color background into a gradient background to give these boxes a bit more depth
• Adding gradients to your page content can be a bit tricky because browser support is a mixed bag right now
• Instead of making you type all the variations for this property, I have a text file that we will use as a base for this exercise
• Open gradients.txt from the text folder, do a select all/copy and we will add this code to our web page
• Let’s start with Firefox so we can use Firebug to turn pieces of this code on & off to see what it does to our page in Firefox
• Turn off everything but the first in the list & see what happens, this is the standard that will someday be adopted by all browsers so we only need to list this one
• Notice that in Firebug, we only see the –moz- version of this style rule, the other versions are not used so we know that at least my version of firefox still required the prefix
• Now go back to Dreamweaver & comment out all the lines with prefixes and test the page in the various browsers
• background-image: linear-gradient(-90deg,rgba(217,54,0,0.8) 0%,rgba(255,184,0,0.8) 100%);
• Talk about what happens in each one
• IE does not support any of these in versions 9 or lower, 10 may support it