Explain CSS visibility property & Overflow property

CSS visibility property:

CSS can be used to control visibility factors, this property is used to set the visibility of the element. Properties of these values ​​are listed below:

Visible: component will be visible. This is the default value.

Hidden: Hidden component, but it is not removed completely from the document’s layout.

Collapse: hidden component and should not be removed from the document’s layout.

[Note: collapse of value only applies to table elements.]

Sample syntax: div{visibility: hidden;}

Example-1 :

<!DOCTYPE HTML>
<html>
<head>
<style>
p{font-family:Verdana; border:5px ridge #009900; font-size:1em; color:#666;padding:10px;}
</style>
</head>
<p>
I am not bound to win, but I am bound to be true.  I am not bound to succeed, but I am bound to live by the light that I have.
<img src="logo.png" id="visible"/>
I must stand with anybody that stands right, and stand with him while he is right, and part with him when he goes wrong.-Abraham Lincoln<br>
</p>
<p> 
<button>Visible</button> 
<button>Collapse</button> 
<button>Hidden</button> 
</p> 
<script> 
var buttons = document.getElementsByTagName("BUTTON"); 
for (var i = 0; i < buttons.length; i++) {buttons[i].onclick = function(e) {document.getElementById("visible").style.visibility = e.target.innerHTML;};} 
</script> 
</html>

Display in Browser:

.visibility_property

Example-2-1: visibility hidden

<html>
<head>
<style type="text/css">
.example {visibility: hidden;}
</style>
</head>
<body>
<p>This text is displayed. [<span class="example"> This text is not displayed.</span>] This text is displayed.</p>
<p>This text is displayed.</p>
<p class="example"> This text is not displayed.</p>
<p>This text is displayed.</p>
</body>
</html>

Display in Browser:

.visibility_property - hidden

CSS back face-visibility property:

The element is used to determine the visibility of the back face. Who would rotate in 3D space element will be visible element determines whether or not the back side of the property. If the property value is Hidden, if the component is rotated in such a way so that it is effectively invisible until the element is visible from the front side of the audience.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS3 backface-visibility Property</title>
<style type="text/css">
.flip-container {
    margin: 50px;
    perspective: 1000px;
    display: inline-block;
}
.flip-container:hover .card {
    transform: rotateY(180deg);
}
.card, .front, .back {
    width: 130px;
    height: 195px;
}
.card {
    position: relative;
    transition: 0.5s all;
    transform-style: preserve-3d;
}
.front, .back {
    position: absolute;
    backface-visibility: hidden;
}
.front {
    z-index: 1;
    transform: rotateY(180deg);
}
.back {
    z-index: 2;
    transform: rotateY(0deg);
}
</style>
</head>
<body>
    <div class="flip-container">
		<div class="card">
			<img src="computer.jpg" class="back" alt="Card Back" />
			<img src="computer.jpg" class="front" alt="Card Front" />			
		</div>
	</div>
	<p><strong>Note:</strong> Place mouse pointer over the card image to see the backface-visibility property in action.</p>
</body>
</html>

CSS overflow property:

If you create text boxes to overcome the situation. This is how the property will be visible controls. If it is larger than the size of the boxes containing the element to control the situation, that is, the box element to accommodate the overflow property is used. By default, the overflowing content comes out of the box. But this problem is easily resolved by the CSS overflow property.

Overflow-x and Overflow-y:

How overflowing contents horizontally (left and right edges) will be visible next to the axis to control the content overflowing overflow-x properties and vertical (from the bottom) are visible along the axis is used to control overflow-Y Properties. The overflow overflow-x and overflow-Y properties of the same value.

Example: overflow-x property:

The horizontal axis (x axis) of the content area next to the outrun or overflow of the content of this property is used to determine what to do. One of the most effective value of the overflow auto.

Sample coding syntax:

div(width: 200px; height:120px; overflow-x: scroll; overflow-y: scroll;)

Example: overflow-y (vertical)

<html>
</head>
<style type="text/css">
div{width: 200px; height: 100px; margin-bottom:20px;
background-color: #ffffff; border: 1px gray solid;}

#example1 {overflow-y: scroll;}
#example2 {overflow-x:scroll; white-space: nowrap;}
</style>
</head>
<body>
<div id="example1"><p>Vertical scroll</p><p>Scroll</p>Scroll</p>....</div>
<div id="example2">
<p>Horizontal scroll</p><p>Scroll, Scroll</p><p>Scroll</p></div>
</body>
</html>

Display in Browser:

css overflow-y vertical

Example: overflow-x (horizontal)

<!DOCTYPE html>
<html>
<head>
<style> 
body{font-family:verdana;}
div{float:left;width:100px;height:100px;border:5px double #666;margin: 10px;}
  .hide{overflow-x:hidden;}  /*hide overflow along X  axis */
  .scroll{overflow-x:scroll;} /*scroll overflow along X  axis */
  .visible{overflow-x:visible;}/*visible overflow along X axis */
  .auto{overflow-x:auto;}     /*overflow along X  axis  set to auto*/
  .inherit{overflow-x:inherit;}/*inherit overflow from parent element along Xaxis */
</style>
</head>
<body>
<div class="hide"><p style="width:100px">It could probably be shown by facts and  figures that there is no distinctly native criminal class except Congress.</p></div>
<div class="scroll"><p style="width:200px">It could probably be shown by facts and figures that there is no distinctly  native criminal class except Congress.</p></div>
<div class="auto"><p style="width:200px">It could probably be shown by facts and   figures that there is no distinctly native criminal class except Congress.</p>
</div><div class="visible"><p style="width:200px">It could probably be shown by facts and figures that there is no distinctly native criminal class except Congress.</p></div>
<div class="inherit"><p style="width:200px">It could probably be shown by facts and  figures that there is no distinctly  native criminal class except Congress.</p></div>
</body>
</html>

Display in Browser:

overflow_horizontal

Leave a Reply

Your email address will not be published. Required fields are marked *