Monthly Bookmarks #10

  • Posted on
  • Category : Bookmarks
Monthly Bookmarks #10

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

Monthly Bookmarks #10 目次

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

Development

SweetAlert

オシャレなアラート表示を実装できるライブラリ。

WordPress のカスタムフィールドを簡単・便利に使えるようになるプラグイン「Smart Custom Fields」作った。 | モンキーレンチ

作者が日本人のカスタムフィールドプラグイン。
僕はカスタムフィールドを使用する際にはよく「Advanced Custom Fields」というものを使用しているのですが、こちらのプラグインはACFでは有料のリピート機能が始めからついているだけでなく、リビジョンやプレビューにも対応しているとのことです。

Rounded Animated Navigation in CSS & jQuery

アニメーションと円を組み合わせたナビゲーションを実装するチュートリアル。

A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects | SmashingApps.com

jQueryやCSS3を用いて実装する、様々なイメージ向けのhoverエフェクトのまとめ。

progressbar.js

SVGを使用して滑らかなアニメーションのプログレスバーを実装でき、オリジナルの形状にすることも可能です。

新鮮なアイデアが満載!アニメーションやスクロールを使った実装テクニックのまとめ | コリス

縦長ページ向けで使えるパネルが次々とアニメーション表示されるものやドラッグも可能なブラーエフェクトパネルなど、あまり見たことないような様々なテクニックがまとめられています。

Apple’s iMac scrolling effect

Appleで使用されていたiMacのズームエフェクトを再現したもの。

Kiwi-slider

こちらもAppleで使用されている動きを再現したもので、商品スライダー部分の動きを再現したjQueryプラグイン。

Wobbly Slideshow Effect | Codrops

コンテンツが画面外へと押し出される時の動きが特徴的なスライダー。

Bootstrap Material

Material Designを適用したBootstrap。

目次へ

Design

google/material-design-icons

Material Designのアイコンセットで、CSS SpritesやSVG Spritesを使用する方法なども記載されています。

15 Interesting Infographics Web Designers Will Enjoy

様々なインフォグラフィックデザインのショーケースまとめ。

目次へ

Inspiration

Dropbox – Guide

AYR Editions – FA14

Andy Wolf Eyewear. Handmade in Austria – AWE

Velvet Hammer

Violaine & Jérémy

RINN Inc.

Nexus – Google

ACNPL\WGL

20 Gorgeous Examples Of Timeline In Web Design For Inspiration

20 Examples of Creative Using Color Filters in Web Design

Amazing Vintage Logo Designs

目次へ

Material / Freebies

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

Big John / Slim Joe – FREE Font

PIROU | Free Font

Curely – Free Typeface

srfm_neon / FONT (free)

Chelsea

IPad Air 2 Mockup

UXPin

iOS 8 GUI PSD (iPhone 6)

Glossy Neat Web Buttons (Psd)

Free Cool Buttons Psd

7 FREE Smartphone & Notebook PSD Mockups


iMac Mockups

目次へ

Service / Resource

SVG Icons

まだ数は少ないのでこれからに期待という感じですが、シンプルなSVGアイコンのコードを公開しているサイト。

AllTheFreeStock.com

写真・動画・アイコンといった素材を配布しているサイトをまとめているサイト。
ここ最近高品質な写真配付サイトとして多くのブログなどでも紹介されているようなサイトも多数入っており、またアイコンに関しても使用している人も多いと思う「Font Awesome」や、沢山のアイコンが用意されている「FlatIcon」「IconMonstr」などが掲載されています。

Clippy

CSSのclip-pathを簡単に設定することができるツール。

Cursors

cursorsの見栄えを一覧化したもの。

目次へ

Other

ついにGIFに代わる新しいアニメーション画像フォーマットが誕生か – GIGAZINE

canvasvideoといったタグも、JavaScriptライブラリも必要ないアニメーションフォーマット。

HTML5 is a W3C Recommendation | W3C News

10月28日にHTML5が勧告したとW3Cから発表がありました。

目次へ

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のアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。