Post Reply 

CSS3 Resize Property

May 3, 2011, 21:01
Post: #1
CSS3 Resize Property
Click here to view the demo.

Click here to watch the video tutorial.

Before we begin lets just get the code to startout with. The CSS below adds a background color, a div with the class box1, and gives that div a width, and height of 100px as well as a light gray color for it's background. As for the HTML it just marks everything up (hense the HyperText Markup Language)

Beginning The CSS:
Code:
body {
    background:#3d3d3d;}
    
div.box1 {
    width:100px;
    height:100px;
    background:#5a5a5a;}

The HTML:
Code:
<html>
<head>
<title>CSS3 Resize Property</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="box1">
    <p>Tortor dis et a ut facilisis, nascetur pulvinar urna, penatibus aliquet quis. Enim, lorem turpis nisi. Dictumst sed porta etiam? Est etiam urna augue, elit ac odio! Augue, auctor porttitor tempor sit adipiscing? Integer arcu mid. Lundium cursus a integer, urna in? A sed cras et! Mid mauris? Platea lectus et eu lacus turpis, tincidunt et scelerisque sagittis aliquam nisi! Aenean rhoncus pid, tincidunt ac amet vel cursus et pellentesque! Natoque ultrices lundium cras elit, sit dignissim! Lacus, porttitor, et pulvinar a. Phasellus nascetur lundium et odio turpis placerat ridiculus rhoncus. Augue? Nisi et tempor! Aenean urna ultrices. Pulvinar parturient urna ridiculus tempor ut, sagittis augue mauris scelerisque, lectus placerat et a? Urna mid, risus hac dapibus elit! Sed odio.</p>

    <p>In cursus arcu cursus. Adipiscing. Dolor turpis ac ac velit dapibus. Elementum turpis turpis mauris? Platea sed dis? Est odio eros? Aenean magna. Lacus enim? Habitasse risus magnis rhoncus tincidunt turpis, pulvinar sit. Nunc mattis. Amet ac, facilisis pellentesque! Augue amet? Porttitor scelerisque duis amet, rhoncus penatibus! Rhoncus lorem tincidunt, ultricies elementum ac turpis, platea risus turpis enim scelerisque, egestas elementum habitasse nec nunc nunc, etiam egestas integer? Hac scelerisque nec. Adipiscing nunc. Eros facilisis integer porta porta phasellus mauris aliquet amet est risus pulvinar penatibus magna aliquam! Ultrices? Nascetur augue eros augue placerat lundium nisi ac. Dolor, nisi! Enim magna ut integer. Aenean facilisis urna tempor lectus aliquet, ut porta! Vel est, tempor auctor nunc! Sagittis! Urna velit.</p>
    </div>
</body>
</html>

All we need to do is add an overflow property into out css, and the overflow property you can choose auto, or hidden. Hidden will state for it to just be cut off (like in the download) and auto will give it a scrollbar. (overflow:auto;)

After you add the overflow property you'll need to add the resize property in your css, and resize has the options horizontal, vertical, and both. Which are all pretty much self explanatory.

A textarea has resize by default, and if you add resize:none; into textarea via css it'll then remove the option for it to be resized.

Our New CSS:
Code:
body {
    background:#3d3d3d;}
    
div.box1 {
    width:100px;
    height:100px;
    background:#5a5a5a;
    overflow:hidden;
    resize:both;}

Easy, and Simple!

[Image: gimppimp_forum_sig_by_mikethedj4-d39msp7.png]
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  CSS3 Fullscreen Background Image mikethedj4 4 3,814 May 18, 2011 02:53
Last Post: mikethedj4
  CSS3 The Transform Property mikethedj4 0 625 May 2, 2011 21:55
Last Post: mikethedj4
  CSS3 Sliding Transitions mikethedj4 0 503 May 2, 2011 21:53
Last Post: mikethedj4

Forum Jump:


GIMP ForumPortalArchiveContactTermsRSS