CSS Snippets

CSS Snippets

一月 15, 2018

A collection of CSS snippets(use autoprefixer to add vendor)

gradient for ie8+

1
2
3
4
5
6
7
8
.gradient {
  filter: alpha(opacity=100 finishopacity=20 style=1 startx=0, starty=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#BAD1FB, endcolorstr=#E2E9EE, gradientType=0);
  -ms-filter: alpha(opacity=100 finishopacity=100 style=1 startx=0, starty=0, finishx=0, finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#BAD1FB, endcolorstr=E2E9EE, gradientType=0);
  background-color: #BAD1FB; /* backforward for old browsers */
  background: -moz-linear-gradient(top, #BAD1FB, #E2E9EE);
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#BAD1FB), to(#E2E9EE));
  background: linear-gradient(to bottom, #BAD1FB, #E2E9EE); /* autoprefixer will transform it */
}

shaking effect (update 2018/1/17)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* .face element could be a button or anything else even svg */
.face:hover {
  animation: shake 0.82s cubi-bezier(.36,.07,.19,.97) both;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  perspective:1000px;
}

@keyframes shake {
  10%, 90% {
    transform:translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform:translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform:translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform:translate3d(4px, 0, 0);
  }
}

Reference: css-tricks