Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Just a simple trick I wanted to show you guys. You can resize web elements with the CSS3 property resize: both. For images make sure it has width and height set to 100%.
Here is an example for you. First let's start with basic markup:
<div class="post">
BWidgets: Visit BWidgets.com for more!
<br><br>
Try resizing me or my media friend below.
</div>
<div class="post photo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdnaYZS3oYX3BuVH5nd3Q80LXSvfIrIMfrA9K1dQfncaF2gnguilf-8MXMoMFWLHTiCSSf6xR_aA-Yy6YGQW7v9tUbIPd5SO587NJpCzzEIETVTBqmGBAY5ByJIWkKtfVXiV72gLdTttU/s1600/Google+++Style+Subscription+Box+Widget+For+Blogger.jpg">
</div>
Now we'll put our CSS code in it:
body {
width: 240px;
height: 200px;
margin: 0px auto;
padding: 40px 0 0;
background-color: #fff;
font-family: Verdana, sans-serif;
font-size: 11px;
}
.post {
margin: 0px 0px 40px;
padding: 15px;
position: relative;
background-color: #fff;
-webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
overflow: hidden;
resize: both;
}
.photo img {
width: 100%; height: 100%;
}
Now see it in action... :)
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
