[Web Design] Scrollanim – スクロール芸のJSライブラリ
スクロールイベントをきっかけに、何かしらの動きとともにコンテンツが出現する、いわゆるスクロール芸を行うJSライブラリ。配布ページ自体がデモページになっていて、スクロールすると色々動きます。ライブラリはCSS3とJSからできているようで、サイズが9kbと軽いのが特徴。導入も適用したい要素に属性を追加するだけのようなので、簡単に使えそうです。詳細とソースコードはGithubで公開されています。
Tag Archives: WebDesign
[Freebie] adJelly – The ultimate social & digital ad size guide! – 各種SNSのデザインテンプレートと、サイズガイドをまとめたサイト
各種SNSのデザインテンプレートの配布と、それぞれのサイズガイドをまとめて紹介するサイト。テンプレートの配布だけでなく、SNSごとに細かくサイズ指定について紹介されている点が丁寧な印象です。またテンプレートはPSDとSketchの2つのフォーマットで配布されているので、Photoshop派の人もSketch派の人も使う事ができます。Facebook, Twitter, Instagram, Linkedin, Youtube, Google+, Tumblr, PInterestに対応しているので、メジャーどころは一通り押さえる事ができそうです。
[Logo Design] The Logo Site free placeholder logos daily – プレイスホルダーとしてのロゴ
プレイスホルダーとして使えるロゴデザイン。1日1つずつ追加されているようです。サイトやApp制作における、企画やモックアップレベルの段階で使えそうです。「んなもん作った方が早ぇYO！」とか思っちゃいましたが、ノンデザイナーの人とかにはこういうの有用かも、と思ったので紹介。まだそれほど数は多くないので今後増えると使い勝手も良くなりそうです。
[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] FourZeroFour – 404 Page Not Foundのデザインギャラリー
誰でも見た事のある404ページ（そんなページねぇYO！ページ）のデザイン作例だけを集めたギャラリーサイト。わりと堅めのページでも404だけは軽くフザけてたりする場合ありますよね。デザイナーにとってはアイデアや皮肉、センスの見せ所でもありますな。404どうしよっかなーって悩んでる時なんかに漁るとイイかもしれません。いやそこは普通悩まないか・・・。
[Web Design] You Don’t Need JavaScript – JS書かなくても色々できるYO！
Javascriptなしでも、HTMLとCSSだけで結構いろんな事ができるYO！という作例がGithubでまとめられてます。アコーディオンやカルーセル、マウスオーバーアクション、メニュー、タブなどにカテゴリ分けされて紹介されていて、各項目からはデモページへのリンクが用意されています。リンク先の多くはCodepenで、JSの項目が空なのが確認できます。JS書かずにサクっと導入できるのがイイですねこれ。特にDivのShow / Hideを切り替えるタブとか使いやすそう。