9 Amazing Things You Can Do in Firefox 3.6
The latest update to Mozilla’s wonderful web browser, Firefox 3.6, includes support for some fantastic CSS version 3 recommendations that you may or may not be aware of. Obviously, these tricks won’t work in Internet Explorer just yet, but look for widespread support coming in the (hopefully) very near future.
Most of the new features revolve around background image and color management. This has been a definite pain point for designers in the past, as we’ve had to create extraneous <div/> tags and other silly markup hacks to implement our favorite visual elements. Fear not, for all browsers will soon support these great features! If you’ve already installed Firefox 3.6, you should plainly see all the great features in my examples below. If you haven’t installed the latest update, head on over to Mozilla’s website now to download the latest version.
The Linear Gradient
You can now add linear gradients to your HTML elements with a handy CSS attribute called -moz-linear-gradient. Here are a few examples to get you started.
A simple example:
Are you using Firefox 3.6? Check out my linear gradient background. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempor odio ac elit faucibus vel rhoncus purus hendrerit. Pellentesque imperdiet fermentum lacinia.
The CSS:
.shiny-box {
background: -moz-linear-gradient(top, #fff, #e9e9e9);
}Drawing gradients at an angle:
The CSS:
.slide {
background: -moz-linear-gradient(top -45deg, violet, blue);
color: #fff;
}Stringing colors together:
Specify multiple colors in your gradients. In fermentum ipsum eget quam pharetra sagittis. Phasellus mollis, nulla nec sagittis pharetra, magna tortor commodo felis, eget dictum sem ipsum gravida ligula. Aliquam pharetra libero quis ligula sollicitudin condimentum. Sed sed diam nulla. Fusce malesuada gravida felis, id porttitor lacus porttitor sed. Maecenas mollis feugiat ultrices. In ac viverra ligula. Maecenas suscipit tempor nibh ac mattis. Morbi ac metus velit. Morbi enim purus, adipiscing at consectetur eget, blandit id nibh.
The CSS:
.rainbow {
background: -moz-linear-gradient(left 20deg, violet, red, orange, yellow, green, teal, blue, purple);
color: white;
}Alpha Gradients
Alpha gradients allow you to specify an RGBA transparency for background images and colors. This allows you to “fade” your background on a gradient, so it gets slightly more opaque as you near the edge of your element. It works a lot like the linear gradients shown above.
Let’s try it out:
Apply alpha gradients to background colors and images. Mauris id mauris diam, vel hendrerit tortor. Pellentesque leo erat, ullamcorper et consectetur eget, elementum id ipsum. Vestibulum et diam mi, quis commodo velit. Maecenas bibendum purus id sapien sodales ut dapibus est consectetur. Donec vel elementum quam. Suspendisse quis risus nulla. Cras imperdiet, est sit amet rhoncus tincidunt, elit turpis consectetur enim, sit amet gravida erat magna id urna. Cras feugiat, orci nec hendrerit pulvinar, tortor mi dapibus neque, in varius massa velit vitae mi. Fusce dignissim malesuada felis in tincidunt. Donec lacus magna, blandit quis ullamcorper consectetur, interdum in nisl. Curabitur luctus lorem in leo aliquam vestibulum. Ut tempus ornare augue non aliquet. Sed id elit eget sem condimentum tempus et non libero. Proin at nisi quis dolor dignissim varius. Nam fermentum mauris eget justo laoreet vitae tristique quam varius. Praesent sodales sem sed dolor aliquet sagittis. Vestibulum fringilla ultricies nunc. In lacus nisl, mollis blandit aliquam ut, tristique in libero. Suspendisse lacinia aliquet aliquet.
.alpha {
background: -moz-linear-gradient(left, rgba(255,255,255,1),
rgba(255,255,255,0)),
#4aceff url(http://thepeev.com/wp-content/themes/thepeev/images/plant.png) bottom no-repeat;
}Radial Gradients
Radial gradients allow for some really cool effects like gradient “shine” and other neat things you’d otherwise have to create in Photoshop.
The example:
You can even draw radial gradients. See how I shine! Donec malesuada, augue in pulvinar tincidunt, tellus lectus iaculis mi, vel facilisis ante mauris et sem. Nunc pretium orci in lacus sollicitudin rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin risus eu libero vestibulum vel mattis diam sagittis. Duis vel dui non erat eleifend dignissim vitae vitae dui. Curabitur dictum imperdiet diam euismod viverra.
The CSS:
.radial {
background: -moz-radial-gradient(top left, white 20%, orange);
}Repeating Gradients
As if this wasn’t enough, you’ll also have support for repeating gradients, which allows you to do some really cool stuff.
Check it out:
Repeating gradients make it easy to add slash-boxes. Vestibulum at fringilla dolor. Pellentesque id consectetur enim. Suspendisse vel nibh magna, et imperdiet mi. Aliquam erat volutpat. Maecenas dui quam, volutpat vitae cursus et, suscipit sit amet lorem. Duis congue, nisi eu aliquet ultricies, ipsum ligula rutrum libero, quis rhoncus nisi mauris lacinia nunc. Nam iaculis, nibh et faucibus tempor, massa magna eleifend urna, sit amet pulvinar arcu velit et lacus.
The CSS:
.slasher {
background: -moz-repeating-linear-gradient(left -45deg, #fff, #f5f5f5 1px, #fff 5px, #fff 1px);
}Use it with radial gradients:
Repeating radial gradients make it easy to add special effects to your design. Aliquam tempor tempor nunc, ut dapibus nisl vehicula et. Nullam felis metus, consectetur eu pretium eu, iaculis eu tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut quis ligula orci, id molestie orci.
The CSS:
.burst {
background: -moz-repeating-radial-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);
border: 5px #bfeeff solid;
}Background Images
This is one that I’m really excited about. You can apply multiple background images to a single layer. Here’s how it works:
Multiple background layers:
You can layer multiple background images on a single element. This example was taken direclty from Mozilla’s demonstration page. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque imperdiet elit dignissim libero sollicitudin tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis mattis, leo at rhoncus varius, leo eros tempus ligula, eget blandit mi tortor vitae ante. Nulla varius aliquet massa ac varius. Vestibulum a ipsum vitae ante lobortis facilisis vitae eu risus.
The CSS:
.layers {
background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
-moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)),
url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background-repeat: no-repeat, no-repeat, repeat;
background-position: bottom right, left, right;
color: #fff;
}You can also resize background images!
You can scale a background image to any size. It’s so ugly! Morbi sapien urna, convallis quis accumsan mattis, congue non ante. Phasellus bibendum nibh id orci consequat hendrerit rhoncus in leo. Ut a mauris eu nisl accumsan pulvinar sit amet at leo. Aenean sit amet enim sit amet tellus pellentesque tempus. Vivamus lobortis dui sed arcu venenatis vel vehicula felis vestibulum. Fusce vel ipsum eu nulla fermentum gravida. Suspendisse tincidunt euismod consectetur.
The CSS:
.sizer {
background: #f5f5f5 url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png) bottom right no-repeat;
-moz-background-size: 120px;
-webkit-background-size: 120px;
-o-background-size: 120px;
}Other Additions
Mozilla has included some other great new features, such as the highly anticipated CSS attribute @font-face, which allows you to embed WOFF downloadable fonts into your web design. Type is finally coming to the web! For details on this and the many other great new features in Firefox 3.6, visit Mozilla’s update details for developers page.