Content's visibility

The visibility property specifies whether a box generated by an element will be rendered visible on the canvas or not.

Unlike the display property with the value none, the elements made invisible with the visibility property still affect the layout; therefore they exist in the elements flow but are not rendered on the screen.

The visibility property contains following information:

value: visible, hidden, collapse or inherit;
initial: visible;
applies to: all elements;
inherited: yes;
percentages: N/A;
media: visual;
computed value: as specified.

The value hidden hides the box (makes it fully transparent) and the value visible ensures the box is visible. If a descendant box have the value set to visible it will be rendered visible even if its parent (ancestor) is set to hidden.

The value collapse affects the table elements such as rows, row groups, columns and column groups, in any other case it has the same meaning as value the hidden.

Example

CSS element's visibility example:

<html>
<head>
<title>CSS tutorial</title>
<style type="text/css">
div {
	position:relative;
	margin: 10px; padding:5px;
	font-family:"Georgia"; color:#bbb;
	border:1px solid #222;
	background-color:#012345;
}
a {
	color:#ff0;
}
a:active {
	visibility:hidden;
}
</style>
</head>

<body>

<div>
	<p>This simple test shows how the <i>visibility</i> property can be used.</p>
	<p>This effect is done only with the CSS, but with some client side scripting (like JavaScript) one can achieve even richer effects.</p>
	<a href="http://www.brenkoweb.com" target="_blank">Click on this link!</a>
	<h6>If your browser support <i><b>:active</b></i> pseudo-class, this example should function properly</h6>
</div>

</body>
</html>

›› go to examples ››

Content's visibility

Example

CSS element's visibility example:

Comments

About

Contact

Get Connected