Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Making any element resizeable

    @sunil.chatterji
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 305
    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>
    css3 resize resize element
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: