Monthly Bookmarks #33

  • Posted on
  • Category : Bookmarks
Monthly Bookmarks #33

今月(2016年9月)個人的に覚えておきたいと思ったものやTwitterを通してシェアしたエントリーやサービスなどのまとめです。

Monthly Bookmarks #33 目次

  1. Development
  2. Design / Inspiration
  3. Material / Freebies
  4. Service / Resource

Development

  • 普通のHTMLの書き方 保守しやすく、規模に依存しないHTML文書のために覚えておきたいことがわかりやすくまとめられています。
    悪い例と良い例とで用意されているので違いもわかりやすいですし、これから知識をつけたい人だけでなく、自分ではある程度理解しているという人でもいろいろと再確認できると思います。
  • Inspiration for Navigation Indicators | Codrops ページ全体が切り替わるようなページや垂直スライダーなどの横に設置するナビゲーションに使えそうな実装サンプルです。
  • Background Segment Effect | Codrops CSSのclip-pathとanime.jsを利用して背景のセグメント効果を実装するチュートリアル。
  • How To Create CSS Glitch Effect – CSS3 Animation Tutorial CSSでグリッチエフェクトを表現するチュートリアル。
  • in-view.js DOM要素がビューポートに入る時・出るときにイベントを設定することができるスクリプトで軽量なのも特徴。
  • granim.js グラデーションをアニメーションさせる事ができるスクリプト。
    サンプルにあるように様々な見せ方ができたり、任意で使用するカラー指定することもできます。
  • txt.wav テキストをアニメーションさせる事ができるスクリプト。
    必要なファイルを読み込んで要素にクラスを指定することで、小刻みに動かしたり回転させたりできます。
  • Designers Guide to Web Performance Optimization – Jon Yablonski Webパフォーマンスの最適化についてまとめられているエントリーで、ページ下部にこれらを満たしているかの確認に便利なチェックリストも用意されています。
  • SpinThatShit CSSで作られたローディングスピナーのサンプル集で、HTML要素ひとつ(サンプルではdiv)で実装できます。
  • loading.io – Your SVG + GIF Ajax Loading Icons ローディングアイコンを作成できるジェネレータで、カラー・サイズ・スピード・タイプなどを設定して作成されたものをダウンロードできます。
    すべてというわけではありませんが、ダウンロード形式はSVG・CSS・GIFが用意されています。
  • CSSの単位(em, rem)を使った、これから取り入れていきたい実装テクニックのまとめ | コリス em, remを用いた実装テクニックがデモ付きでわかりやすくまとめられています。
  • CSS Nite LP47「Coder’s High 2016」 – Togetterまとめ 「CSS Nite LP47「Coder’s High 2016」に関するツイートがまとめられており、参考になる内容が多数あります。

目次へ

Design / Inspiration

目次へ

Material / Freebies

※以下で紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。

Bytesize Icons

1800 Free Minimal Icons

Free 2px Line Icons

iOS 10 UI (GUI) kit for Sketch and Photoshop

目次へ

Service / Resource

目次へ

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。