タグ

webdesignに関するtykiのブックマーク (8)

  • 丸っこいデザインが可愛いアイコン48集「3D Cartoon Icons」:phpspot開発日誌

    3D Cartoon Icons Pack by *deleket on deviantART 丸っこいデザインが可愛いアイコン集「3D Cartoon Icons」。 次のようなRSSやアプリケーションに使えるアイコンが配布されています。 関連エントリ RSSデスクトップ用のアイコンが詰まったアイコン集「FreshIcons」 クールなボタン画像をジェネレートできる「The Button Generator」

  • Tag Cloudのスタイル - 3ping.org

    タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って

  • - Photoshop Tutorial - The Tutorial Blog

  • ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum

    Web担編集部の安田です。Web担のはてブ件数1万件超え()を記念して、ご愛読のみなさんのお役にたてる便利なツールを作りました。名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。ウェブデザインをする人なら日常的にdivの幅や隙間の長さを測ったりしていることでしょう。そういうときに手放せなくなるツールです。 akiyanさんが作った便利なグリッドオーバーレイのブックマークにインスパイヤされて、さらに便利な機能を盛り込んでみました。 名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。 使い方その1普通のブックマークレットです。以下のリンクを右クリックして「お気に入りに追加」(IEの場合)または「このリンクをブックマーク」(Firefoxの場合)してください。 IEでは「追加しようとしているお気に入りは安全でない可能性があります。続行しますか?」とのセキュリティ警告が出ま

    ものスゴく便利なグリッド表示用ブックマークレット登場 | Web担当者Forum
  • TRANS - 携帯用CSSを書く上で押さえておくべきポイント

    先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。(上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。) 基からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし

    TRANS - 携帯用CSSを書く上で押さえておくべきポイント
  • CSSを使ってカッコいい円形メニューを作る:phpspot開発日誌

    metal.ize - tutoriales Este es un peque・ experimento con CSS que muestra un men・circular con los elementos a su alrededor.CSSを使ってカッコいい円形メニューを作るサンプル。 次のような円形でアイコンにカーソルを合わせるとツールチップが表示されるような円形メニューのサンプルが紹介されています。 尚、紹介したページの言語は英語ではないのですが、解説ページのサンプルコードを読みつつ原理を理解するとよいでしょう。 HTMLがリスト要素になっていて綺麗なHTMLになっているのが特徴。CSSをオフにすると次のようなリスト要素の見栄えになります。 Flashや画像のクリッカブルマップでこういったナビゲーションを作るのは簡単そうですが、リスト形式のものはなかなか無かった気がします。

  • 小粋なデザインパターンが18種類!お役立ち度満点の『Design Patterns』 | P O P * P O P

    これは素敵な資料です。 ウェブ上の小粋なインターフェースがFlickr上で集められています。「カレンダー」、「ログイン画面」、「友達を追加」などなど、かなり使える事例が満載です。 「ここのインターフェースはどうしようかな・・・」というときに参考にされてみてはいかがでしょうか。 どういったインターフェースが掲載されているか、以下にいくつか見ていきましょう。 ↑ 「友達を追加」のインターフェース。SNS的要素には必要ですね。 ↑ カレンダーのインターフェースいろいろ。参考になりますね。 ↑ フッターのインターフェース。ユーザーアクションを促すには大事です。 ↑ アップロード系のインターフェース。CGMには必須ですね。 他にも「404ページ」や「タグクラウド」などがありますね。全部で18種類あります。 ご覧になりたい方は以下よりどうそ。 » Collection: Design Patterns

    小粋なデザインパターンが18種類!お役立ち度満点の『Design Patterns』 | P O P * P O P
  • Webサイトの背景画像にピッタリなストライプ模様を作れるサービス - Stripe Generator - sta la sta

    Stripe Generator - ajax diagonal stripes background designer 背景画像に斜めのストライプ模様を施しているブログやサイトを最近よく見かける気がします。 そんなオシャレさん御用達のストライプ模様を簡単に作れるサービスのご紹介。 こちらの名前そのままな『Stripe Generator』では、ストライプの幅や色、背景のスタイル、ストライプの向きなどを指定することで、タイル状に並べて使えるストライプ模様の画像を作成できます。 上のイメージのような普通のストライプの他にも、 背景をグラデーションにしたストライプや バックのストライプに影をつけた模様なんかも作れます。 これは激しく便利ですね。試しに作ったストライプはこちらです。 ブログの背景に使ってみようかな。でも全体のバランスが難しそう。もうちょっと色んなパターンを作成してから考えます。

    Webサイトの背景画像にピッタリなストライプ模様を作れるサービス - Stripe Generator - sta la sta
  • 1