Monthly Bookmarks #33

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 | CodropsCSSのclip-pathとanime.jsを利用して背景のセグメント効果を実装するチュートリアル。
  • How To Create CSS Glitch Effect - CSS3 Animation TutorialCSSでグリッチエフェクトを表現するチュートリアル。
  • in-view.jsDOM要素がビューポートに入る時・出るときにイベントを設定することができるスクリプトで軽量なのも特徴。
  • granim.jsグラデーションをアニメーションさせる事ができるスクリプト。
    サンプルにあるように様々な見せ方ができたり、任意で使用するカラー指定することもできます。
  • txt.wavテキストをアニメーションさせる事ができるスクリプト。
    必要なファイルを読み込んで要素にクラスを指定することで、小刻みに動かしたり回転させたりできます。
  • Designers Guide to Web Performance Optimization – Jon YablonskiWebパフォーマンスの最適化についてまとめられているエントリーで、ページ下部にこれらを満たしているかの確認に便利なチェックリストも用意されています。
  • SpinThatShitCSSで作られたローディングスピナーのサンプル集で、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

目次へ

Close the search window,
please press close button or esc key.