Web Design All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon

You can do literally hundreds of tricks on your website with CSS3. Among the key tricks are resizing elements of your webpage and creating gradients for your background.

How to resize elements with CSS3

You’ve no doubt heard of resizing a browser window. With CSS3, you can now give visitors the ability to resize any

tag or form textarea element by using the resize property. The resize value can be set to none, both, horizontal or vertical, and it is typically paired with the overflow property set to auto.

In the following example, a 300px wide container can be resized both horizontally and vertically, and any overflow content automatically reflows to fit the container’s changing dimensions, adding scrollbars when applicable:

div {
  width:300px;
  resize:both;
  overflow:auto;
}

How to create gradients with CSS3

In the past, when designers wanted a gradient background for an element, they’d create a graphic and then repeat it along the X- or Y-axis to fill the space. Using CSS3, you can create your own faster-loading gradients.

Believe it or not, you can create the gradient effect using the background-image property paired with values for the gradient type, position, color stop, and color value. Though the syntax for the CSS is slightly different for webKit than Mozilla, the results are identical:

.gradient {
  /* Safari & Chrome */
  background-image:
  -webkit-gradient(linear,left bottom,left top,color-stop(0, #74B4DB),color-stop(1, #F7ECCA));
  /* Firefox */
  background-image:
  -moz-linear-gradient(center bottom, #74B4DB 0pt, #F7ECCA 100%);
  height: 200px;
}

In addition to the technique shown here, you can also create more complex gradient effects by using the free online gradient editor on the ColorZilla website.

image0.jpg

To find out even more about these ten techniques and working with CSS3 in general, visit CSS3.info and W3C.

About This Article

This article is from the book:

About the book author:

Sue Jenkins is a working designer as well as a design trainer and author. Her design firm, Luckychair, provides design services for web, logo, and print. Sue has also created a series of training DVDs on popular Adobe design tools including Photoshop, Dreamweaver, and Illustrator.

This article can be found in the category: