これは便利で使いやすい!マージンやエレメントのサイズやグリッドを簡単に測れるツール -Pixel Winch

マージンやエレメントのサイズやグリッドを簡単に測れる便利ツールを紹介します。

マージンはその間をちょこっとドラッグするだけ、エレメントのサイズはぐぃーと選択して、あとで微調整もできる簡単操作です。

Pixel Winchを使ったアニメーション

続きを読む

[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト(WordPressにも対応) -Animsition

ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。

アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。

サイトのキャプチャ

Animsition
Animsition -GitHub

続きを読む

数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ

セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。
自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。

用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。

サイトのキャプチャ

flat icon
フォーマット:font(woff, eot, ttf, svg), png, svg, eps, psd

462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。

続きを読む

[JS]フラットなデザインで映える!美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle

Googleが提唱する新しいUX「Material Design」で採用されている美しく広がる波紋のエフェクトを簡単に実装できるjQueryのプラグインを紹介します。

波紋にはさまざまなバリエーションがあり、どれも美しいエフェクトです。

デモのアニメーション

jQuery.twinkle

続きを読む

プレゼンや企画書をより魅力的に!商用でも無料でつかえるインフォグラフィック用のベクター素材

個人でも商用でも無料で利用できる、インフォグラフィックのベクター素材をInfographic Template Shopから紹介します。

サイトのキャプチャ

Infographic Template Shop

続きを読む

[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック

シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。

デモのキャプチャ

続きを読む

CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ

CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。
しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ? とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか?

大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。

サイトのキャプチャ

CSS Guidelines 2

CSS WizardryのHigh-level guidelinesの最新版(2014年8月リリース)。
大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。

続きを読む

[JS]レスポンシブ対応の画像表示テクニック!見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint

画像をデスクトップの広いスペースではそのまま表示し、スマホやタブレットなどの狭いスペースでは指定した箇所を中心にクロップして表示する、レスポンシブ対応の画像をクロップするjQueryのプラグインを紹介します。

サイトのキャプチャ

FocusPoint -GitHub
左:オリジナルの画像
右上:画像の中央をクロップ、右下:FocusPointで指定した箇所を中心にクロップ

続きを読む

 1 2 3 4 5 ... 576 577 Next

top of page

©2014 coliss