Saturday, 24 November 2012

Resizing Web Page Elements With CSS3

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="http://2.bp.blogspot.com/-LFU-85rj1jo/UHgF7RJNEbI/AAAAAAAAPLg/dmyZ0i7L5GA/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.
 
Powered by Blogger.