[Web Design] Scrollanim – スクロール芸のJSライブラリ
スクロールイベントをきっかけに、何かしらの動きとともにコンテンツが出現する、いわゆるスクロール芸を行うJSライブラリ。配布ページ自体がデモページになっていて、スクロールすると色々動きます。ライブラリはCSS3とJSからできているようで、サイズが9kbと軽いのが特徴。導入も適用したい要素に属性を追加するだけのようなので、簡単に使えそうです。詳細とソースコードはGithubで公開されています。
Tag Archives: CSS
[CSS] Progress Button Styles – プログレスバーを兼ねたボタン作例
プログレスバーを兼ねたSubmitボタンの作例まとめ。クリックするとボタンの中、もしくは周辺でプログレスバーが展開されます。ファイルのアップロードとか、進捗の確認ができた方がいいボタン作る時なんかに良さそうです。
[CSS3] CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS! – CSSエフェクトまとめ
CSSを使った写真へのフィルター機能をBefore After形式でまとめた記事。作例はそれぞれCodepenを使って紹介されています。ブラーとかグレースケールあたりは、マウスオーバー芸と組み合わせるのも良さそうです。またアニメーションを併せて使った手法や、ボックス要素全体にフィルターをかける作例なんかも紹介されてます。CSSフィルターって結構いろんな事できるんですね。
CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!
[WebDesign] CSS Pixel Widths – デバイスごとの物理＆論理ピクセル一覧
iOSやAndroidデバイスの、ディスプレイ仕様を一覧で紹介したページ。それぞれのデバイスごとに、物理ピクセル、論理ピクセル、CSSピクセルレシオが一覧でまとめられています。レスポンシブレイアウトのサイト作る時、ブレイクポイント決める際に役に立ちそうです。
[Web Design] You Don’t Need JavaScript – JS書かなくても色々できるYO！
Javascriptなしでも、HTMLとCSSだけで結構いろんな事ができるYO！という作例がGithubでまとめられてます。アコーディオンやカルーセル、マウスオーバーアクション、メニュー、タブなどにカテゴリ分けされて紹介されていて、各項目からはデモページへのリンクが用意されています。リンク先の多くはCodepenで、JSの項目が空なのが確認できます。JS書かずにサクっと導入できるのがイイですねこれ。特にDivのShow / Hideを切り替えるタブとか使いやすそう。
[CSS] 4 Really Useful, Re-Useable Code Snippets from Codepen – マジで使える4つのコードスニペット
クッソ使える（このへんの訳で合ってんのかなこれ）コードスニペット4つを紹介した記事。かっちょいいローディングバー、Pure CSSなパララックスピクセル、Pure CSSなカルーセル（イメージスライダー）、マウスオーバーで拡張するフォトギャラリーの4つが紹介されています。Codepenを使って紹介されているので動作確認も導入もサクっとできそうです。JSいらずのカルーセルとかイイっすね。
[Web Design] Bootstrap Hover Image Gallery – マウスオーバーエフェクトのギャラリー
様々なマウスオーバーエフェクトのギャラリー。各サムネールにマウスオーバーする事でアニメーションが再生され、Show Codeをクリックする事でコードを確認できます。フレームワークとしてBootstrapが使われているようなので、Bootstrapベースのサイトでならサクっと実装できそうです。Twitter、Facebook、Instagram、Dribbbleへの投稿ボタンが用意されているものもあります。かっちょいいエフェクト多めです。
[CSS] CSS Paradise – クールなCSS装飾やTipsを動画で紹介するギャラリーサイト
クールなCSSデザイン作例やTipsを紹介するギャラリーサイト。アニメーションする作例についてはGifを使って紹介されているので、動きも含めて閲覧できます。わりと最近始めたばかりのTumblrブログのようで掲載数こそ少ないけど、紹介のされ方がなかなかナイスなので、今後掲載作例が増えていくとイイなーと思いました。ちょっとしたCSS装飾のネタ帳としても便利そうです。パラダイスですしね。