test blog

Sample Post

<img alt="Resize using CSS3" class="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3cZRGs9wDcHg805PpQECF0rYagikLuh8B-VKCGfmV-rkks3oDokRIEDlB1mLe6sny-UOSuSHrx_4sPHpjrNk9URoBVIozBc4x21Y2e4ijUFpSZbu6xDJqNXOBtg2rjKdFrhd1NQwLKo/s1600/css3.6.png" />
<h3 class="header6" style="margin-top: 11px; padding: 10px;">
Resize DIV window using CSS3</h3>
<div class="para">
<div style="text-align: justfy;">
&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
        </div>
</div>
  
    <br />
<div class="blog-side-text-block widget-filled widget-yellow" style="margin-top: 13px;">
<strong>
Note:</strong>
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<br />
IF u Like this trick Please Comment below and  Subscribe my YouTube channel.</div>
      
         <br />
<blockquote class="colored" style="margin-top: 11px; text-align: justfy;">
<div style="text-align: justfy;">
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".
</div>
</blockquote>
  
    <br />
<div class="dbdashborder" style="margin-top: 11px; text-align: justfy;">
<div class="header3">
For Demo Click on demo Button </div>
<div class="bb_orange" style="align: center; color: white;">
<a href="http://jsfiddle.net/01courseguide/jgZvK/" style="align: center; color: white;" target="_blank">DEMO-Click here</a></div>
<h3 class="redh3" style="margin-top: 12px;">
<i class="icon-th-list"></i>
       Syntax of CSS3 Resize
        </h3>
<pre><code>   
   
   <div class="resize">
</div>
.
   .   
  <textarea class="resize" cols="30" rows="7"></textarea>

</code></pre>
<pre><code> /*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%;
}
</code></pre>

<pre class="numbered"><code><!DOCTYPE html>
<title>Title</title>

<body>
  <p checked class="title" id='title'>Title</p>
  
</body></code></pre>

<pre class="numbered"><code>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;
  }
}</code></pre>

Sample Post

Resize DIV window using CSS3 &nbsp&nbsp&nbsp&nbsp Most browsers like Firefox, Safari and Chrome,opera have led web inno...

Demo post

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="single-post-w">
 
<br />
<h1 class="post-title" style="display: none;">
How to resize div using css3</h1>
  
<br />
<div class="post-info">
<span class="info-item">
        Tags:
            <a class="post-tag" href="https://www.blogger.com/blogger.g?blogID=7443662528279690299#" target="_blank">
            <span class="label label-info">CSS3</span>
            </a>
            <a class="post-tag" href="https://www.blogger.com/blogger.g?blogID=7443662528279690299#" target="_blank">
            <span class="label label-info">HTML</span>
            </a>
            <a class="post-tag" href="https://www.blogger.com/blogger.g?blogID=7443662528279690299#" target="_blank">
            <span class="label label-info">CSS trick</span>
            </a>
        </span>
        <span class="info-item">
        by
             <a href="https://www.facebook.com/pranav.patil.501" target="_blank">Pranav</a>
        </span>
        <span class="info-item">july 27th, 2013</span>
        <span class="info-item">
             <a href="https://www.facebook.com/CodeRapp3r" target="_blank">CodeRapp3r</a>
        </span>
   </div>
  
    <br />
<img alt="Resize using CSS3" class="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3cZRGs9wDcHg805PpQECF0rYagikLuh8B-VKCGfmV-rkks3oDokRIEDlB1mLe6sny-UOSuSHrx_4sPHpjrNk9URoBVIozBc4x21Y2e4ijUFpSZbu6xDJqNXOBtg2rjKdFrhd1NQwLKo/s1600/css3.6.png" />
    
  
    <br />
<h1 class="header6" style="margin-top: 11px; padding: 10px;">
Resize DIV window using CSS3</h1>

    <br />
<div class="para">
<div style="text-align: justfy;">
&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
        </div>
</div>
  
    <br />
<div class="blog-side-text-block widget-filled widget-yellow" style="margin-top: 13px;">
<h3>
Note:</h3>
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<br />
IF u Like this trick Please Comment below and  Subscribe my YouTube channel.</div>
      
         <br />
<blockquote class="colored" style="margin-top: 11px; text-align: justfy;">
<div style="text-align: justfy;">
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".
</div>
</blockquote>
  
    <br />
<div class="dbdashborder" style="margin-top: 11px; text-align: justfy;">
<div class="header3">
For Demo Click on demo Button </div>
<div class="bb_orange" style="align: center; color: white;">
<a href="http://jsfiddle.net/01courseguide/jgZvK/" style="align: center; color: white;" target="_blank">DEMO-Click here</a></div>

</div>
<h3 class="redh3" style="margin-top: 12px;">
<i class="icon-th-list"></i>
       Syntax of CSS3 Resize
        </h3>
<pre class="brush:xml;" name="code">   
   
   <div class="resize">
</div>

</pre>
<pre class="brush:css;" name="code"> /*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;
}
 </pre>
 
 <br />
<div style="clear: both; float: clear;">
</div>
<div id="ads">
<div class="ad1">
</div>
<div class="ad2">
</div>
</div>
</div>

</div>

Demo post

How to resize div using css3 Tags: CSS3 HTML ...

test blog

Sample Post

Demo post

Popular Posts

Blog Archive