Summary of Atitti css3 new features attilax

Atitti css3 new features attilax summary

Picture glow effect 2

Transparent gradient effect 2

Text stroke 2

Background stretch 2

CSS3 Selector 4

@Font-face Feature 7

Word-wrap & Text-overflow Style 9

Word-wrap9

Text-overflow10

Text-decoration Stroke 12

CSS3 multi-column layout (multi -column layout) 13

border and color (color, border) 14

CSS3 gradient effect (Gradient) 15

linear gradient 15

radial gradient 16

CSS3 shadow (Shadow) and reflection (Reflect) Effect 19

CSS3 background effect21

CSS3 box model23

CSS3 Transitions, Transforms and Animation30

Transitions30

Transform31

Animation33

Picture glow effect

text-shadow:#000 3px 0 0,#000 0 3px 0,#000 -3px 0 0,#000 0 -3px 0;

You can set the lighting effect of each side, which is a bit more complicated. .

Transparent gradient effect

background: radial-gradient(circle, rgba(230,251,12,1.00) 40% , rgba(230,251,12,1.00) , rgba(230,251,12,0)) ; /* Standard syntax */

Text stroke

should be done using Text-decoration stroke. . Although the glow effect is acceptable, the single effect is not good

Background stretching

background-size:100% 100%;

Transitions, Transforms and Animation30 of CSS3

Transitions30

transition-property: used for Specify transition effect

Transform31

Animation33