In this section we'll be doing the following:
- Creating multiple backgrounds to change the color
- Adding a text shadow to the page for headings
- Using RGBA color for alpha
Now we're going to leave the first frame alone and head into the open waters over to frame two. In frame two, we will be detecting and then using multiple backgrounds. The original background is ok, but it would be nice to saturate it with some color. Adding color is actually quite simple with multiple background support. We'll also be taking advantage of support for RGBA, which is identical to traditional RGB color with one very key addition—alpha. Alpha for anybody familiar with things such as Photoshop is more or less the opacity of the color.
Multiple background support is as you would imagine noted in the namespace and also the DOM as multiplebgs. Therefore we can target the background using just the CSS as shown in the following example.
In this example, we return again to the CSS and JavaScript hybrid method. The CSS will have its own selector class and JavaScript will be in control of whether or not to place it on the frame-2 element, as shown in the following code snippet:
/* Adds an additional linear gradient background. */
.additionalBgRgb{
background: -webkit-linear-gradient(0deg,rgb(7, 165, 179) 50%, rgb(138, 214, 230) 50%), rgb(40, 194, 209);
}
//Add the additionalBgRgb class to the Frame-2 element.
$(document).ready(function(){
//Add an additional background to the frame, if supported.
if( Modernizr.cssgradients && Modernizr.multiplebgs ){
$( '#frame-2' ).addClass('additionalBgRgb'),
}
}); //End of document ready.If you save this all and refresh the browser, you'll now notice that the class has been added to the frame-2 element and the background has now been changed to a very nice blue-green color, as seen in the following screenshot:
Let's take this a little bit further and use RGBA and capitalize on the alpha property to tone this color down a touch. We'll do this the very same way but with RGBA color this time instead of RGB color.
In the JavaScript in the script.js file add the following after the previous condition:
//Add an additional background to the frame, if supported.
if( Modernizr.cssgradients && Modernizr.multiplebgs ){
$( '#frame-2' ).addClass('additionalBgRgb'),
}
//Simlar to RGB, using a multiple background this time using RGBA.
if( Modernizr.cssgradients
&& Modernizr.multiplebgs
&& Modernizr.rgba ){
$( '#frame-2')
.removeClass('additionalBgRgb')
.addClass('additionalBgRgba'),
}
The CSS with RGBA will be similar, with a slight difference being the opacity, which will tone down the saturation of the color a touch. The code used to make this change is as follows:
.additionalBgRgba{
background: -webkit-linear-gradient(0deg,rgba(7, 165, 179, 0.6) 50%, rgba(138, 214, 230, 0.82) 50%), rgba(40, 194, 209, 0.5);
}The way we have the code set up now is that we check for multiple background support, and if found, season the frame-2 element with a new class of addtionalBgRgb. Then a second check is done for multiple background and RGBA support and if found, the addtionalBgRgb class is removed and replaced by the rgba class.
This works fine, and there may be no noticeable difference in the page speed but it could be better. Let's reverse the conditionals and set the rgb class to be a fallback of the rgba class. As RGBA color is ultimately what we're after it makes sense to test for that first and if it's not present to fall back on, or settle for the rgb class version. The code snippet used is as follows:
//Simlar to RGB, using a multiple background this time using RGBA.
if( Modernizr.cssgradients
&& Modernizr.multiplebgs
&& Modernizr.rgba ){
$( '#frame-2' ).addClass('additionalBgRgba'),
}
//Fall back on the rgb class.
else if( Modernizr.cssgradients && Modernizr.multiplebgs ){
$( '#frame-2' ).addClass('additionalBgRgb'),
}Having a custom font is great. In fact I think the world has seen about enough poor man's Helvetica for one lifetime, but that doesn't mean we have to stop there. In fact with textshadow support enabled we can do some really cool things with the text that we have. This time we're jumping back into the CSS; we won't need JavaScript as the fallback for this would be what we already currently see on the page.
I know that I'll be using these elements in all the frames from this point forward. So, I'll add them all now as shown in the following code snippet:
/* Text Shadow for current and future h1 elements */
.textshadow #frame-2 h1,
.textshadow #frame-3 h1,
.textshadow #frame-4 h1,
.textshadow #frame-5 h1{
text-shadow: 1px 2px 6px #333;
text-shadow: 1px 0px #eee, 0px 1px #ccc,
2px 1px #eee, 1px 2px #ccc,
3px 2px #eee, 2px 3px #333;
}
/* Ad text shadow to current and future h2 elements */
.textshadow #frame-2 h2,
.textshadow #frame-3 h2,
.textshadow #frame-4 h2,
.textshadow #frame-5 h2{
text-shadow: 4px 3px 1px rgb(9, 154, 160);
}This should be fairly self-explanatory as it's been covered by other features, but let's do a quick review. All browsers that pass the textshadow feature test will be given a text shadow. In the case of the h1 element's multiple shadows have been added to give it a nice raised effect.
We could do a no-textshadow instance as well, but the default experience doesn't warrant it as we're happy enough with how it looks should text-shadow be ignored by the browser not supporting it. This is a good practice in my opinion because it keeps code low, when you design, as much as possible into the base experience that you are happy with. So, minimal exceptions have to be used.
That's a pretty good place to end for this frame. We've added a nice text-shadow effect, introduced a second background so that frame 2 is not only using the original stripes but a colored RGB background as well to give it a nice blue-green color, and we reduced the saturation of the second background with the introduction of the alpha property with RGBA color.