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
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
This is <span style="color: transparent;">transparent</span> text.
This is transparent text.
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.
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:
RGB with Alpha Channel
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
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 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.
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.