Smashing Magazineのエントリーから、XHTML/CSSのフリーのテンプレートを配布しているサイトを紹介します。 100 Free High-Quality XHTML/CSS Templates 上記では、厳選した100のテンプレートが紹介されています。

Blurry Background Effect demo 仕組みは、くっきり画像とぼんやり画像の二枚を背景画像として指定し、ぼんやり画像を内包エリアにfixedで指定します。 <textarea name="code" class="css" cols="60" rows="5"> body{ background: url(images/bg-solid.jpg) no-repeat; } #page-wrap{ background: url(images/bg-blurry.jpg) no-repeat fixed; width: 500px; margin: 40px auto; } </textarea>

皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応

Six Revisionsで、ちょっと変わったCSSナビゲーションテクニックが紹介されています。 ざっといくつかご紹介。 » The Menu menu メニューアイテムにマウスオーバーすると、サブメニューが現れる » Pure CSS hover menu マウスオーバーすると、縦にサブメニューが並んで表示される » Matte CSS Menu シンプルな角丸のメニュー » CSS Sliding Door using only 1 image スライドするメニューだが使っている画像は1つ » Woody CSS Menu ウッディーなメニュー。モダンブラウザでテスト済み その他のリストは以下からどうぞ。 » 30 Exceptional CSS Navigation Techniques 郵便局に行ったり銀行に行ったりとばたばただ。金曜日ですねーがんばりましょう。

「text-indent:-9999px;」や「display:none;」でテキストをウィンドウ外に飛ばしたり非表示にして、代わりに背景画像を表示させる手法を「画像置換(Image Replacement)」というが、これには重大な欠陥があって、最近では使用が推奨されていない。 h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; text-indent:-9999px; } <h5>SITE TITLE</h5> h5{ width:150px; height:50px; background:url('ir_test.gif') no-repeat; } h5 span{ display:none; } <h5><span>SITE TITLE</span></h5> 上記のようなCSSだと「CS

CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>

CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設

Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This article was written back in 2008 when the concept of responsive web design hasn’t been created just yet. You may want to check

テキストテキストテキストテキストテキストテキストテキスト。テキストテキストテキストテキストテキストテキストテキスト。

CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま

第1章 (X)HTMLの基本法則 法則1 文書構造を的確に伝える要素でマークアップする 法則2 (X)HTML文書には適合するDTDに合わせた文書型宣言を行う 法則3 HTMLとXHTMLの違いを理解して正しいマークアップを行う 法則4 文字コードを正しく宣言して文字化けを防ぐ 法則5 XHTML文書では条件付きでXML宣言を省略できる 法則6 XHTML文書のメディアタイプは「application/xhtml+xml」が基本 法則7 id属性とclass属性を目的に応じて使い分ける 法則8 XHTML文書ではCSSやJavaScriptをできるかぎり外部ファイル化する 法則9 id属性、class属性の値はCSSセレクタの命名規則に合わせて指定する 法則10 XHTML文書の公開時にHTMLとの後方互換性を確保する 法則11 (X)HTML文書のコメントは正しく書く 法則12 インデン

CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな

Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </

Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易されていて、CDのディスク風にする例 同じようにレコード風にする例も紹介されています。 これはすばらしいですね。応用して、ゲームソフトのパッケージ風にしてみたり、色々できそうです。 関連エントリ CSSリストに関する5つのテクニック集 CSSとdivを使った画像先読みテクニック 便利なＣＳＳテクニック３０選 本の目次部分のようなリストをCSSでデザインするテクニック

CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与

Adobe Photoshopでかなり前から試行錯誤していることがあります。文字がどうしてもぼやけるというか、滲んでいるように見えてしまう場合があるのです。なんとかはっきり、くっきりさせられないかと色々試してみた結果、それなりに満足できる結果が得られたのでまとめておきます。 ラスタライズが前提であれば、フィルタなどで調整できる可能性はありますが、後から文字を変更したい場合に面倒なので、できればラスタライズしないでなんとか綺麗に見える方法がないかと試行錯誤してみました。使用しているのはCS2なので、バージョンによっては微妙な違いがあるかもしれません。 Photoshopの文字ツールの設定 まずは基本中の基本です。Photoshopの文字ツールは、注意しておかないと、すぐに文字のアンチエイリアスのかかり方が変わってしまいます。どういった場合にそうなるかというと、既に入力済みの文字を「文字ツール

ウェブ製作では、閲覧者の環境にないフォントを使用するときは画像として製作してimg要素で貼り付けたりCSSで背景画像として表示させたりすることがありますが、そういうテキストを含む画像を作るときにはFLASH8のFlashTypeで作ると通常のアンチエイリアスより綺麗にできちゃう。 FlashTypeっていうのは、WindowsXPに搭載された ClearTypeと同じ仕組みのアンチエイリアス技術で、液晶モニターでは特にその視認性が優れています。ClearTypeは日本語フォントには対応していませんが(Vistaの新日本語フォントのみ対応)、FlashTypeでは英字・日本語フォント全てに対応しており、カスタムアンチエイリアスパネルで細かく調整できます。 次の画像はPhotoshopで製作した通常のアンチエイリアスと、FlashTypeを比較したものです。 中間色ではそれほど変化はみられませ

最近のウェブデザインでよく使用されているエレメントの制作方法を1ステップずつ分かりやすく解説しているPhotoshopのチュートリアルをCarsonifiedから紹介します。

迫力あるWEBサイト作成に使えそうな煙やスプラッターブラシのまとめ。 濫用するとグチャグチャしてしまうかもしれませんが、うまく使えば迫力あるWEBサイトに仕上げられるかもしれないブラシ集です。 スモークブラシ 様々な形状の煙のブラシ 21 Awesome Smoke Brushes | Qbrushes - Photoshop Brushes ２１種類のリアルなスモークのブラシセット Colorburned | Stunning Smoke Effects: 42 High Resolution Photoshop Brushes 迫力あるスモークブラシ Smoke Brush by ~eMelody on deviantART Smoke Brush Set by ~eMelody on deviantART Smoke Brush Set by ~wiim on deviantART

いい感じの水彩テクスチャ色々２７０種。 水彩にすると手作り感が出ていい感じにできそうですが、そうしたテクスチャが色々とまとまっていましたのでご紹介。 １から水彩を出してきて取り込みっていうことをやるとすると大変なことですが、こうして素材があれば簡単に水彩の表現が出来ますね。 リンク先は以下から参照してください。 270 Sets Free And Beautiful Watercolor Textures 関連エントリ フリーテクスチャを色々探せるサイト「Texture Lovers」 フリーのテクスチャが200近くある「love textures」 ハイクオリティな50のメタルテクスチャ集 いい感じの手作り感が出せる紙のテクスチャ素材色々

Photoshop Cs5 Abstract brushes “Strings And Bubbles”, the set is high deviation quality with an abstract element design of lines and bubble shapes.

This domain may be for sale!

Diego Mattei Blogで配布している、地球儀や世界地図のベクター素材(EPS)を紹介します。

世界地図の白地図（ミラー図法）の白地図【著作権フリー素材】 ミラー図法で描かれた世界地図です。国境線を書いてあります。eps形式のデータは国境線で各国を分割しています。簡単に国別で色分けすることが出来ます。

「Top 20 Free Vector Resources for Designers | Speckyboy - Wordpress and Design」という、ベクター素材配布サイトまとめエントリが公開されていましたので紹介。 BittBox Vecteezy Go Medias Arsenal Blog.Spoon Graphics Outline Maps Free Vectors CreateSk8 Vector Portal Open Clipart Library Vector Vault NDesign Vector Cliparts Magurno Cuts and Caps - Briar Press Symbol Signs from Aiga.org Vector Workshop Hydro 74 All the Flags of the World Arcad

45 Excellent Sets of Adobe Illustrator Brushes エクセレントな４５のイラストレーターのブラシ集。 次のようなハイクオリティのブラシセットの紹介です。 どれも応用範囲は広く、活用すればデザインの仕事もすぐ終わってしまうかもしれません。 35 Free Abstract Illustrator Brushes 104 Incredible Retro-Style Pixelated Illustrator Brushes 30 Illustrator Pattern Brushes for Making Flowers and Circular Designs Fresh Brushes Floral n Veins Brushes ClickPopMedia Brushes 16 Sketchy Illustrator Brushes Illus

Six Revisionsのエントリー「デザイナーのための40+のよく使うチートシート集」から、PhotoshopやIllustrator、カラーなどのチートシートを紹介します。 40+ Useful Cheat Sheets for Designers サイトでは他にInDesigやGIMPなども紹介されています。 アプリケーション関連のチートシート カラー関連のチートシート その他のチートシート アプリケーション関連のチートシート

9 creative animal head portrait vector material / More in:Vector Cartoon Cafe cashier girl vector material / More in:Vector People 4 taxi decoration banner vector / More in:Vector Car Color wedding elements seamless background vector material / More in:Vector festival 4 creative birthday element vector material / More in:Vector festival Creative double bedroom design vector material / More in:Vect

The Ultimate List of the Top Best Logo Design Resources Below you will find galleries of logo designs for logo design inspiration. ロゴデザインの際に参考にできるリソース集。 Logo Of The Day 投票機能付きでどういうロゴが評価を得るか、という点も参考になります。 タグ検索機能付き Logo Pond クオリティの高い多数のロゴが見れる Fave Up こちらも投票機能付き。比較的大きいロゴ画像を一覧でシンプルに見れる Logo Sauce サムネイルで一覧表示。検索機能付きのロゴデザインまとめサイト Identity Archives 製品のロゴなどを検索できます。coke とか wii とかを検索してみましょう。 Logo Faves ロゴにカー

Bluehost - Top rated web hosting provider - Free 1 click installs For blogs, shopping carts, and more. Get a free domain name, real NON-outsourced 24/7 support, and superior speed. web hosting provider php hosting cheap web hosting, Web hosting, domain names, front page hosting, email hosting. We offer affordable hosting, web hosting provider business web hosting, ecommerce hosting, unix hosting.

夜を彩る蛍光ネオン管の効果のチュートリアルです。 先ずは準備。書類のモードはRGB、単位はピクセル。 表示はピクセルプレビュー、ピクセルにスナップにチェックです。　詳しくはココ→ パスツールでそれっぽいラインをつくっていきます。 文字の部分は Giddyup Std Regular を参考にしつつ線を引いています。 線の太さは6pt、オープンパスの端を丸型線端、角の処理をラウンド結合にします。 背景に黒い長方形を配置し、色分けごとにグループ化します。 先ずは青でちょうちょから。選択ツールでグループ全体を選択し、アピアランスパレットのメニューから新規線を追加します。 #0000FFに設定し、　効果 ＞ スタイライズ ＞ 光彩（外側）を　描画モード：スクリーン：#0000FF（線と同じ色） / 不透明度：100％ / ぼかし：5px　に設定します。 アピアランスパレットのメニューから新規線を追

40 Useful Adobe Illustrator 3D Tutorials and Techniques 凄くクオリティの高いプロレベルのIllustratorの3Dチュートリアル集40。 まさにプロレベルな次のような画像を作れるチュートリアルが公開されています。 Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool Use the power of Illustrator to create cool 3D infographics infographic Create a Can of Beans by Mapping Vectors to a 3D Object Design Gift Boxes Using Illustrator’s 3D Tools Fun with AI’s 3D tool 全部見る

You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out! Pattern brushes in Illustration… Honestly? It’s something I hardly (read ‘never’) use. That’s just because I haven’t looked into this feature and now that I have I truly believe in its powers. Ever since I started writing Illustrator and Photoshop tutorials, I come to the conclusion t

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

収集に時間がかかってエラーが起きる場合の対処方法を教えて頂きました。 よろしければこちらもご参照下さい。 CS4・MacOS X 10.6以降の対象方法をまとめました。こちら。 DTP駆け込み寺の掲示板のスレッド、 イラレのCS2で配置した写真だけを集める方法？より、 Illustrator CS2に付いてくる、スクリプト→サンプルスクリプト→AppleScript→Collect for Outputに入っているスクリプトで問題解決です。 収集したいaiファイルをこのスクリプトにドラッグ&ドロップすれば、収集先を聞いてきて、aiファイルと配置画像を全て収集してくれました。 はじめにIllustrator CS2を立ち上げ、ファイルを開いていた方が成功します。ダイアログなど英語表記ですが、落ち着いてみればたいしたことは書いていないので、簡単に使えました。 ［あらじん］ ということで、試して

Help others + Help youself with visibility, traffic, and gratitude from other webdesigners like you !

Photoshopとillustratorでブラシが使いたい。 そんなあなたにおすすめなのが、『Vector Art: Brushes』。Photoshoptoとillustratorで使えるブラシ20選だ。 その中でも無料で使えるものを以下にご紹介。 » svg Heraldic Brushes シンボルを形どったブラシ70選 » Free Rising Sun Vector Brushes 光線のブラシ。Photoshop CS、CS2、CS3で利用可能。1280×1024サイズ » Abstract-Vector CS Brushes 抽象的なものやキャラクターなど、様々な種類のブラシ83選 その他のリストは以下から。 » Vector Art: Brushes Photoshoptoとillustratorで使えるブラシ、チェックして使っていきたいですね。 最近「体がごつくなってき

カヤックのサイトがリニューアルしましたが、もうご覧になられましたか？ 随所に漫画テイストのデザインが取り入れられています。 この漫画っぽいデザインって、単純そうで実は奥が深いんですよね。そこで今回は、漫画っぽいデザインが気になりだしたらチェックしておきたいサイトを集めてみました。 チュートリアル系のまとめや、漫画の書き方まで幅広くざっくばらんに紹介します。 すぐ使えるチュートリアル・素材系 一撃必笑！ 名物『漫画名刺』の作り方！ Photoshopで漫画エフェクトを与えるチュートリアル２０ Mascot Design In Real Time Order - the SOSFactory Way - Psdtuts+ 海外っぽいキャラクターの描き方。動画でチュートリアル。 Photoshopで漫画エフェクトを与えるチュートリアル２０:phpspot開発日誌 タブレットを使って描くPhoto

In this tutorial, we'll look at how to create a semi-realistic object with gradients and layer blends. Also, we'll learn more about the Blend Tool and how to create glass-like material with gradients and layers. Author: Simona Pfreundner I am a digital artist and graphic designer and love Illustrator and Photoshop. To design and and create is my passion and my everyday motivator.

You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out! In my previous Illustrator tutorial I showed you how you can create a diamond flower using different transparency modes. With this tutorial we’ll stay within the same area of spirographs. Today’s article is completely inspired by Mr. Spirograph himself Andy Gilmore. His work is stunni