CSS Zoom And Order

CSS Order

CSS Zoom And Order property defines the area of the element that should be seen and is used to establish a clipping region. The region's inside will be visible, but the exterior will be obscured. Browsers will clip anything outside the clipping, including borders, text-shadows, and many other elements.

The elements are displayed in the increasing CSS Zoom And Order of their order values. Two elements with the same order value will be displayed according to the source code definition of their occurrence.

The order property alters the visual order of flex items. A higher order value will be placed after the item with the lowest value. The tabular or logical order of the elements is unaffected. It must not be applied to speech or non-visual media.

It is acceptable to define negative order values. Negative values are helpful when displaying one item first while maintaining the order of the other items. In the absence of a specified value, the default value of 0 will be applied. Therefore, we can give an item a negative value, such as -1, when we want to display it first. The item corresponding to this negative value will always be displayed first because it is less than 0.

Values

The order property uses the integer values to define the items' order.

Integer: It specifies the order of flexible items. The default value is 0.

Initial: This sets the default value for the property.

Inherit: This element uses the calculated value from its parent element.

Observe the following examples.

Example 1

<!DOCTYPE html>  
<html>  
   <head>  
      <style>  
      body{  
      text-align: center;  
      }  
        .container {  
            display: flex;  
            background-color: red;  
            height: 150px;  
            width: auto;  
            flex-wrap: wrap;  
         }  
         div {  
            background-color: lightgreen;  
            line-height: 40px;  
            color: black;  
            padding: 10px;  
            text-align: center;  
            font-size: 35px;  
            width: 100px;  
            margin: 20px;  
         }  
      </style>  
   </head>  
   <body>  
   <h1> CSS order Property Example </h1>  
       <div class = "container">  
         <div style = "order: 3"> A </div>  
         <div style = "order: 0"> B </div>  
         <div style = "order: 0"> C </div>  
         <div style = "order: 1"> D </div>  
         <div style = "order: -1"> E </div>  
         <div style = "order: 2"> F </div>  
         <div style = "order: 1"> G </div>  
         <div style = "order: -2"> H </div>  
      </div>  
   </body>  
</html>  

In the example above, we used some elements with negative values as well as the same order values. The elements with lower values will appear first, and the values will appear in the same order based on where they occur in the code.

Example 2

<!DOCTYPE html>  
<html>  
  <head>  
    <style>   
      .container {  
      padding: 0;  
      margin: 0;  
      list-style: none;  
      display: flex;  
      }  
      .list {  
      padding: 5px;  
      width: 100px;  
      height: 100px;  
      margin: 5px;  
      line-height: 100px;  
      color: black;  
      font-size: 30px;  
      text-align: center;  
      }  
    </style>  
  </head>  
  <body>  
    <h2>Order property Example</h2>  
    <ul class="container">  
      <li class="list" style= "order: 5; background-color: pink;">A</li>  
      <li class="list" style= "order: -1; background-color: lightgreen;">B</li>  
      <li class="list" style= "order: 1; background-color: orange;">C</li>  
      <li class="list" style= "order: 2; background-color: violet;">D</li>  
      <li class="list" style= "order: 0; background-color: blue;">E</li>  
    </ul>  
  </body>  
</html>

CSS Zoom

This property scales the content. It controls the magnification level of the content. Instead of this property, we can use the transform: scale(); property.

This CSS property is not recommended because all browsers do not support it. It is an optional feature that should not be used on production sites. It was first implemented in the Internet Explorer browser. 

Values

Normal: It displays the element in its normal size.  It specifies the element's standard size. It contains normal content that does not zoom out or zoom in. It has the zoom: 1 value.

Number: The zoom factor represents the number, which is a positive float value. Zooming out (or reducing the size) is represented by a value less than 1.0, and zooming in (increasing the size) is represented by a value greater than 1.0. If we set the zoom factor to 1.5, the content will be 1.5 times larger.

Percentage: It defines a value in percentage terms. It is normal when its value is 100%. The percentage value is used to scale the content. Zoom in and out are represented by values greater than or less than 100%, respectively. If we set the zoom parameter to 175%, the content will be 175% larger than it was originally.

Below are some examples that illustrate this property.

Example 1

<!DOCTYPE html>    
<html>        
<head>    
    <title>    
        CSS zoom   
    </title>    
    
    <style>    
        h1 {    
            color: green;           
        }    
        h2{  
        color: violet;  
        }  
        .magnify1{   
            zoom: 0.75;   
        }   
        .magnify{   
            zoom: 1.5;   
        }   
          
    </style>    
</head>    
    
<body>    
    <center>             
        <h1>CSS zoom property example</h1>              
        <div>    
        <h2>original image</h2>  
            <img class="original" src= "rose.png">    
        <h2>Magnified image zoom: 0.75;</h2>  
            <img class="magnify1" src= "rose.png">               
        <h2>Magnified image zoom: 1.5;</h2>  
            <img class="magnify" src= "rose.png">    
        </div>    
    </center>    
<body>    
    
</html>

Example 2

<!DOCTYPE html>    
<html>    
    
<head>    
    <title>    
        CSS zoom   
    </title>    
    
    <style>    
        h1 {    
            color: green;           
        }    
.magnify{  
  width: 100px;  
  height: 100px;  
  border-radius: 30px;  
  display: inline-block;  
  color: white;  
}  
#m1 {  
  background-color: violet;  
  zoom: normal;  
}  
#m2 {  
  background-color: orange;  
  zoom: 200%;  
  color: black;  
}  
#m3 {  
  background-color: pink;  
  zoom: 2.9;  
}         
p{  
padding-top:20px;  
}  
    </style>    
</head>    
    
<body>    
    <center>             
        <h1>CSS zoom property example</h1>              
<div id="m1" class="magnify"><p>normal zoom;<p></div>  
<div id="m2" class="magnify"><p>200% zoom;<p></div>  
<div id="m3" class="magnify"><p>2.9 zoom;<p></div>      
</center>    
<body>    
    
</html>