Labels

CSS - Cheat Sheet (Part-II)

  • Text shadow

    • h1 {
        text-shadow: 2px 2px;
      }

  • Font-face
    • @font-face {
        font-family: myFirstFont;
        src: url(/css/font/SansationLight.woff);
      }
      div {
        font-family: myFirstFont;
      }

  • 2D transforms

    • div {
        width: 300px;
        height: 100px;
        background-color: pink;
        border: 1px solid black;
      }

      rotate div#myDiv {
        /* IE 9 */
        -ms-transform: rotate(20deg);

        /* Safari */
        -webkit-transform: rotate(20deg);

        /* Standard syntax */
        transform: rotate(20deg);
      }

      skewX div#skewDiv {
        /* IE 9 */
        -ms-transform: skewX(20deg);

        /* Safari */
        -webkit-transform: skewX(20deg);

        /* Standard syntax */
        transform: skewX(20deg);
      }

      matrix div#myDiv1 {
        /* IE 9 */
        -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);

        /* Safari */
        -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);

        /* Standard syntax */
        transform: matrix(1, -0.3, 0, 1, 0, 0);
      }
  • 3D Transform

    • div {
        width: 200px;
        height: 100px;
        background-color: pink;
        border: 1px solid black;
      }

      rorateX,
      rotateY,
      rorateZ div#myDiv {
        -webkit-transform: rotateX(150deg);

        /* Safari */
        transform: rotateX(150deg);

        /* Standard syntax */
      }

  • Animation
    • @keyframes Keyframes will control the intermediate animation steps in CSS3

      • h1 {
          -moz-animation-duration: 3s;
          -webkit-animation-duration: 3s;
          -moz-animation-name: slidein;
          -webkit-animation-name: slidein;
        }

        @-webkit-keyframes slidein {
          from {
            margin-left: 100%;
            width: 300%;
          }
          to {
            margin-left: 0%;
            width: 100%;
          }
        }

        h1 {
          -moz-animation-duration: 3s;
          -webkit-animation-duration: 5s;
          -moz-animation-name: slidein;
          -webkit-animation-name: slidein;
        }
        @-webkit-keyframes slidein {
          from {
            margin-left: 100%;
            width: 300%;
          }
          75% {
            font-size: 500%;
            margin-left: 25%;
            width: 150%;
          }
          to {
            margin-left: 0%;
            width: 100%;
          }
        }

    • Multi-columns

      • .multi {
          /* Column count property */
          -webkit-column-count: 4;
          -moz-column-count: 4;
          column-count: 4;

          /* Column gap property */
          -webkit-column-gap: 40px;
          -moz-column-gap: 40px;
          column-gap: 40px;

          /* Column style property */
          -webkit-column-rule-style: solid;
          -moz-column-rule-style: solid;
          column-rule-style: solid;
        }

    • Resize
      • div {
          border: 2px solid;
          padding: 20px;
          width: 300px;
          resize: vertical; //horizontal, both
          overflow: auto; //needed too
        }



Labels:

Comments

Post a Comment

Popular Posts