CSS 3:

1. How to add rounded corners to a div/image?

2. How to add Glowing effect to boxes?
3. How to make an element Exclusion element?
4. What is HTML Template?
5. CSS Regions – How to create a data source?
6. How to define CSS 3 regions to display content?
7. How to define Multi Column Layout?
8. How to declare FlexBox Layout?
9. How to declare Grid Layout?
10. Device Adaptation
11. Transform
12. Animation shorthand
13. Gradient
14. Transition
15. Text Shadow

Answers:

1. Border-Radius property: Border-Radius UL UR LR LL

2. Set first 2 offsets to 0 in the Box-Shadow property. (Box-Shadow hoff Voff BD SD Inset)
3. Ms-Wrap-Flow property
4. HTML templates are documents that are mostly empty of original content, but are instead composed
primarily of empty containers that are sized and positioned to give incoming content a specific layout.
5. Ms-flow-Into Property set to the iframe’s identifier.
6. MS-Flow-From property
7. Column Width auto 12em (ColumnCount ColumnWidth)
8. Display: -ms-flexbox; (Properties: -ms-flex-direction, -ms-flex-align, -ms-flex-pack,-ms-flex-wrap, -ms-flex,
-ms-flex-order)
9. Display: ms-grid (OR ms-inline-grid)
10. @media screen and (orientation: landscape) {
@-ms-viewport {
Width: 1024px;
Height: 768px;
}
/* CSS for landscape layout goes here */
}
11. Transform: totate3d()
12. Animation (animation-name animation-duration animation-timing-function animation-delay animation-
iteration-count animation-direction)
div {
animation-name: myAnimation;
animation-duration: 3s;
animation-timing-function: ease-out;
animation-delay: -1s;
animation-iteration-count: 2;
animation-direction: normal;
 }

Is same as

div {
animation: myAnimation 3s ease-out -1s 2 normal;
}

13. Linear-gradient ([ [<angle> | to <side-or-corner> ] , ] ? <color-stop> [ , <color-stop> ] +)

Linear-gradient (to bottom left, #FFF133 0%, #16D611 50%, #00A3EF 80%)
radial-gradient([ [ <shape> || <size> ] [ at <position> ] ? , | at <position> , ] ? <color-stop
Repeating-linear-gradient ([[<angle> | to <side-or-corner>],]? <color-stop> [ , <color-stop> ] +)
14. transition: transition-property transition-duration transition-timing-function transition-delay
15. text-shadow: HorizontalOffset VerticalOffset BlurDistance SpreadDistance color
16.