[CSS] loaders.css – CSSで描画されたローディングアニメーション Pocket Tweet 画像を使わずにCSSだけで描画されたローディングアニメーション。デモページはこちら。アニメーション部分の色の変更がカスタマイズできるようです。ファイルサイズが軽いので使い勝手が良さそうです。 loaders.css
[Javascript] Chart.js – 動的にグラフを出力してくれるJavascript Pocket Tweet 数値情報から動的にグラフを出力してくれるJavascript。サイト内では簡単な作例紹介がされてます。グラフはただ絵として描画されるだけでなく、動きを使った表現も併用できるようです。ソースコード一式落としてみましたが、jQueryのようなライブラリ類は使われていないみたい。今やってるデザイン案件でちょうどグラフ描画があるから、個人的にタイムリーな内容であります。 Chart.js
[Web Design] WebPlatformTools.org – Web制作における便利なオンラインツールをまとめたサイト Pocket Tweet Web制作に使える便利なツールをギャラリー風にまとめたサイト。紹介されているサイト群はカテゴリごとに分けられ、目的に応じて選ぶ事ができます。その内容は様々で、抜粋するとブラウザツール、イメージツール、フォントリソース、グリッドジェネレーター、コード生成、CSS3ツール、フォーム関連ツール、イメージエディタなど。Web制作における便利なオンラインツールなら何でもあるって感じです。いわゆるまとめ記事ではなくまとめサイトなので、リソース漁りの際に重宝しそう。ナイスです。 WebPlatformTools.org
[Icon] Simple Icons – 各種ブランドのシンプルなアイコンを、様々な解像度でダウンロードできるサイト Pocket Tweet FacebookやAmazon、Vimeo、Youtubeなどの各種Webサービスブランドのシンプルなアイコン素材をダウンロードできるサイト。DLした素材は16pxから最大4096pxもの高解像度なPNGファイルが一式揃ってます。またサイト内ではそれぞれのアイコン背景に指定すべきキーカラーも併せて紹介されており、自サイト内で使用する際の参考になります。500pxとかPathとかVineとか、わりとマイナーなWebサービスも揃ってるので、Webサービスと連携する際のデザイン素材として重宝しそうです。 Simple Icons
[CSS3] 10 CSS3 Lightbox Alternatives – Lightboxに代わるModal表示 Pocket Tweet Lightboxに代わるModal表示作例が10個紹介された記事。JSとCSS3を使った表示方法と、CSS3のみで実現したものが一緒に紹介されてます。Modal表示の事を「Lightbox」と言う人もたまにいるけど、そもそもLightboxって元々Prototypeを使った表現だったので(その後jQuery版も出ましたが)、今では使われる機会の少なくなったPrototypeから別のフレームワークに移行する必要もあり、そのためよく「Lightbox代替」とか言われるわけです。CSSだけでこういうのできるならその方が楽でイイですよね。 10 CSS3 Lightbox Alternatives
[Pattern] 15+ Free Patterns for your Designs – フリーで配布されているパターンテクスチャまとめ Pocket Tweet フリーで配布されているタイルテクスチャをまとめた記事。15枚と紹介されている数はあまり多くはないけど、個人的にはパターン素材はあればあるほどイイと思ってるので紹介。紙やウッド、シンプルな模様といった素材がほとんどで種類はあまり多くありませんが、紙だけで何種類かあったりするので、様々な質感のものを用意したい場合にはイイかも。 15+ Free Patterns for your Designs
[Material] Download 30+ Free Pricing Table Templates Design {CSS3, PSD & WP Plugins} – 価格比較のためのテーブル表示の作例とリソース Pocket Tweet 複数の料金プランがある場合によく使われるWeb上でのテーブル表示の作例と、そのリソース類をまとめた記事。リソースフォーマットは様々で、作例によってCSS3(まぁコーディングデータ一式って意味だと思う)、PSD、Wordpressプラグインなどがあるようです。なぜWPプラグインなのかはよく分かりません(HTMLとCSSでいいんじゃねーか・・・とも思います)。紹介されている作例の数が32例とかなりあり、こうした見せ方をしたい場合の参考としてはなかなか見応えがあります。 Download 30+ Free Pricing Table Templates
[Web Design] Discreet Twitter UI – マウスオーバーでパカっと開くTweetボタン Pocket Tweet お馴染みのTwitter Birdのアイコンの上にマウスカーソルを持って来ると、パカっと開いてTweetボタンが出てくるというボタン作例。これイイなー。純正のTweetボタンってサイトのデザインを考えると「あんまし置きたくねぇなー」って思う時あるけど、これならシンプルなデザインに置き換えて、かつ機能面でもマイナスにならなさそう。ソースコードを見るとCSS3のtransitionプロパティを使っているようです。動きの表現も複数用意されています。イイなーこれ。 Discreet Twitter UI
[Generator] CSSmatic – CSS3の各種プロパティ指定に特化したジェネレーターセット Pocket Tweet CSS3のグラデーション、角丸、ノイズテクスチャ、ボックスシャドウの各種指定に特化したジェネレーターセット。つまりそれぞれの指定ごとに異なる専用ツールがあって、それらをまとめたサイトという事になりますかね。分かりづらいですね。まぁCSS3のオンラインツールをまとめた感じのものです。ツールが各プロパティごとに分かれているので、それほど多機能でごちゃっとした感じにもならず、シンプルにコード生成ができます。この中じゃノイズテクスチャツールが地味に便利かなと。 CSSmatic
[CSS] CSS Filter Effects – CSSフィルターのコードジェネレーター Pocket Tweet CSSを使ったフィルター効果を、設定と結果をリアルタイムで見ながら指定する事のできるオンラインツール。サイト内には各種スライダーがあり、これらを調整する事でサンプル写真に効果が反映されます。指定できるのはブラーやグレースケール、ドロップシャドウ、セピア、ブライトネス、コントラストなど、一通り指定する事ができます。フィルター指定については常時CSSコードが更新されるので、これをコピペする事で自サイト内の写真コンテンツに反映する事ができます。CSSフィルターって種類色々あるからこうしたツールは便利ですね。 CSS Filter Effects
[CSS] CSS Beautifier – CSSを整形してくれるオンラインツール Pocket Tweet CSS記述をサイト内にコピペする事で、コードフォーマットを綺麗に整形してくれるオンラインツール。これCSSが汚い俺的になかなかナイスです。インデントの付け方や大括弧の位置などをコード内において統一したフォーマットに書き換えてくれます。サイト上部にあるのが現CSSをペーストするためのウィンドウ、下部にあるのがリアルタイムに生成される綺麗なCSSコードの書き出しエリアです。綺麗なCSSってなんか「綺麗なジャイアン」みたいな感じしますよね。しませんかそうですか。 CSS Beautifier
[Pattern] 50 Useful and Free Seamless Pattern Sets – シームレスにつながるタイルパターン素材まとめ Pocket Tweet 上下左右にシームレスにつながるタイルパターンの素材まとめ。いわゆるフォトショップ用のパターンファイルのまとめではなく、各テクスチャごとに様々な形式で配布されてます。png、ai、eps、svg、psdなど色々です。パターン素材はレイヤースタイルの中でもよく使われるので、素材としてはかなり汎用的で、個人的にはたっぷりため込んでおきたい素材。こういうまとめはなかなかナイスです。 50 Useful and Free Seamless Pattern Sets
[Photoshop Action] 55 Brand New Adobe Photoshop Actions for 2013 – フォトショップ用のアクションまとめ Pocket Tweet Photoshop用のアクションファイルのまとめ、2013年度版だそうです。わりと新しい素材ばかりがまとめられているようです。バッチ処理で生産性を高めるためというよりは、フォトオペレーションに関するものが多いです。Instagramのようなレトロ調に加工する系のアレですね。様々なフォトエフェクトが紹介されているので、それ系の加工をしたい場合の素材探しに便利かと。 55 Brand New Adobe Photoshop Actions for 2013
[Brush] QBrushes – Photoshop用のブラシファイルの配布サイト Pocket Tweet Photoshop用のブラシファイルの配布サイト。新着順やカテゴリーごとにブラウズして目的のブラシファイルを探す事ができます。見たところかなりの数のブラシファイルが掲載されているようです。この手のサイトだとBrusheezyあたりが有名だけど、ブラシ探しの際に併用するといいかも。 QBrushes
[Web Application] Is it WordPress? – 対象サイトがワードプレスで作られているかどうかをチェックするサイト Pocket Tweet 対象サイトがWordpressで作られているかどうかを判断してくれるサイト。ドメインを突っ込んでエンター押すだけで判断してくれます。サイトリニューアルの依頼が来た際に、対象サイトのバックグラウンドを調べる際に役立ちそうです。ただしドメイントップでないと判別できないらしく、このためサイトの一部だけがWordpressで管理されてるようなタイプのサイトには効かないみたい。ちなみにWordpressかどうかを判断する手段は他にもあって、例えばソースコード内に「wp」や「wordpress」といった文字列がないかどうかを検索する、ドメインの後ろに「/wp-admin」を付けてみるなどがあります。サクっと調べたい時にどうぞ。 Is i
[Action] 45 free Photoshop actions to create stunning effects – クールなエフェクトのフォトショップ用アクションファイルまとめ Pocket Tweet 写真にクールなフォトエフェクトをかける事のできる、Photoshop用アクションファイルをまとめた記事。45個のアクションが紹介されてます。Instagramっぽいレトロなエフェクトのものばかりではなく、コミック調やグランジーなもの、ヴィンテージ風、疑似HDR、肌色を綺麗に見せるエフェクト、テキスト加工、宇宙描画、フライヤー加工、折り目を付ける加工など、わりと幅広い効果のアクションファイルが紹介されてます。わりと手広い感じのナイスなまとめ。 45 free Photoshop actions to create stunning effects
[Photoshop] 7 Awesome Photoshop Secrets – フォトショップの7つの裏技 Pocket Tweet フォトショップの隠れた裏技を紹介した記事。「⌘⇧T」で自由変形のリピート(これ知らなかった!)、複数レイヤーをまとめて可視/不可視指定する簡単な方法、角丸の再指定(スクリプトいるみたいです)、テキストアラインのショートカット(これも知らなかった!)、グリッド指定補助ツール、カラー指定のショートカット、ダミーテキストをサクっと入れる方法などが紹介されてます。わたくし結構長い間Photoshop使っておりますが、それでも知らないTipsがありました。このまとめ記事なかなかアツいっすよ。 7 Awesome Photoshop Secrets
[CSS3 / jQuery] 20 Must See CSS3 and jQuery Tutorials – CSS3やjQueryを使った作例とチュートリアルのまとめ Pocket Tweet CSS3やjQueryを使った作例の紹介と、そのチュートリアル。どっちか片方ってわけではなく、だいたい併用されてます。マウスオーバーエフェクトやドロップダウンメニュー、スライドショー、プログレスバー、テーブル装飾、サムネール装飾、フォーム装飾などがその内容。去年の記事なのでそんな新しい内容でもないですが、わりと使えそうなものが多かったので紹介しときます。 20 Must See CSS3 and jQuery Tutorials
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く