In this section, we'll be doing the following:
- Switching color to HSLA
- Adding CSS reflections
- Recreating clouds using CSS-generated content
:afterand:beforeclasses - Using CSS Transform to modify the scale of the clouds
- Swapping the miniature clouds for CSS clouds
In this section we'll introduce a new color type, HSL, which stands for Hue, Saturation, and Lightness. This is yet another way of representing color. In software programs such as Adobe Photoshop there have been multiple ways to express color for some time now.
In Photoshop, for example, documents are typically converted to CMYK (Cyan, Magenta, Yellow, and Black) for use in print, RGB for Web, and even other formats such as LAB, which isn't device dependent and was designed to approximate human vision. HSL is just another great way of expressing color in the browser as 3D. You can learn more about HSL and these other color models at learn.colorotate.org/color-models.html.
Even if you're perfectly happy with plain old RGB, it's good to at least be aware of these other color models as they can really open up a whole new set of color possibilities once you start playing around with them.
We'll also be adding a reflection using the
box reflect property to the h1 tag, and then fading it out using some gradient background trickery so that it mimics something you'd do with a layer mask gradient in an image editing program.
Once the reflection has been added and adequately "masked" to simulate a fading effect, we'll be converting the clouds to completely CSS3-based ones using the generatedcontent feature test. I'm going to chain selectors as a proof of concept for this example.
The HSL color will also take full advantage of multiple backgrounds. The end result will be a background similar to the previous RGBA, but with a little bit of a different take in order to distinguish the two. The great thing about current browsers such as Google Chrome is that the developer tools have a color palette and also color conversion feature that makes experimenting with color easier than it has ever been.
Let's begin by adding the following chained selectors to the style.css file, which will lighten the background for frame-3:
/* Multiple Background Using hsla color */
.multiplebgs.hsla #frame-3{
background: -webkit-linear-gradient(0deg,hsla(0, 100%, 50%, 0) 50%, hsla(190, 100%, 16%, 0.14) 50%),
hsla(185, 65%, 55%, 0.42);
}Also, change the color of the text shadow for only the h2 element of frame-3. This is where the chaining really takes a step up:
/* Example using 3 chained selectors */
.textshadow.multiplebgs.hsla #frame-3 h2.subtitle{
text-shadow: 4px 4px 1px #fff;
}What has happened now is the background has lightened a bit and the color of the text-shadow has been changed to accommodate this as well.
With box shadow at our disposal we can flip an element above, left, right, or below itself. Let's flip the h1 tag in frame 3 (and later frames) on its back and mask it with a mask that fades the element out by using a linear gradient mask. This will give it a true reflection, look, and feel. This can be done using the following code snippet:
/* CSS Reflections */
.cssreflections.cssgradients.rgba #frame-3 h1,
.cssreflections.cssgradients.rgba #frame-4 h1,
.cssreflections.cssgradients.rgba #frame-5 h1{
-webkit-box-reflect: below -0.35em
-webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent),
to(rgba(255,255,255,0.3)));
}The effect of the box shadow property can be seen in the following screenshot:
The CSS clouds we are currently using actually began their life as purely CSS-based. I wish I could take the credit for these but they were actually created on one of my favorite websites at codepen.io/ribardb/pen/cykFj. The following screenshot gives you a peek at this website:
We will be staying pretty true to the original way these clouds were made and only altering the color slightly using the following code snippet:
/* CSS Clouds class */
.cssCloud{
background: white;
height: 110px;
width: 300px;
-webkit-border-radius: 50px;
margin: 0 auto;
position: relative;
z-index: 2;
top: 3px;
box-shadow: inset 5px -4px 18px 4px rgba(75, 98, 120, 0.5),
inset 7px 8px 20px 0px rgba(235, 245, 255, 0.2),
inset 0px 0px 50px 6px rgba(235, 245, 255, 0.2),
0px 0px 20px 6px rgba(240, 240, 240, 0.5);
}This will give us the first part of the cloud, which is the base. After this we add the other two parts using CSS-generated content. Both the :before and :after classes will help to complete the clouds, as shown in the following code snippet:
/* Set the positioning to absolute */
.cssCloud:before, .cssCloud:after{
content: '';
position:absolute;
}
/* The second cloud piece */
.cssCloud:before{
background: white;
height: 170px;
width : 170px;
-webkit-border-radius: 100px;
top:-80px;
left:40px;
box-shadow: inset 3px 9px 6px rgba(111, 181, 217, 0.5),
inset 4px 15px 15px rgba(235, 245, 255, 0.2),
inset 3px 2px 2px rgba(230, 230, 230, 0.5),
-10px -10px 15px rgba(255, 255, 255, 0.1),
0px -10px 15px rgba(255, 255, 255, 0.3),
0 -10px 10px -5px rgba(0, 0, 0, 0.05);
}
/* The third and final piece. */
.cssCloud:after{
background: white;
height: 100px;
width : 100px;
-webkit-border-radius: 50px;
top:-21px;
left:170px;
box-shadow: inset 2px 4px 2px rgba(111, 181, 217, 0.6),
inset 4px 15px 15px rgba(235, 245, 255, 0.2),
inset 3px 2px 2px rgba(230, 230, 230, 0.5),
-10px -10px 15px rgba(255, 255, 255, 0.1),
0 -10px 15px rgba(255, 255, 255, 0.3),
0 -10px 10px -5px rgba(0, 0, 0, 0.05);
}This is the core CSS3 cloud. However, this cloud is much larger than we need because we'll be using it again in the next section. We want it to be much smaller so that it matches the size of the image-based clouds. To do this we can make another CSS class and use that to scale the entire thing down. As this requires the additional feature CSS transforms, let's turn once again to the JavaScript in the script.js file to add this class to scale the cloud:
$(document).ready(function(){
//Frame 3 checks for CSS Gradients, Generated Content and also CSS Transform.
if( Modernizr.cssgradients
&& Modernizr.csstransforms
&& Modernizr.generatedcontent
){
// Loop through frame panel 3 and remove the image css classes
//and then season with the CSS3 versions.
$( '#frame-3' ).find( '.mini-cloud' ).each( function(){
$(this).removeClass( 'mini-cloud' )
.addClass( 'cssCloud smallCloud' );
} );
}
});What's taking place in the JavaScript is that all of the necessary features are tested for as a feature set, and if all of the ducks are in a row, the original CSS classes that used images for the clouds are removed and the CSS3 ones are added in their place.
One last piece remains and that is for the clouds to be scaled down to match the original image-based versions. In the CSS file we'll be adding some classes that control scale using the following code snippet:
/* Classes to scale and reposition
the CSS version of the mini clouds
*/
/* Set positioning to absolute, but relative to parent and then scale down by 50% */
.smallCloud{
position: absolute;
-webkit-transform: scale(0.5);
}
/* Top position the :before part */
.smallCloud:before{
top: -85px;
}
/* Top position the :after part */
.smallCloud:after{
top: -21px;
}
/* Re-adjust the position of the left cloud */
.mini-cloud-l.smallCloud{
left: 25%;
}
/* Re-adjust the position of the right cloud */
.mini-cloud-r.smallCloud{
left: 50%;
}That should about do it. The clouds should now match the size and positioning of their image-based predecessors. So much so that it may be hard to tell which one is being used. So, let's add one last little bit of icing to this cake.
Just after each loop in the JavaScript, add one more line:
$(this).removeClass( 'mini-cloud' )
.addClass( 'cssCloud smallCloud' );
//This new line will add a span element inside the cloud div.
$(this).html('<span class="shadow"></span>'),
And in the style.css file, add the CSS instructions for the shadow as shown in the following code snippet:
/* Shadow */
.cssCloud .shadow {
width: 300px;
position: absolute;
background: black;
bottom: -185px;
z-index: -2;
box-shadow: 0 0 30px 8px rgba(50, 50, 50, 0.9);
-webkit-border-radius: 50%;
}Now the CSS versions will have tiny shadows underneath them, whereas the image versions will not. This should make viewing which version is in play for proof-of-concept feature detection much easier for this frame. The resulting logo is seen in the following screenshot:
Frame 3 is now entirely CSS-based except for one last piece, the official Modernizr logo. I think we might as well go all the way here and convert that as well. The only feature that is really required is borderradius, which by this frame we assume is a feature that already exists since we covered it in the original frame-1 panel.
Nonetheless I want to show one more way of using CSS only to toggle. This time I'm going to leave both of these in the DOM and use CSS to control what is to be displayed.
/* The CSS for the official Modernizr logo */
/* Hide by default */
#modernizr-logo .logo-wrap{
display: none;
}
#modernizr-logo .shape-wrap{
position: absolute;
bottom: 0;
}
#modernizr-logo .curve-contain{
width: 60px;
height: 60px;
overflow: hidden;
position: absolute;
right: 0;
}
#modernizr-logo .curve{
width: 120px;
height: 120px;
background: #333;
display: block;
border-radius: 50%;
left: -60px;
position: absolute;
}
#modernizr-logo .block{
display: block;
width: 20px;
height: 20px;
background: #333;
position: absolute;
bottom: 0;
}
#modernizr-logo .block-1{
left: 20px;
height: 40px;
}
#modernizr-logo .block-2{
left: 40px;
height: 60px;
}
/* Hide image version for all future frames. */
.borderradius #frame-3 #modernizr-logo img,
.borderradius #frame-4 #modernizr-logo img,
.borderradius #frame-5 #modernizr-logo img{
display:none;
}
/* Display CSS version for all subsequent frames. */
.borderradius #frame-3 #modernizr-logo .logo-wrap,
.borderradius #frame-4 #modernizr-logo .logo-wrap,
.borderradius #frame-5 #modernizr-logo .logo-wrap{
display: block;
}And of course the final HTML for the frame is as follows:
<div id="frame-3" class="frame vert-stripe-gradient">
<h1 class="title">Modernizr</h1>
<h2 class="subtitle">The feature detection library.</h2>
<div class="mini-cloud mini-cloud-l"></div>
<div class="mini-cloud mini-cloud-r"></div>
<div id="modernizr-logo">
<img src="images/modernizr-logo.png">
<div class="logo-wrap">
<div class="shape-wrap">
<span class="block block-1"></span>
<span class="block block-2"></span>
<span class="block block-3"></span>
</div>
<div class="curve-contain">
<span class="curve"></span>
</div>
</div>
</div>
</div>What the CSS is doing in the preceding code is hiding the image element inside the modernizr-logo container and instead displaying the pure CSS version, if the borderradius feature is enabled. This is just one more way of toggling a feature on or off by way of feature detection.
That about sums up everything we needed to do for frame 3. At this point, everything has been converted to be 100 percent CSS3 by way of feature detection. We also covered as many bases as possible with the methods available to us to make this all possible. We used generated content in tandem with gradients and border radius to make the clouds. We also used box reflect to create a nice reflection for the h1 tag. Last but not the least we used the HSL color model to alter thebackground of our frame.