CSS3 User Inerface, TutorialsPoint, CSS3 User Inerface Tutorial

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

CSS3 Tutorial