Tasarım Özellikleri-2 CSS

Css tasarım kodları2, daha çok tasarımsal kodları bulabileceiğiniz kısa anlatımı ile yazılımıştır.Bu bölümde css animasyon efek kodları verilmiştir.

1-)Gradyan çift renk-->
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(red, blue); /* Standard syntax */

2-)Çevirme rotate

-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);

3-) Döndürme skew

  -ms-transform: skew(30deg,20deg); /* IE 9 */
  -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
  transform: skew(30deg,20deg);

4-) Yatay dönürme matrix

-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */
transform: matrix(0.866,0.5,-0.5,0.866,0,0);

5-) x,y yönünde çevirme rotateX,rotateY

-webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
transform: rotateX(120deg);

-webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
transform: rotateY(130deg);

6-)animasyon

div {

width: 100px;

height: 100px;

background: red;

position: relative;

-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */

animation: myfirst 5s;

}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

7-)Gazete yazısı gibi üçe bölmek

div {
    -webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 3px outset #ff00ff; /* Firefox */
    column-rule: 3px outset #ff00ff;
}

Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, Deneme, </div>

8-)Widht animasyon uzatma

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}

div:hover {
width: 300px;
}