What Is Mean By User Interface in CSS

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

User Interface (UI) defines the way humans interact with the information systems,Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

CSS User Interface

1.Css Resize in User interface

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 2px solid;
            padding: 20px;
            width: 300px;
            resize: vertical;
            overflow: auto;
        }
    </style>
</head>
<body>

<h1>The resize Property</h1>

<div>
    <p>Let the user resize only the height of this div element.</p>
    <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>
1.Css Resize in User interface
<!DOCTYPE html>
<html>
<head>
    <style>
        div.ex1 {
            margin: 20px;
            border: 1px solid black;
            outline: 4px solid red;
            outline-offset: 15px;
        }

        div.ex2 {
            margin: 10px;
            border: 1px solid black;
            outline: 5px dashed blue;
            outline-offset: 5px;
        }
    </style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>

Related Post