初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS CSS3でグラデーションをかけてみる

以前作成した切り抜き画像を使ってCSS3でグラデーションのように
光らせてみます。bellsmarket.hatenablog.com


CSS3での「animation」はかなり重くなるのでスマートフォンだと
動かなくなる可能性もありますので気をつけましょう。
更に「animation」を使う際はベンダープレフィックスを使い、主要ブラウザーにしっかり対応させる事が大事です。

http://caniuse.com/などのサイトでブラウザがサポートされているかも
確認が必要となります。。

f:id:bellsmarket:20150510155913p:plain:w200f:id:bellsmarket:20150510155916p:plain:w200f:id:bellsmarket:20150510155919p:plain:w200

<body>
  <div id="box-shadow">
    <div id="box">
      <img src="img/cat.png" alt="">
    </div>
  </div>
</body>
</html>
body {
  background: #000;
}
#box-shadow {
  width: 640px;
  height: 640px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius:5px;
  animation: shining 3s infinite;
  -webkit-animation: shining 3s infinite;
}
@-webkit-keyframes shining {
	 /*白いドロップシャドウをかける事で光って見えるようになる*/
 0% {-webkit-box-shadow: 0 0 5px #FFFFFF;}
 50% {-webkit-box-shadow: 0 0 15px #FFFFFF;}
 100% {-webkit-box-shadow: 0 0 5px #FFFFFF;}
}
@keyframes shining {
	 /*白いドロップシャドウをかける事で光って見えるようになる*/
 0% {box-shadow: 0 0 3px #FFFFFF;}
 50% {box-shadow: 0 0 10px #FFFFFF;}
 100% {box-shadow: 0 0 3px #FFFFFF;}
}
#box {
  width: 640px;
  height: 640px;
  /*上下左右自動で真ん中に*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
 /*角丸に表示する*/ 
  border-radius:5px;
/*アニメーション*/
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
 }
@-webkit-keyframes bg-color {
  0% { background-color: #FFF; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #FFF; }
}
@keyframes bg-color {
  0% { background-color: #FFF; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #FFF; }
}
img {
	width:640px;
	height:640px;
}

かなり派手に値を入力しているのでユーザーと作り手の温度差も考えて適応しましょう。

topへ戻る