Visibility

We take the visibility of our content for granted, right up until we find ourselves in an interactive environment and we discover that the can start showing and hiding elements. You do not normally want to hide elements without given some means of showing the hidden elements, either through interaction or animation. As you create more complex interactivity and interactions you’ll find a good deal of your work will be with managing the visibility of your content.

transparent color value keyword

The transparent value can be used on place of a color value, to make the property completely transparent. This does not remove the effected element from the document flow. You can still copy and paste the text, even though you can’t see it. You’ll most likely be using it on the color, background-color, or border-color properties.

This is <span style="color: transparent;">transparent</span> text.

This is transparent text.

visibility property

visibility: hidden will remove the elements from sight, but will not remove the space of the element from the flow of the document. It does however, remove the effected element from the document flow. You cannot copy and paste text hidden in this way.

This is <span style="visibility: hidden;">hidden</span> text.

This is hidden text.

opacity property

Opacity is an important concept for when we begin using colored or patterned backgrounds, positioned elements, adding drop shadows, and/or animation transitions. The opacity property can change the opacity. Much like the transparent keyword value, this will not remove the element from the document flow, and you can still copy and paste the effected elements, even if the opacity is set to 0%.

This is 50% opacity text.

This is <span style="opacity: .5;">50% opacity</span> text.

Color with Alpha Channels

In addition to the transparent value and opacity property you can set a transparency value directly into your color value.

Hexadecimal Colors with Alpha Channel

Add two additional digits to your hexadecimal colors to activate the alpha channel. The pattern is: RRGGBBAA. The value for a hex code with alpha channel color looks like this: #00FF0076.

RGB with Alpha Channel

Use the rgba() color function to activate the alpha channel with RGB colors. The value for RGB with alpha channel color looks like this: rgba(255, 0, 0, .5).

HSL with Alpha Channel

Use the hsla() color function to activate the alpha channel with HSL colors. The value for HSL with alpha channel color looks like this: hsla(120, 50%, 50%, .5).

Display values

The display property can remove an element from the document flow when you set its value to none. The effected element can’t be copied, and the browser does’t preserve the place for the element in the document flow.

This is undisplayed text.

This is <span style="display: none;">undisplayed</span> text.

You change the default display value for various effects.

none hides the element from the display. With the clever use of CSS selectors or with JavaScript, it can be used to show and hide elements on the page.

inline will behave like any other inline element and will not accept the properties width, height, padding, margin.

block will behave like any other block element and will accept the properties width, height, padding, margin.

inline-block will allow the element to flow like a word in a line of text, while retaining the ability to use the box model styles like width, height, padding, margin.