css3 user interface

the css3 provides number of new user interface features such as resizing elements box sizing and outlining.

the following user interface properties:-

  • box-sizing
  • outline-offset
  • appearance

css3 user interface browser support

the box-sizing is supported in internet explorer, chrome, and opera.safari requires the perfix -webkit- and firefox requires the perfix -moz-.

the outline property is supported in all major browsers.


css3 box sizing

the  box-sizing css property is used to alter the default css box model used to calculate

widths and heights of elements.

the syntax:-

           box-sizing:   content-box   |  padding-box  |   border-box ;
        <style   type="text/css" >
        
  div.container {
  
  		      width:38em;
  		      
        	  border:1em solid black;        	  
        }
        
  div.split {
  
  		      box-sizing:border-box;
        	  width:50%;
        	  border:1em silver ridge;
        	  float:left;
        
        }</style>

css outline-offset property

the outline-offset property offset the outline and draw it beyond the border edge.

outline differ from borders in the following ways:-

  • outlines do not take up space.
  • outlines may be non-rectangular.

specify an outline 10px outside the border.

  <style   type="text/css" >
  
 div {
 
 	        width:200px;
 	        
    	    border:3px solid black;
    	    
        	height:200px;
        	
        	outline:2px solid pink;
        	
        	outline-offset:10px;
        	
        	background-color:#ee1eee;        	
  
  }</style>

resize property

the resize property allows the author to specify whether or not an element is resizable by the user

the syntax:

            resize:   none  |  both  |  horizontal  | vertical  | inherit
   <style   type="text/css" >
        div {
        
        width:600px;
        
        border:3px solid black;
        
        height:200px;
        
        resize:both;
        
        overflowauto;
        
        background-color:#ee1eee;
        
        }</style>

new user interface properties

propertydescriptioncss
appearancemake an element look like a standard user interface element.css3
box-sizing css3
outline-offsetoffset the outline and draw it beyond the border edge.css3
resizespecify whether or not an element is resizable by the user.css3
iconprovides the author the ability to style any arbitrary element with an iconic equivalent.css3
nav-indexspecifying the sequential navigation order(known as'tabbing order')css3
nav-downspecifying where to navigate when using the arrow-down navigation keycss3
nav-upspecifying where to navigate when using the arrow-up navigation keycss3
nav-leftspecifying where to navigate when using the arrow-left navigation key.css3
nav-rightspecifying where to navigate when using the arrow-right navigation key.css3