CSS(スタイルシート)のテクニックとトピックのまとめ

ショートカット背景｜ 画像加工｜ ボタン｜ ナビゲーション｜ ロゴ｜ CSS｜ 素材サイト背景Fresh Generator グラデーションや角丸をpng形式で作成できます。【Box】ボックスのサイズ・色・不透明度・影【Corners】角丸の有無・カーブの加減【Border】ボーダーのサイズ・色・...

LavaLampとはカーソルに伴ってハイライトした光源が移動するエフェクトで、LavaLamp for jQuery lovers!にあるようなものです。CSS3の角丸やボックスシャドウ、アニメーションを使用してこのエ [...]

CSS3で最も簡単にクロスブラウザの角丸を実装したい。そんなときにおすすめなのが、『curved-corner』。CSS3でIEにも角丸を適用させるhtcファイルです。Google Codeで、CSS3でIEにも角丸を実装させるファイルが配布されていますね。「border-radius.htc」フ...

IEにだけできないことを可能にしたい。そんなときにおすすめなのが、『10 ways to make Internet Explorer act like a modern browser』。IEをモダンブラウザのように扱う方法です。便利そうなのが揃っているので、ざっとご紹介しますね。HTML5をI...

スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。HTML下記の通りHTMLを記述します。<div class="outer"><div class="inner">1px rounded corners</d...

CSS3の角丸やシャドウ、グラデーションを使用して、より美しくスタイルを適用するチュートリアルをAbduzeedoから紹介します。Playing with CSS3 demo キャプチャはChrome3CSS3に対応しているブラウザでは上記のように、角丸やシャドウ、グラデーションのスタイルが適用さ...

CSSリファレンス、(X)HTML、Movable Type その他Webサイト制作に関する役立つ情報を掲載します！Category ： CSS3今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来ちゃうプロパティです。正確にはCSS3の草案「CSS...

Windows 7が発売されたが、最近ではデスクトップのOSにもLinuxが選ばれるケースが増えている。この記事では、Windows 7とUbuntuを10項目で比較する。企業のITマネジャーはここ3年ばかりWindows Vistaに手を焼いていたが、最近はデータセンターのサーバだけでなくデスク...

でっかいロゴに飽きてきてヘッダをコンパクトにしたくなったので、少し前からサイトのスタイルを色々いじっていた。ナビと検索フォームとロゴを一段に並べるのはかなり難しかったので、ロゴをアイコンにして無理やり詰め込むことにした。border-radiusまくり。緑の流行はまだまだ続くらしいので色はこのまま...

Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。ざっといくつかご紹介。jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする入力中のフォームをハイライトする highlighti...

�q1px rounded corners/smart faking �qdemo仕組みはdivを二つ使用し、paddingとmargin、もしくはmarginとborderで「1px欠け」を実装しています。HTMLCSS(padding&margin).example1 .outer {back...

画像を使わずに、パネルの四隅を角丸にする軽量のスクリプトをthe css blogから紹介します。Creating rounded corners (the "Deviant art's" [...]

CSSやHTMLを知らなくても複数のカラムやグリッドレイアウト、タブ、角丸などがオンラインで簡単に作成できるLayout Generatorsを紹介します。Layout Generators各ジェネレーターはプレ [...]

“Web2.0”っぽいWebデザインの定番、角丸ボックス。実際、ここ数年、サイドメニューやナビゲーションバーなどに角を丸くしたブロック要素を多用するサイトを目にする機会が増えています。ところがこの角丸ボックス、（X）HTMLとCSSだけで実現するには、コーナー部分の背景画像を用意したりCSSを書き...

クールでクリーンに角丸を作りたい。そんなあなたにおすすめなのが、『CSS Sprites + Rounded corners』。CSS Spriteを使って角丸を実装する方法だ。このエントリーでは、↓のような画像を使って角丸を実装する方法が紹介されている。デモは以下から。» Take a look...

Blurry Background Effect 透過背景の角丸ブロックを作成するＣＳＳサンプル。 次のような透明で角丸型のブロックのサンプルの閲覧とダウンロードが可能です。 これはなかなかトリッキーなテクニックですね。 関連エントリ便利なＣＳＳテクニック３０選 ページ全体に枠線をつけるCSSテク...

Usability Postから、一枚の画像で、四隅が角丸のパネルを実装するスタイルシートを紹介します。Scalable Content Box Using Only One Background Image demo仕組みは、全体を囲む「div」と見出し「h2」に同じ背景画像を指定し、それぞれポ...

ご注意 この記事は、「考え方」を紹介する物です。 「サンプルソースをコピペして使いまわせる！」という類の物ではありませんので、ご注意ください。 魔の角丸 マークアッパーの頭を悩ませるデザインの一つに、角丸があります。 ただの角丸ならまだいいんですが、グラデーションがかかっていて可変幅だったりすると...

『 SlidingDoors手法を用いた角丸リンクボタンのCSSサンプル。ロールオーバー効果もあり。 』

CSSROUND - Create round corner with cssCSSでの角丸ブロック簡単ジェネレーター「...