Adding Halos (Opaque Children of Transparent Parents)

One of the most difficult aspects of the design was adding the transparent halos around blocks using the CSS opacity settings. This is difficult to do in pure CSS because opacity is inherited. A white backgound placed on a transparent parent will itself be transparent even if its own opacity is set to 100%. The latest versions of FireFox now allow the use of rgba() to set colours, with the final argument setting the opacity: this can be over-ridden. That, however, would not give a cross-browser method of achieving the desired halos.

There are various workarounds on the Internet. The most common approach is using transparent images; however these are generally fiddly, hard or impossible to integrate with rounded corners and usually require that the underlying background is a solid colour, which isn’t what we wanted. The second common solution is to use a <div></div> before the main content <div>. The extra <div> is transparent and is set to be slightly bigger than the main content div which is then placed above it in the z-order. Because the content <div> is a sibling of the transparency <div> These solutions generally assume that the content <div> is of a known size, which clearly doesn’t work for dynamic content.

Eric Watson has a solution! It’s really neat. It adds an additional <div class=”halo”></div> before the content <div> but automatically sizes this to fill the container <div> so that it can accommodate dynamic contents.

Implementing it within the Hybird Theme Framework is also easy. The Hybrid Hooks PlugIn allows HTML (or PHP) to be added at various parts of the layout simply by entering it in the relevant textarea of the WordPress admin panel. The additional <div> was therefore added in the Before Content action hook as:

<div class="hal0"></div>

The stylesheet (styles.css) was then amended to add the relevant CSS.

.content {
        position:relative;
	}

.content > div {
	border:solid 2px #DAA520; -moz-border-radius: 30px; -khtml-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;
	}

.content > div.halo {
	position:absolute;
	top:0;left:0;bottom:0;
	width:100%;
	height:100%;
	background:#CCC;
	opacity:.5; /* FX/Opera/Safari/Chrome */
	-ms-filter:”alpha(opacity=50)”; /* IE8 */
	filter:alpha(opacity=50); /* IE6/IE7 */
	}

.content > div + div {
	position: relative;
	margin: 30px;
	padding: 20px;
}

Rounded corners were also added, although that is obviously optional. Tbis doesn’t added rounded corners in IE, nor does it add halos throughout the theme, but it does demonstrate how easily they can be added. The further extensions will be added in future posts. (I’ll link them here when they are ready.)

If anybody is wanting to translate this for another theme, then the <div> order looks like the diagram below:

Div Order for Opaque Children of a Transparent Parent

Remember that although the halo <div> precedes the other <div>’s, it will resize itself to display 100% of the size of the content <div> container, subject to any margin or padding settings in place. In the Hybrid theme (indeed in most themes), the children of the main content <div> are children so that they can all be reference as .content div. In some themes this may not be the case in which case you may need to refer to the class of the children explicitly.

Navigation

Adding Halos (Opaque Children of Transparent Parents)