Smashing Html5 : Working with Color Values - Adding Transparency to Color

2/1/2015 8:26:59 PM

One of the new features you can see on an HTML5-compliant browser is transparency, or variable opacity. A fully opaque object on the screen blocks whatever is beneath it, while a fully transparent object allows anything beneath it to be fully seen — like glass. The value used to describe the level of opacity is expressed in an alpha property set between 0 and 1. Using either the RGB or HSL color formatting, the alpha is the fourth parameter. (Unfortunately, there is no hexadecimal alpha parameter in CSS3.) For example, rgba(255,0,0, 0.5) generates red with 50 percent opacity. Likewise, hsla(120, 100%, 50%, 0.3) creates green with 30 percent opacity (or 70 percent transparency).

In Part IV of this book, I discuss ways to add depth to your page with the <canvas> tag so that when you stack objects on top of one another, you can better see why having some transparency in your creations is important. For now, though, you need something that you can place beneath text blocks that can be viewed through a transparent text block. The easiest method is to place a background object using the background-image property. The following code snippet shows how:

body { background-image:url(imageFile.png); }

You can use any .jpg, .gif, or .png file for a background image. For this example, three circles in the colors red, green, and blue are used as a background and on top are <h1> text with 50 percent opacity to show the effect that different colors have when viewed through a transparent object. The following code  uses both rgba() and hsla() formats.




<style type=”text/css”>

body {



.transRed {

color:rgba(255, 0, 0, .5);


.transGreen {

color:rgba(0, 255, 0, .5);


.transBlue {

color:hsla(240, 100%, 50%, .5);




background-color:hsla(120, 100%, 50%, .5);



<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>




<h1 class=”transRed”>Testing 123, Testing 123, Testing 123</h1>

<h1 class=”transGreen”>Testing 123, Testing 123, Testing 123</h1>

<h1 class=”transBlue”>Testing 123, Testing 123, Testing 123</h1>

<h1 class=”transBackground”>Testing 123, Testing 123, Testing 123</h1>



The results shown in Figure 4-6 are shown on an iPhone and they look no different than what you’ll see on your a computer screen.

As you can see, the transparent text and background allow the background object to show through. When a color is transparent, it picks up some of the underlying color; so, when you use it, bear in mind what the combination of the underlying and overlying colors look like together. (By the way, Figure 1 shows why you rarely want to use background images — they have a way of cluttering the screen and destroying any sensibility in the text.)


Figure 1: Transparent text over solid graphics.

  •  Smashing Html5 : Working with Color Values - Understanding RGB Color (part 2) - RGB decimal integer settings
  •  Smashing Html5 : Working with Color Values - Understanding RGB Color (part 1) - Using names, RGB and HSL percentages
  •  Web Security Testing : Automating Specific Tasks with cURL - Impersonating a Specific Kind of Web Browser or Device
  •  Web Security Testing : Automating Specific Tasks with cURL - Checking for Directory Traversal with cURL
  •  Web Security Testing : Automating Specific Tasks with cURL - Following Redirects Automatically, Checking for Cross-Site Scripting with cURL
  •  Web Security Testing : Automating Specific Tasks with cURL - Fetching Many Variations on a URL
  •  Web Security Testing : Automating Specific Tasks with cURL - Fetching a Page with cURL
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 6) - Check In/Out, Versioning, and Content Approval
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 5) - Content Management - Putting It All Together
  •  Sharepoint 2013 : SharePoint Publishing Infrastructure (part 4) - Content Management - Master Pages,Page Layouts
    Most View
    Asus VivoBook S400CA Ultrabook Review
    MSI GX60 Gaming Notebook - Great Looks And A Fast GPU
    Toshiba Kirabook - Toshiba Attempts To Refresh With A Premium Ultrabook (Part 1)
    Dell PowerEdge T320 - A Top Choice For SMBs
    Android Application Development : Drawing 2D and 3D Graphics - Bling (part 1)
    Windows Server 2008 : Adding Roles to Server Core - Using ocsetup to Add Roles to Windows Server 2008 (part 1)
    Samsung Galaxy Camera - A Hybrid Between Photography And Sharing
    Adobe InDesign CS5 : Working with Objects and Layers - Creating and Deleting Object Layers
    Developing BlackBerry Tablet Applications : OS Interactions - Splash Screen
    Microsoft Surface RT - The Thin And Light Tablet
    Popular Tags
    Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
    Top 10
    Review : Acer Aspire R13
    Review : Microsoft Lumia 535
    Review : Olympus OM-D E-M5 Mark II
    TomTom Runner + MultiSport Cardio
    Timex Ironman Run Trainer 2.0
    Suunto Ambit3 Peak Sapphire HR
    Polar M400
    Garmin Forerunner 920XT
    Sharepoint 2013 : Content Model and Managed Metadata - Publishing, Un-publishing, and Republishing
    Sharepoint 2013 : Content Model and Managed Metadata - Content Type Hubs