Archive Category ‘css3‘

arrow coding

リストに矢印アイコンの実装する際に参考にさせていただきました。

http://www.pressmantech.com/tech/design/2738

手軽に動きのある表現ができるanimate.css

手軽に、豪快なアニメーション表現を施すことができます。
https://daneden.github.io/animate.css/

背景画像固定のcssの書き方

背景画像を固定させて、表現したいと参考になりそうなものを調べていたらわかりやすいものがあったので
忘れないように、メモ。


body {
background-image: url(images/background-photo.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #●●●●●●●●;
}

http://sixrevisions.com/css/responsive-background-image/

マウスオーバーの動きがいい感じ

ちょっとした工夫ですが、マウスオーバーの動きがとてもいい感じでした。

http://www.oricon.co.jp/

SVG Loader

http://tympanus.net/Tutorials/SVGLoaderGSAP/index.html

Blur Effect sample

MotionBlurEffect

SVG loader

codropsよりSVG loaderが紹介されていました。

http://tympanus.net/Tutorials/SVGLoaderGSAP/index.html

HTML5 & CSS3 Support状況を調べるのに便利なサイト

HTML5 & CSS3 Support状況を調べるのに便利なサイトです。

http://fmbip.com/litmus/

cubic-bezierがおもしろい

transitionのcubic-bezierが、いい動きをしてくれます。

CSS3 ジェネレーター

グラデーション

http://grad3.ecoloniq.jp/

角丸

http://css3generator.com/