Nuclear css display properties

Display

Specifies the type of box used for an HTML element.

• inline - Default value. Displays an element as an inline element.
• block - Displays an element as a block element.
• inline-block - Displays an element as an inline-level block container.
• table - Let the element behave like a table element.
• table-cell - Let the element behave like a td element.
• none - The element will not be displayed at all (has no effect on layout).

.d-i   { display: inline; }
.d-b   { display: block; }
.d-ib  { display: inline-block; }
.d-tb  { display: table; }
.d-tbc { display: table-cell; }
.d-n   { display: none; }

<div class="d-n">
  hidden
</div>

Overflow

Specifies what happens if content overflows an element's box.

• visible - The overflow is not clipped. It renders outside the element's box.
• hidden - The overflow is clipped, and the rest of the content will be invisible.
• scroll - The overflow is clipped, but a scroll-bar is added to see the rest of the content.
• auto - If overflow is clipped, a scroll-bar should be added to see the rest of the content.

.ov-v  { overflow: visible; }
.ov-h  { overflow: hidden; }
.ov-s  { overflow: scroll; }
.ov-a  { overflow: auto; }

.ovx-v { overflow-x: visible; }
.ovx-h { overflow-x: hidden; }
.ovx-s { overflow-x: scroll; }
.ovx-a { overflow-x: auto; }

.ovy-v { overflow-y: visible; }
.ovy-h { overflow-y: hidden; }
.ovy-s { overflow-y: scroll; }
.ovy-a { overflow-y: auto; }

<div class="ov-s">
  overflowing content is scrollable
</div>

Opacity

Sets the opacity level for an element.

• number - Specifies the opacity. From 0 (fully transparent) to 1 (fully opaque).

Note: IE8 and earlier versions supports an alternative, the filter property. Like: filter:Alpha(opacity=50).

.op-0  { opacity: 0; }
.op-1  { opacity: .1; }
.op-2  { opacity: .2; }
.op-3  { opacity: .3; }
.op-4  { opacity: .4; }
.op-5  { opacity: .5; }
.op-6  { opacity: .6; }
.op-7  { opacity: .7; }
.op-8  { opacity: .8; }
.op-9  { opacity: .9; }
.op-10 { opacity: 1; }

<div class="op-5">
  50% transparent
</div>

Visibility

Specifies whether or not an element is visible.

• visible - Default value. The element is visible.
• hidden - The element is invisible (but still takes up space).
• collapse - Only for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as "hidden".

Tip: Even invisible elements take up space on the page. Use the display property to create invisible elements that do not take up space!

.v-c { visibility: collapse; }
.v-h { visibility: hidden; }
.v-v { visibility: visible; }

<div class="v-h">
  content will not be shown but element still takes up space.
</div>