How to Resize Elements and Create Gradients with CSS3

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.

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