Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Making any element resizeable

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 185
    Comment on it

    For making an element resizeable vertically, horizontally or both we use the CSS3 attribute resize. The resizeability in a textarea can be be disabled using the same.

    Property and value:-

    resize: vertical;
    resize: horizontal;
    resize: both;
    resize: none;
    

    Here is the Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
    #resize{
      width: 500px; 
      position: relative;
    }
    #resize .img {  
      height: 200px;
      max-width: 500px; 
      position: absolute;
      background-image: url('https://unsplash.imgix.net/photo-1430760814266-9c81759e5e55?fit=crop&fm=jpg&q=75&w=950');
      background-size: 500px 200px;
    }
    
    #resize .img:first-child{
      width: 500px;
    }
    
    #resize .img:not(:first-child){
      resize: horizontal;
      overflow:hidden;
    }
    
    #resize .img:nth-child(2){
      width: 60px;
      min-width: 60px;
      filter:grayscale(100%);
      -webkit-filter:grayscale(100%);
    }
    
    #resize .img:nth-child(3){
      width: 40px;
      min-width: 40px;
      filter:hue-rotate(90deg);
      -webkit-filter:hue-rotate(90deg);
    }
    
    #resize .img:nth-child(4){
      width: 20px;
      min-width: 20px;
      filter:invert(70%);
      -webkit-filter:invert(70%);
    }
    
    #browser-support {
      position: relative;
      top: 210px;
      background: ivory;
      border-left: 6px skyblue solid;
      font-family: courier new;
      font-size: 14px;
      margin: 12px 0;
      padding: 6px;
    }
        </style>    
    </head>
    <body>
    
    
    <div id="resize">
      <h4>Try to resizing the images from left bottom</h4>
      <div style="position:relative;">
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
        <div class="img"></div>
      </div>
    </div>
    
    </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: