Monthly Bookmarks #11

  • Posted on
  • Category : Bookmarks
Monthly Bookmarks #11

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

Monthly Bookmarks #11 目次

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

Development

Animate SVG icons with CSS and Snap | CodyHouse

SVGにアニメーションを加えたものを実装するチュートリアル。

Connor Atherton | Full stack JS developer

SVGにシンプルなアニメーションを付加できるプラグイン。

Building Full Screen CSS3 Menus with Tons of Creative Demos ♥ Scotch

CSS3で実装するクリエイティブなフルスクリーンメニューのチュートリアル。

50 Filters of WordPress – Tuts+ Code Tutorials

WordPressのフィルターについて書かれたシリーズエントリー。
まだちゃんと見ていないので、連休とか使って目を通してみようと思います。

7 CSS Units You Might Not Know About – Tuts+ Web Design Article

まだ何も気にせず使えるようなものではないと思いますが、rem・vw・exなどのCSS単位についてまとめられたエントリー。

9 basic principles of responsive web design

レスポンシブWebデザインの基本原則について書かれたエントリー。
用意されているアニメーションイメージで大体言いたいこと分かる感じですが、英語が苦手な場合はコリスさんが翻訳されているので、そちらで日本語で読むことができます。

[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ

タイトル通り、最近のWeb制作でよく使うものをSassのmixinでひと通りまとめた記事の翻訳記事で、たしかによく使うかもと思うのが多いです。

Slider Pro – Elegant and Professional Sliders

様々な動きのスライダーを実装することができるjQueryプラグイン。
レスポンシブやスワイプ対応はもちろん、カルーセルにしたりLightboxと組み合わせたりといったこともでき、どんなことができるかは用意されているサンプルでひと通り確認できます。

Perspective Mockup Slideshow | Codrops

モックアップイメージに組み込んだ形のスライダーを実装するチュートリアル。

Material UI – Material Design React Components

Material Designを使ったCSSフレームワーク。

3D Animated Mockup in CSS and jQuery | CodyHouse

CSSとjQueryを使用してモックアップにアニメーションを加えるチュートリアル。
デモにあるように、アプリの機能紹介とかで使ってみたいです。

The Ultimate Guide to Responsive Web Design | Vandelay Design

参考デザインをはじめ、ナビやイメージの扱い、レイアウト、プラグイン、フレームワークなど、レスポンシブWebデザインに関していろいろまとめられたエントリー。

12 Fun Sharing Button Effects | Tutorialzine

シェアボタンを表示する際のエフェクトを実装するチュートリアルで全12種類あります。
個人的には「Fall Back」と「Future」が好みでどこかで使ってみたいです。

目次へ

Design

小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG

テキストリンクに実装された様々なHoverアニメーションをまとめたもの。
可能であればこういった細かい部分まで拘りたいですね。

34 Well-Designed Signup & Login Forms

デザインが素敵なサインアップ・ログインフォームのまとめ。

How to Use Pastel Colors in Web Design Projects – Designmodo

パステルカラーを使用したWebデザインのショーケースまとめで、それぞれのポイントについても書かれています。

文房具が好き!こだわりのあるカワイイ文房具屋・雑貨屋さんのサイトのまとめ | コリス

かわいい文房具屋や雑貨屋のサイトデザインをまとめたエントリー。
サイトデザインも見ていて楽しいですが、それぞれのサイトで紹介・販売されているアイテムも見ていて面白いものが多いです。

和風デザインWebサイトの制作ポイントや素材を実例とともにまとめました | Webクリエイターボックス

制作時のポイント、カラースキーム、素材、実例など、和風デザインについてまとめているエントリー。

7 Rules for Creating Gorgeous UI

ゴージャスなUIを作成するルールについて書かれたエントリーで、Part 1Part 2があります。
英語が苦手な場合はPhotoshop VIPさんが翻訳されているので、そちらで日本語で読むことができます。
結構なボリュームですが、読んで損はない内容だと思います。

目次へ

Inspiration

BASE, Inc. | BASE株式会社

MUJI HOUSE VISION

Daniel Snows

Jova

Tomas Bata University in Zlín

TEYE

Longchamp – Le Pliage 20th Anniversary

Bxxlght – Design Lightboxes

Classic cars on the big screen

20 Web Designs Featuring Cool Cartoon Characters

35 Radical Red Colored Websites for Design Inspiration

30 Beautiful Blue Websites for Design Inspiration

25 More Impressive Video Background Websites to Amaze You

20 Examples of Geometry in Web Design

25 Beautiful and Minimalist Websites

目次へ

Material / Freebies

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

54 Free e-commerce icons

Awesome movie icon set

Aquarelle Designers Kit Mini

Freebie: Icon Pattern Backgrounds Set

Free iPad mockups

Free iPhone5 mockups from Shakuro

Organo

Norse free font

目次へ

Service / Resource

mydevice.io

様々なスマートフォンやタブレットのサイズを一覧化しているサイト。

flatuicolorpicker : Best Flat Colors For UI Design

フラットデザインに相性が良いカラーを一覧化しているサイト。

JSON Generator

ダミーのJSONデータを自動生成してくれるジェネレータツール。

APIs.io

APIを検索できるサービスで、キーワード検索以外にタグを使って似たようなものを検索することもできます。

目次へ

Other

いいね!ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります(公式情報)

タイトル通り、Facebookのいいね!ボタンが古いコードのままだと動かなくなることを説明しているエントリー。

目次へ

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