1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS3 Resize Property

Discussion in 'Gimp Tips & Tutorials' started by mikethedj4, May 3, 2011.

  1. mikethedj4

    mikethedj4 Member

    Joined:
    Nov 13, 2010
    Messages:
    594
    Likes Received:
    1
    Trophy Points:
    16
    Gender:
    Male
    Occupation:
    Web UI/UX Designer, Enginner, and Personal Trainer
    Location:
    Rockford, IL
    Home Page:
    Click here to view the demo.

    [youtube]jEMMgFXugNU[/youtube]

    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!
     

    Attached Files:

Share This Page