User Interface (UI) defines the way humans interact with information systems. In simple terms, the user interface consists of pages, screens, buttons, forms, and other visual elements that allow users to interact with a device. Every app and website has a user interface.
In CSS, the user interface properties allow us to change elements into standard UI components. In this article, we will discuss two important user interface properties:
1. resize Property
The resize property allows the user to resize an element (usually a box). However, this property does not apply to inline elements or block elements with visible overflow. For the resize property to work, the overflow property must be set to "scroll", "auto", or "hidden".
Syntax:
resize: horizontal | vertical | both;
Values:
- horizontal: Allows the user to resize the width of the element.
- vertical: Allows the user to resize the height of the element.
- both: Allows the user to resize both the height and width of the element.
Example 1: Resizing Horizontally
HTML
<!DOCTYPE html>
<html>
<head>
<title>user interface Property</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body style="text-align: center;">
<div style="background: green;">
<h1 style="color: white;">GeeksforGeeks</h1>
<p style="color: white;"> resize: horizontal;</p>
</div>
</body>
</html>
Output:
Example 2: Resizing Vertically
HTML
<!DOCTYPE html>
<html>
<head>
<title>user interface Property</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body style = "text-align: center;">
<div style = "background: green;">
<h1 style = "color: white;">GeeksforGeeks</h1>
<p style = "color: white;"> resize: vertical;</p>
</div>
</body>
</html>
Output:
Example 3:
Resizing Both Horizontally and Vertically
html
<!DOCTYPE html>
<html>
<head>
<title>user interface Property</title>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body style = "text-align: center;">
<div style = "background: green;">
<h1 style = "color: white;">GeeksforGeeks</h1>
<p style = "color: white;"> resize: both;</p>
</div>
</body>
</html>
Output:
2. outline-offset Property
The outline-offset property in CSS specifies the distance between an element's outline and its border or edge. The space between the element and the outline is transparent.
Syntax:
outline-offset: length;
Note: length is the value that defines the space between the element and its outline.
Example:
html
<!DOCTYPE html>
<html>
<head>
<title>user interface property</title>
<style>
div.ex1 {
margin: auto;
padding: 8px;
color: white;
width: 600px;
border: 1px solid black;
background-color: green;
outline: 4px solid red;
outline-offset: 15px;
}
</style>
</head>
<body style = "text-align: center;">
<h1 style = "color: green;">GeeksforGeeks</h1>
<br>
<div class="ex1">A computer science portal for geeks.</div>
</body>
</html>
Output:
Supported Browsers:
The browser supported by outline-offset property are listed below:
- Apple Safari 3.1
- Google Chrome 4.0
- Firefox 3.5
- Opera 10.5
- Internet Explorer 15.0
Similar Reads
CSS Counters CSS counters allow you to number elements like lists or sections automatically. They are "variables" maintained by CSS, and their values can be incremented with CSS rules, tracking how many times they are used. To work with CSS counters, we use a set of properties:counter-reset: Creates or resets a
3 min read
CSS Fonts CSS fonts control how text appears on a webpage. With CSS, you can specify various properties like font family, size, weight, style, and line height to create visually appealing and readable typographyKey Properties of CSS FontsTo customize fonts effectively in web design, it’s crucial to understand
4 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Multiple Columns CSS Multiple Columns is a property used to divide content into multiple columns, similar to a newspaper layout. It improves readability and organizes content efficiently across different screen sizes.Key Properties of CSS Multiple ColumnsBelow is a list of essential CSS properties for working with m
5 min read
CSS Attribute Selector CSS attribute Selector allows you to select elements based on the presence, value, or specific characteristics of their attributes. They are particularly useful for dynamic or structured content where attributes play a key role, such as in forms or data tables.Types of CSS Attribute Selectors1. [att
5 min read
CSS Units CSS units define the size of elements, with absolute units (like px, cm) having fixed values and relative units (like em, rem, %, vh) depending on factors like the viewport or parent elements. There are two types of units: Absolute and Relative.Absolute unitsAbsolute units in CSS, such as px, cm, an
9 min read
CSS Pseudo Elements A pseudo-element is a keyword added to a selector that lets you style specific parts of an element. For example, you can style the first line of a paragraph, add content before or after an element, or create complex effects with minimal code. Pseudo-elements are denoted by a double colon (::) (or :
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Layout - Horizontal & Vertical Align The Layout in CSS is used to control the flow of element inside another element. It sets the position of element in the web page. The position of element can be set by using horizontal and vertical alignment. There are many ways to set the position of element which are listed below: Using Position P
4 min read
CSS Image Gallery Creating a responsive image gallery is a great way to showcase a collection of pictures on your website. In this article, we'll walk you through the steps to build a responsive image gallery using HTML and CSS. This guide will help you create a beautiful gallery that looks great on all devices.Step
4 min read