Box Model Properties:
=====================
1) outline:
===========
margin ==> separation between two html elements
border ==> visible
between margin and padding
padding ==> separation between content and border
==> to define the line on the top of the border, we can use "outline"
Note:
====
using "outline", we can define the line to the border in all four sides but not possible to define for only one side.
Syntax:
outline : outline-width outline-style outline color;
outline-offset:
================
==> used to define the separation between the outline and the border.
Syntax:
outline : pixels/%;
box-shadow:
===========
to define the shadow to the content of box in horizontal direction and in vertical direction with blur effect, we can use "box-shadow" property.
Syntax:
box-shadow : h-offset v-offset blur spread color
transition:
===========
to define any property on the content of box gradually, we can use "transition" property.
Syntax:
transition : property-name time-in-sec;
Note:
=====
The Transition Property, we can use for:
1) Number based properties
2) Color based properties
Transformations:
================
Zoom-in, Zoom-out
rotate
flip
transformation : scale(n)
transformation : rotate(deg)
transformation : translate(x, y)
transformation : skew(deg)
====================================
Outline Property
UI Development