CSS TOOL

1. Gradient 2. Animations 3. Transition 4. Transform 5. background-clip 6. CSS Selectors 7. font-face 8. @media

1. Gradient

Style: Linear Radial
Gradient:
Work with F12 Console
Angle: deg
Shape: ellipse(Default) circle
Repeating: Gradient Repeating

2. AnimationsWarning

animation-duration:
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
animation-delay:
animation-iteration-count: infinite | Number:
animation-direction: normal alternate
animation-play-state: pausedrunning
animation-fill-mode: none forwards (Last keyframe) backwards (First Keyframe) both (specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).

3. Transition

:hover,:focus,:active,:checked or JavaScript trigger

CSS transitions allows you to change property values smoothly, over a given duration.

transition-duration
transition-timing-function linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
transition-delay

4. Transform

translate(px,px)
scale(,)
rotateX({{ transform_rX }}deg)
rotateY({{ transform_rY }}deg)
rotateZ({{ transform_rZ }}deg)
skew(deg,deg)
transform-origin: center center(Default) 0 0 right bottom
backface-visibility: visible(Default) hidden

5. background-clip

border-box padding-box content-box initial
蝙蝠侠(Batman)是DC漫画公司旗下的超级英雄,1939年5月于《侦探漫画》第27期首次登场,是漫画史上第一位没有超能力的超级英雄。他本名布鲁斯·韦恩(Bruce Wayne),是高谭市首富韦恩家族的独子。布鲁斯在儿时亲眼目睹父母被犯罪分子杀害,他发誓要扫除罪恶,不让别的孩子也遭受这样的命运。为此他遍访名师,掌握了各种侦探知识和战斗技巧,并依靠韦恩集团制造了大量高科技装备,开始了他的圣战。白天,他是别人眼中的无脑富二代、花花公子;夜晚,他是令罪犯闻风丧胆的黑暗骑士——蝙蝠侠。

6. CSS Selectors

SelectorsType
\*Universal selector
elementnameType selector
#idnameID selector
.classnameClass selector
[attr] [attr=value]Attribute selector
A B, A > B, A + B, A ~ BCombinators selectors
selector1, selectorNGrouping selectors
::Pseudo

Universal selector:

element = baseElement.querySelector(selectors)

7. font-face

  • font2web - Generate Webfont
  • transfonter - Generate Webfont
  • Font Editor FontCreator
  • Icons
  • Font Awesome Icons
  • 8. @media

    media screen:

    3 ways to create print style

    Continue...