CSS3 User Interface
CSS3 has introduced mainly Two types of user interface that has been described as follows:

1. resize : The resize is a such property of User Interface, by which you can resize your div layout on your browser. Three features of resize you can use 

i.   resize:both 
ii.  resize:vertical 
iii. resize:horizontal.


2. outline-offset : The outline-offset is such property of the CSS3 User Interface, which can be used to define the space between the element's border and its outline.
Resize Example :
<html>
   <head>
   <title>User Interface Resize</title>
 
      <style type="text/css">
         .user_resize{
            border: 2px solid #0099da;
            padding: 20px; 
            width: 300px;
            resize: both;
            overflow: auto;
         }
      </style>
 
   </head>
   <body>
 
      <div class="user_resize">www.freetimelearning.com</div>
 
   </body>
</html>
Output :
www.freetimelearning.com
Outline offset Example :
<html>
   <head>
   <title>User Interface Outline offset</title>

      <style type="text/css">
         .out_line_offset{
            margin: 25px;
            padding: 10px;
            width: 300px; 
            height: 100px;
            border: 5px solid #0099da;
            outline: 5px solid #F60;
            outline-offset: 15px;
         }
      </style>

   </head>
   <body>

      <div class="out_line_offset">www.freetimelearning.com</div>

   </body>
</html>
Output :
www.freetimelearning.com

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.