「5分でわかるCSS3のグラフィックス機能」サンプル

単純なテキストシャドウ

text-shadow: 2px 2px 4px #444;

複数のテキストシャドウ

text-shadow:
     0     0    4px #fff,
     1px  -5px  4px #ff3,
     2px -10px  6px #fd3,
    -2px -15px 11px #f80,
     2px -25px 18px #f20;

単純なボックスシャドウ

background-color: #fff4e0;
border-radius: 8px;
box-shadow: 4px 4px 4px 2px #ccc;

insetを指定したボックスシャドウ

background-color: #fff4e0;
border-radius: 8px;
box-shadow: inset 4px 4px 4px 2px #ccc;

insetと通常の影を併用

background-color: #fff4e0;
border-radius: 8px;
box-shadow:
    4px 4px 4px 2px #ccc,
    inset 2px 4px 4px 2px #ffe;

多数の影を組み合わせる

background-color: #fff4e0;
border-radius: 8px;
border: 1px solid #876;
box-shadow: inset 4px 6px 20px #fff,
            inset -4px -4px 10px #ccbba0,
            inset 0 -45px #fec,
            0 0 4px #876,
            4px 4px 6px 2px #ccc;

単純な垂直グラデーション

background: linear-gradient(#feb, #fb0);

角度を指定したグラデーション

background: linear-gradient(
  -45deg, #feb, #fb0);

複数の経過色を指定する

background: linear-gradient(
  #feb, #fc4 50%, #fb0 51%, #fd9);

円形グラデーション

background: radial-gradient(
  center, circle farthest-side, #feb, #fb0);

グラデーションの繰り返し

background: repeating-linear-gradient(
  -45deg, #feb, #fb0 20px, #feb 40px);

ボーダーのグラデーション

border-image: linear-gradient(
  #feb, #fb0 100px) 20/20px stretch;

背景画像との組み合わせ

background:
  radial-gradient(
    center, circle closest-side,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 90%, white),
  url(sample/image01.jpg);

複数グラデーションの組み合わせ

background:
  repeating-linear-gradient(
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  repeating-linear-gradient(
    0deg, rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  #44c;

背景画像のトランジション

.transition1 {
  background: #c44;
  transition: background-color 1s;
}
.transition1:hover {
  background: #44c;
}

複数属性のトランジション

.transition2 {
  background: #c44;
  width: 100px;
  transition:
    background-color 1s, width 1s;
}
.transition2:hover {
  background: #44c;
  width: 200px;
}

delayとcurve

.transition3 {
  background: #c44;
  width: 100px;
  transition:
    background-color 0.5s linear 0.5s,
    width 1s linear;
}
.transition3:hover {
  background: #44c;
  width: 200px;
}

JavaScriptとトランジション

<div style="background: #c44;
            width:100px; height:80px;
            transition: width 1s;"
     onclick="this.style.width='200px';">
</div>

単純なアニメーション

.animation1 {
  animation: anim1 4s infinite;
}

@keyframes anim1 {
0%, 100% { left:0px; }
50% { left:280px; }
}

キーフレームごとのtiming-function

.animation2 {
  animation: anim2 4s ease-in infinite;
}

@keyframes anim2 {
0%   { left:0px; }
50%  { left:280px;
       animation-timing-function:ease-out; }
100% { left:0px; }
}

マウスオーバーでアニメーション

.animation3 div {
  animation: anim3 4s infinite;
  animation-play-state: paused;
}

.animation3:hover div {
  animation-play-state: running;
}

@keyframes anim3 {
0%, 100% { left:0px; }
50% { left:280px; }
}

複数のアニメーション

.animation4 {
  animation:
    anim4-1 0.5s infinite ease-out alternate,
    anim4-2 4s infinite linear alternate;
}

@keyframes anim4-1 {
0% { top:50px; }
100% { top:0px; }
}

@keyframes anim4-2 {
0% { left:0px; }
100% { left:280px; }
}

平行移動

@keyframes tf1 {
0%, 100% { transform:translateX(0); }
50% { transform:translateX(280px); }
}

回転

@keyframes tf2 {
0%   { transform:rotate(0);
       animation-timing-function:linear; }
100% { transform:rotate(360deg); }
}

拡大縮小

@keyframes tf3 {
0%, 100% { transform:scale(2, 0.5); }
50% { transform:scale(0.5, 2); }
}

せん断変形

@keyframes tf4 {
0%, 100% { transform:skewX(-45deg); }
50% { transform:skewX(+45deg); }
}

transform-origin

.transform6 {
  animation: tf6 4s infinite;
  transform-origin: left top;
}

@keyframes tf6 {
0%   { transform:rotate(0);
       animation-timing-function:linear; }
100% { transform:rotate(360deg); }
}

複数の変換の組み合わせ

@keyframes tf5 {
0% {
  transform:translateX(0) rotate(0);
  animation-timing-function:linear;
}
50% {
  transform:translateX(260px) rotate(180deg);
  animation-timing-function:linear;
}
100% {
  transform:translateX(0) rotate(360deg);
}
}

平行投影による3次元変換

@keyframes tf9 {
0% {
  transform:rotateX(60deg) rotateZ(0);
  animation-timing-function:linear;
}
100% {
  transform:rotateX(60deg) rotateZ(360deg);
}
}

パースをかけた3次元変換

<style>
.transform10 {
  width:80px; height:80px;
  background:url(image.jpg);
  /* キーフレームは前のものを流用 */
  animation:tf9 4s infinite;
}
</style>
<div style="perspective:100px;">
  <div class="transform10"></div>
</div>

perspective-originの効果

backface-visibilityの効果