ドットインストール代表のライフハックブログ
ウェブサイトやアプリケーションなどに適した、小さいサイズ(16x16)のフリーアイコンをled24.deから紹介します。 Download Webmaster Pixel Icon Set preview ダウンロードできるアイコンは500種類以上はいっており、フォーマットは全てPNGです。 アイコンのライセンスはCC 3.0で、個人でも商業サイトでもフリーで利用可です。
ブラウザのタイトルバーや、検索サイトの結果画面などに表示されるtitle要素内の表記規則のパターンをCSS Tricksから紹介します。 What's The Best Way To Handle Page Titles? title要素内の表記規則:第一階層の場合 [サイトの名前] 例:コリス [サイトの名前] - 短いタグライン 例:コリス - Web制作に関する最新情報をお届け [サイトの名前] - キーワード 例:コリス - ウェブデザイン、HTML、CSS、JavaScript title要素内の表記規則:第二階層の場合 [サイトの名前] - [記事のタイトル] 例:コリス - jQueryのプラグイン33+1選 [記事のタイトル] - [サイトの名前] 例:jQueryのプラグイン33+1選 - コリス [記事のタイトル] 例:jQueryのプラグイン33+1選 [サイトの名前
サイドバーなどの省スペースにぴったりな、複数のパネルをスムーズなアニメーションでスライドして切り替えるスクリプトをQuenessから紹介します。 jQuery Sliding Tab Menu for Sidebar Tutorial demo デモでは、タブをクリックすると、それに対応したパネルがスライドして表示されます。 各パネルはコンテンツの量に合わせてサイズが調整されます。 タブとパネルはそれぞれdiv要素で実装されており、スライドのアニメーションにはjQueryとjQuery.ScrollToが使用されています。
各項目の幅指定をしないで、それぞれを中央に配置するドロップダウン型のナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Anywidth dropdown with centered top and sub levels demo ナビゲーションはリスト要素で、中央配置は「display:table;」と「text-align:center;」で実装されています。 IE用に条件付コメントでテーブル要素を使用しています。 ドロップダウンで表示されるパネルの右側には透明なエリアがあり、パネルのオープンをキープするマウスのエリアをより広く確保しています。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeとのことです。 また、同じくドロップライン型のものも公開されています。
2009年にリリースしたものを中心に、WordPressのテーマファイルの2009年上半期100+α選を紹介します。
The Design Inspirationというサイトで、インスピレーションになるクールなタイポグラフィーが紹介されています。 ざっといくつかご紹介。 ↑はDesigned by Company London。 Designed by Stefano Buffoni Designed by Ashed Dreams Designed by Neuarmy Designed by Chank その他のリストは以下からどうぞ。 » 60 Most Stunning Typography Inspiration of All Time うちの今北が6/30にパソナテックさんでイベントをやります。 いつもはオーガナイザーをやっていますが、今回はスピーカーとしての出演ですね。 タイトルもなかなか刺激的です。興味があったらぜひお越しくださいー。
jQuery for Designersというサイトで、ドラッグでスクロールできるインターフェースが紹介されています。 マウスで水平方向にドラッグしてスクロールできますね。 説明とデモ、コードが公開されているので、ぜひ見てみてはいかがでしょうか。 サイトのデザインとインターフェースがとても素敵で、クリックするとスクロールするCarousel系のギャラリーがついていたり、メニューをクリックするとそのコンテンツだけ表示されるインターフェースもすごくいい感じです。これだとあまりすくろーるしなくていいから、コメントもとても見やすいですね。 ぜひ見てみてくださいー。 » Fun with Overflows 六本木でビールを飲みながらブロギング中♪これから映画を見てくるぞ。
smashing appsで、すぐに使えるフリーのデザイン素材がまとまっています。 ざっといくつかご紹介。 » 15 Free And High Quality Tree Wood Textures クオリティーの高いフリーの木のテクスチャ » 10 High-Quality Free Leaf Textures クオリティーの高い葉のテクスチャ10 » 10+ Free Grunge Style Rust Textures グランジ系の錆のテクスチャ10+ » 500+ Watercolor Brushes for Photoshop 水彩画系のPhotoshopブラシ500+ » 6 Free PSD/(X)HTML-Templates PSDのテンプレート6選 その他のリストは以下からどうぞ。 » 15 Most Useful & Free Collection Of Ready-T
決定版が続きますが、かなりクオリティーが高いのでご紹介。 Design ShardでPhotoshopのテキストエフェクトチュートリアルが18個紹介されています。 いくつかご紹介しますね。 ↑はミルクタイポグラフィーエフェクト。 » Candy Coated Text キャンディーで斜めストライプのテキスト » Smooth Glass Type アクアなテキストエフェクト » Text In Stitches ステッチ柄のテキスト » Create Destructive Black and White Lettering with a Dramatic Splash Effect スプラッシュエフェクト » Using Light and Shade to Bring Text to Life 光と影のあるテキストエフェクト ほかにもかっこいいものが揃っているので、ぜひ見てみてください
決定版がまた続いてしまいますが、、すごいサービスなのでご紹介。 Free Stock Texturesでは、↑のようなテクスチャがたくさん配布されています。 Terms of use FreeStockTextures.com are the authors of all the photos available on this site. All textures may be used for both personal and commercial purposes. You may make any derivative work out of them. However you are not allowed to sell or redistribute these textures in an underived form or if the modified product
ウェブサイトでよく使用されるホームや検索やショッピングカートなどのアイコンを描くPhotoshopのブラシとシェイプを紹介します。 Web Icons Brushes(Photoshop用のブラシ) Web Icons Shapes(Photoshop用のシェイプ) 素材はブラシとシェイプなので、サイズやカラーなど好みのものに変更して使用することができます。 アイコンの種類は、下記のようになっています。
トイレ、電話、レストラン、カフェ、インフォメーション、ノースモーキング、パーキングなど50種類のシンボルサインのOpen TypeのフリーフォントをDesignWorkPlanから紹介します。 Free tool: Symbol Signs collection シンボルサインは、F = female, M = male, d = disabled, L = arrow left, R = arrow right, U = arrow up, D = arrow downのようになっています。 フォントの使用にあっては、実際の標識やサインに使用してもよいとのことです。 サイトでは、Museo Sans 500(無料)との併用を勧めています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く