[CSS]アイデアが面白い！画像に美しいインタラクションを加えるスタイルシート
Post on:2013年10月18日
sponsors
風景写真など、普通の画像の上にグリッドを描き、各マス目をホバーした際に尾ヒレのようにフェードで追従させるエフェクトが美しいスタイルシートを紹介します。
便利になるとかそういった類いのものではありませんが、ちょっとした何かに使ってみたいですね。
JavaScript無しというのはポイント高いです。
デモのアニメーション
実際の動作は下記ページで確認できます。
デモはCSS3対応ブラウザでご覧ください、Chromeが一番美しくエフェクトを描画します。
実装はシンプルで、あえて難点をあげれば空divを数多く使うことでしょうか。
HTML
画像はbodyの背景で表示されているので、HTMLはグリッドを描くdivだけです。
<body> <div class="div"></div> <div class="div"></div> ... ... <div class="div"></div> <div class="div"></div> </body>
divは必要に応じて増やしてください。
CSS
グリッドのサイズやカラーはスタイルシートで設定します。
body {
background-image:url(http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_524010c76b52a_1.JPG);
background-size:cover;
margin:0;
}
.div {
width:2vw;
height:2vw;
transition:all 2s ease;
border-left:1px solid #CCFFFF;
border-top:1px solid #CCFFFF;
opacity:.3;
float: left;
}
.div:hover{
background-color:white;
transition:all 0s ease;
}
sponsors
