Language selection

Search

Opacity

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to adjust the opacity of any element.

Design and coding

Basic use

Default

Use to apply an opacity/transparency to a foreground item so the background becomes visible.

Appearance

Default:

Default image, a grey aquare

With opacity:

opct-100

Demo of opct-100

opct-90

Demo of opct-90

opct-80

Demo of opct-80

opct-70

Demo of opct-70

opct-60

Demo of opct-60

opct-50

Demo of opct-50

opct-40

Demo of opct-40

opct-30

Demo of opct-30

opct-20

Demo of opct-20

opct-10

Demo of opct-10
Correct use

Compliance point(s):

  • Use .opct-90 to .opct-10 change the opacity of a foreground element, and make the background visible through it
    • The opacity levels vary by degrees of 10
    • The style .opct-100 gives an image full visibility, much like the default setting
    • The style .opct-10 gives an image 10% visibility
  • Use .opct-100 when a fade in to 100%, or fade out from 100% is required
  • Ensure that the new lighter text colour still passes accessibility colour contrast requirements
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use if the opacity makes the foreground content difficult to see or read
Code
<img class="opct-100" src="x.jpg" alt="">
<img class="opct-90" src="x.jpg" alt="">
<img class="opct-80" src="x.jpg" alt="">
<img class="opct-70" src="x.jpg" alt="">
<img class="opct-60" src="x.jpg" alt="">
<img class="opct-50" src="x.jpg" alt="">
<img class="opct-40" src="x.jpg" alt="">
<img class="opct-30" src="x.jpg" alt="">
<img class="opct-20" src="x.jpg" alt="">
<img class="opct-10" src="x.jpg" alt="">

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Date modified: