Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
え！Photoshop？って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
国産限定・Web制作時に覚えておくと便利な14のフリーのWebサービス - かちびと.net
最近、国産のWebサービスも かなり勢いがあるなぁと思ったので ちょっとまとめてみました。よく 紹介されるのは海外製ですが、 それに劣らないMade in Japanの Web制作者が知っておくと便利そうな フリーのWebサービスをご紹介します。 順不同です。日本語が完全に通じる海外Webサービスも今回は省いて純国産のWebサイト制作に一役買ってくれそうなWebサービスをご紹介したいと思います。出来る限り高性能だったり多機能なWebサービスのみにしたつもりですが主観入ってます。 Color of Book 国産サービスで一番多用しています。AmazonAPIを使って雑誌の表紙を抜き出し、その表紙からカラーチャートを生成。アイデアが素晴らしいですね。雑誌は表紙のデザインや色で惹きつけるよう考えられている事が多いのでWeb制作時のカラー選定にかなり参考になるのでは。 Color of Book
遊びごころ満載、横罫線「hr」のクリエイティブなデザインいろいろ
Smashing Magazineでは現在、楽しくてクリエイティブな横罫線「hr」のデザインのコンテストを行っており、最終選考に残った25作品を紹介します。
プロっぽくて編集しやすいフリーのウェブサイト用テンプレート配布サイト「TemplateYes」 - GIGAZINE
最近はブログなどを使ったサイトが非常に多いのですが、やはりきちんと作り込まれたサイトも必要なわけで。だからといってゼロから作るのは大変。そこで使えるのが、あとから編集してカスタマイズしやすい商用利用可能なフリーのウェブサイト用テンプレート。元となるPSDファイルなども付属している場合があるので、それぞれのパーツをかなりカスタムすることが可能となっています。また、全部Flashでできたサイト用のテンプレートなどもあります。 ダウンロードは以下から。 Free Website Templates, Flash Templates, CSS Templates - TemplateYes.com まずは各ジャンルごとにサンプルを見てみましょう。 ・PSDファイルとフォントまで付属した通常のウェブサイト用テンプレート ダウンロードはここをクリック ダウンロードはここをクリック ダウンロードはここを
TRANS [hatena] - Hkon Wium Lie氏「CSSの10年とこれからの大きな動き」（日本語訳）
タイトルは誇張ではありません。僕も読み始めたときは何のことなのか分かりませんでしたが、途中で出てくるコードを読んで、やっと分かりました。「本当に、これは今のWebデザインやCSSを変えるかもしれない」と。元記事は、A List Apart: Articles: CSS @ Ten: The Next Big Thingより。著者はCSSそのものの草案者であり、今はOperaのCTOを務めるHåkon Wium Lie氏です。 追記 id:iwaimさんのはてブコメントに対する返答を文末に書きました。（2007年9月11日19時ごろ） CSS @ Ten: The Next Big Thing CSS は去年10年の節目を迎えた。このような節目は、過去に立ち返り、未来の計画を立てるための機会である。CSSは構造から見た目を分離することによって、根本的にWebデザインを変えた。CSSはデザイナ
![TRANS [hatena] - Hkon Wium Lie氏「CSSの10年とこれからの大きな動き」（日本語訳）](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d2c6afb5d6abaa426040c38409bd6b5df9565ae/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fa%2Faratako0%2F20070909%2F20070909015823.png)
[CSS]Lightbox風エフェクトをCSSで実装する方法
Lightbox、Thickbox風のエフェクトをJavaScript無しで、CSSで実装する方法の紹介です。 Create a Lightbox effect only with CSS - no javascript needed [Emanuele Feronato] 上記サイトで紹介されているコードを使用すると、Lightbox風のエフェクトを実装することができます。 「JavaScript無し」とサイトにはありますが、onclickのイベントに入っているので厳密に言うとJavaScript無しではありません。 簡単に実装できるので、いろいろと応用も効きそうです。 lightbox lightbox 2 thickbox GreyBox
デザイナーならこう作るCSSスタイルテーブル『A CSS styled table version 2』 – creamu
かっこいいテーブルをデザインしたい。 そんなあなたにおすすめなのが、『A CSS styled table version 2』。デザイナーならこう作るCSSスタイルテーブルだ。 このエントリーでは、クリーンなソースでコーディングされたテーブルが2つ紹介されている。 » Example 1 背景画像は使わず、セルに背景色を使った例 » Example 2 背景画像を使った例 どちらもページのソースを見るのが早いだろう。 シンプルでとても綺麗なテーブルに仕上がっていると思う。 デザイナーならこう作るCSSスタイルテーブル、チェックして作っていきたいですね。 プランナー、アートディレクターにたくさんのことを教わりました。「とりあえず手を動かすのがレイアウトの基本」だと。あとデザインはピクセルよりも見た目。人間の目にはくるいがあるから見た目で綺麗にそろっていればいい。とにかく手を動かしていこうっ
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home｜ About｜ Gallery｜ Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。 <ul id="samp
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
【レビュー】これは凄い! Ajax最強のデバッグツール"FireBug 1.0"リリース (1) デベロッパのアツい視線を受ける実力派エクステンション (MYCOMジャーナル)
デベロッパがFirefoxを使う理由はエクステンション! Ajax Webアプリケーションの開発者には、WebブラウザとしてFirefoxを愛用しているユーザが多い。その理由のひとつに豊富なエクステンション機能が挙げられる。Firefoxを使っているからエクステンションを使っているというよりも、エクステンションを使いたいからFirefoxを使っているという感じだ。 デベロッパに人気のあるエクステンションはいくつもあるが、代表的なところではAll-in-One GesturesやDictionarySearch、Greasemonkey、User Agent Switcher、ScrapBookなどを挙げることができる。そしてAjax Webアプリケーションの開発において必須ともいえるエクステンションに、Firebugがある。 Firebugに対する称賛の声は枚挙にいとまがない。「Fireb
CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::
お探しのページは「すでに削除されている」、「アクセスしたアドレスが異なっている」などの理由で見つかりませんでした。以下でキーワードやカテゴリーから記事を探すことができます。
WEB標準なレイアウトを作成するレイアウト言語「Bamboo」:phpspot開発日誌
The Bamboo Projekt - About Bamboo helps you to create standards-based, cross-browser page layouts more easily by providing a new layout language that is more natural than CSS for defining layouts. WEB標準なレイアウトを作成するレイアウト言語「Bamboo」。 次のようなレイアウト指定をすることで複雑なHTML&CSSなレイアウトを作成できます。 <layout> <grid> <rows> <row height="200px" /> <!-- Jumbo Banner --> <row height="20px" /> <!-- Global Navbar --> <row height="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]画像の四辺のボーダーを一味違ったスタイルにするチュートリアル
youmos.com
CSSで角丸を作成する方法25選『25 Rounded Corners Techniques with CSS』 – creamu
http://www.cssflavor.com/
最初に指定しておくと便利なCSS | Tech de Go
*{ margin : 0 } はもう古い!? | Emotional Web
新規でサイトを作る際に僕がいつも使ってるCSSのセットを公開するよ::::::STOPN' LISTEN::::::to the silence:::::::
