This chapter delves into fascinating CSS3 properties related to user interfaces, such as resize and outline-offset, offering ways to elevate the quality of your web pages.
You can enable horizontal, vertical, or bidirectional resizing of elements using the CSS3 resize property. However, it's commonly employed to disable the default resizable behavior of the <textarea> form control.
p, div, textarea {
width: 300px;
min-height: 100px;
overflow: auto;
border: 1px solid black;
}
p {
resize: horizontal;
}
div {
resize: both;
}
textarea {
resize: none;
}In the preceding section, you discovered how to define various properties for outlines such as width, color, and styles. CSS3 provides an additional property, outline-offset, which determines the distance between an outline and the border edge of an element. This property can accept negative values, allowing you to position the outline inside an element.
p, div {
margin: 50px;
height: 100px;
background: #000;
outline: 2px solid red;
}
p {
outline-offset: 10px;
}
div {
outline-offset: -15px;
}