Sample Post

Resize DIV window using CSS3

&nbsp&nbsp&nbsp&nbsp Most browsers like Firefox, Safari and Chrome,opera have led web innovation the past few years. Browser development team implementing new JavaScript APIs, providing more CSS capabilities than other browser .Resizing window is one of them. Let me show how to resize window and textarea using CSS3

Note: This Trick Work In most latest browser.But some of the old version of browser not support this CSS trick.Opera,IE,Android,IOS Not support this Feature
IF u Like this trick Please Comment below and Subscribe my YouTube channel.

it's possible to make a tiny triangle appear in the bottom right corner of an element. You may then drag it to resize. The code to follow is yet again very easy, and just requires one line and is supported by some older elements you might already know. These are "max-width", "max-height", "min-width" and "min-height".

For Demo Click on demo Button

DEMO-Click here

Syntax of CSS3 Resize

   <!--HTml Code-->
   
   <div class="resize">
</div>
.
   .   
  <textarea class="resize" cols="30" rows="7"></textarea>

 /*resize css code: none | both | horizontal | vertical | inherit */

.resize {
width: 100px;
height: 50px;
border: 1px solid #000;
overflow: auto;
 
/* Firefox */
-moz-resize: both;
/* WebKit */
-webkit-resize: both;
/* Google Chrome */
resize: both;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  body:first-of-type pre::after {
    content: 'highlight: ' attr(class);
  }
}

@import url('print.css');
@page:right {
 margin: 1cm 2cm 1.3cm 4cm;
}

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

div.text,
#content,
li[lang=ru] {
  font: Tahoma, Chunkfive, sans-serif;
  background: url('hatch.png') /* wtf? */;  color: #F0F0F0 !important;
  width: 100%;
}

<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>

function $initHighlight(block, flags) {
  try {
    if (block.className.search(/\bno\-highlight\b/) != -1)
      return processBlock(block, true, 0x0F) + ' class=""';
  } catch (e) {
    /* handle exception */

    var e4x =
        <div>Example
            <p>1234</p></div>;
  }
  for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
    if (checkCondition(classes[i]) === undefined)
      return /\d+/g;
  }
}