CSS Miscellaneous

In this tutorial, we'll go through some useful CSS3 user interface properties like resize and outline-offset that you can use to improve your web pages.

Elements that are resized

The CSS3 resize property allows you to resize an element horizontally, vertically, or in both directions. This property, on the other hand, is usually used to disable the textarea> form control's default resizable conduct.

textarea {
  max-width: 100%;
  min-height: 100px;
  overflow: auto;
  border: 1px solid black;
}
#txt1 {
  resize: none;
}
#txt2 {
  resize: horizontal;
}
#txt3 {
  resize: both;
}

Output:

Choosing an Outline Offset

You learned how to set different properties for outlines, such as width, color, and styles, in the previous section. However, CSS3 adds a new property outline-offset to monitor the distance between an element's outline and its border edge. Since this property may take a negative value, you can use it to draw an outline within an element.

p, div {
  margin: 50px;
  height: 100px;
  background: #000;
  outline: 2px solid red;
}
p {
  outline-offset: 10px;
}
div {
  outline-offset: -15px;
}

Output: