[B! CSS] tetsu_y1のブックマーク

CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE

CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。ほかにもこの吹き出し方のものは以下に多くあります。入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ

tetsu_y1 2007/02/12

リンク

CSSの小技集、20個:phpspot開発日誌

CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what probl ems can be solved with pure CSS. CSSの小技集、20個。どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。角丸画像なしの角丸投票用スターの作成テーブルなしのフォームリストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ印刷とＣＳＳ RSSフィードにスタイルシートを指定固定フッター要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓ボックスの見出し(Box Punch)を表現 CSSボタンオレンジのRSSボタンをP

tetsu_y1 2006/11/21

CSS

リンク

A library of DHTML and Ajax scripts - DHTMLgoodies.com

- March, 28th, 2017: DHTML Chess for WordPress. DHTML Chess is now available as a WordPress plugin in a free and PRO version. Learn more. - January, 16th, 2017: LudoJS Progress Bar. Samples of progress bars in the LudoJS Javascript framework on my site ludojs.com. - January, 13th, 2017: DHTML Chess 3.0. The new DHTML Chess 3 has been ported to jQuery. New demos are also available. The home of DHTM

tetsu_y1 2006/10/22

リンク

スタイルシートを分けて管理する方法をまとめる - 2xup.org

comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co

tetsu_y1 2006/10/19

CSS

リンク

Lucky bag::blog: 使用中のブラウザの CSS セレクタ対応状況をチェックできる CSS Selectors testsuite

タイトル長っ！まぁ、そのまんまなのだけれども、今使用しているブラウザが、CSSのセレクタ（CSS3も含む）にどれくらい対応しているかチェックできる CSS Selectors testsuite - CSS3 . info が便利っぽい。 Start testing... をクリックでチェックが開始され、各セレクタの結果が緑色であれば対応、赤色であれば未対応ってな寸法。ただ、ひとつのセレクタに複数のテストを行うんで、そのうちのひとつでも引っかかると failed になっちゃう。上記画面は、IE7 RC1 でのチェック結果だけど、対応しているはずの属性セレクタで failed となる。セレクタ名の部分をクリックすると、どういったテストが行われて、結果がどうなっているのかソースを確認できるんだけど、どうやら属性が空の場合や属性の記述が不完全の場に、IE7 はうまくパースできないみたい。ちな

tetsu_y1 2006/10/12

CSS セレクタ対応状況をチェック

CSS

リンク

クール! Flash/Javaアプレット不要、Script.aculo.usでクロスフェード (MYCOMジャーナル)

18th Street Software, Mike Arace氏は自身のブログにおいて、FlashやJavaアプレットといったサードパーティプラグインを使わずにアニメーション効果を実現する方法を紹介している。同氏は、これまでWebでアニメーション効果を実現したい場合、FlashやJavaアプレットなどのサードパーティプラグインを使わないといけないと考えられてきたが、最近のAjaxやDHTMLの普及により状況が変わったとしする。そして、具体例として閲覧するWebブラウザに依存しないクロスフェードのデモンストレーションを紹介する。このデモはScript.aculo.usを使って開発され、3つのテキストデータが5秒おきにクロスフェードしながら表示されるというものだ。JavaScriptを適切に処理できるブラウザであれば特別なプラグインは必要ない。最初に表示される画面。下部の緑色のボック

tetsu_y1 2006/09/29

リンク

CSSとJavaScriptで影付きの角丸ボックス要素を作る:phpspot開発日誌

Transparent custom corners and borders, version 2 | 456 Berea Street It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. CSSとJavaScriptで影付きの角丸ボックス要素を作る。次のような２重線と影がついたボックスのサンプルが公開されています。 HTMLは次のようにシンプルな形に出来るようです。 <div class="cbb"> <h1>Transparent custom corners and borders, v

tetsu_y1 2006/09/27

リンク

ちょっと使えるかもしれないCSS(1) - 見出しを飾る | オトコのキモチ２

こちらのブログには認証がかかっています。ユーザー名パスワード Powered by Seesaa

tetsu_y1 2006/09/24

リンク

Lucky bag: : blog: 背景画像に使える透過 GIF

斜線やストライプの背景画像を Photoshop とかで作ると、色を変えたくなった時にそのたび作り直しってのが面倒。便利で使ってる人も多いかもしれない secondlife さんの Background Image Maker でもそれは同じかな。んで、Photoshop とかで作る場合に、線に色を付けて作るんではなくて、色を付けたい部分を透過にして作っておいて CSS で background-color を指定するやり方にすれば、色を変えたくなった時はCSS で背景色を変更するだけで良いじゃんって、Super Stripes を見て目からうろこ状態。早速インスパイヤしてみた！使ってみたい GIF 画像をダウンロードして、CSS で背景画像に。あとは、背景色で好みの色を指定するだけ。ちなみに、サンプルでは背景色を #fa0 と指定している。斜線 oblique-line_1px.gi

tetsu_y1 2006/09/05

CSS
design

リンク

サービス終了のお知らせ

サービス終了のお知らせいつもYahoo! JAPANのサービスをご利用いただき誠にありがとうございます。お客様がアクセスされたサービスは本日までにサービスを終了いたしました。今後ともYahoo! JAPANのサービスをご愛顧くださいますよう、よろしくお願いいたします。

tetsu_y1 2006/07/11

CSS

リンク

角丸ライブラリ - tikeda::Diary:

最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。中身の文書を書き換えれば上下左右と可変するように柔軟になっています。また、一部PSDも同封してます。 0501curve.zip 中身はこんな感じ。ベーシックなタイプ 01：小さ目な角丸 02：大き目な角丸 03：斜線の角丸（背景画像をループ） 04：ストライプの角丸（背景画像をループ） 05：木模様の角丸（背景画像をループ） 06：リボンのついた角丸（背景画像を固定） 4つ角をの内側を透過GIFにしてるので、大枠の背景を変えれば発想次第で色々と使えると思います。HTMLとCSSは大体こんなんです。divが多いのがちょっと嫌な感じですが。はてな内ではspanでやってたりもします。 HTML <div class="curve-01"> <div class="cu

tetsu_y1 2006/05/01

CSS
角丸

リンク

Niceformでエレガントなフォーム生成:phpspot開発日誌

badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip

tetsu_y1 2006/04/18

美しいフォームに

リンク

Spiffy Corners - Making anti-aliased rounded corners with CSS

tetsu_y1 2006/03/29

CSS
tool

リンク

スタイルシートスタイルブック » Blog Archive » テンプレートいろいろ

tetsu_y1 2006/01/09

リンク

CodeWeb: ブラウザ別CSSハック一覧表

どうやら、ＣＳＳハックネタはウケが良いようなんで、ＣＳＳハック一覧表作ってみました。途中で眠くて力尽きてます・・・続きはまた今度 (現在随時続きを追加しています。) 2005年10月現在使用可能CSSハック複合技CSSハックは一つでもブラウザがバージョンアップすると使えなくなる可能性があります。また、理論上は可能というだけなので、適用されない場合もあるかもしれません。ご了承ください。ここまでするぐらいならブラウザ別にCSSを外部読み込みさせた方が良い気もします。注：全部自分で確認したわけじゃありません。(Mac持ってません)使用する前にご自分の環境で必ず確認してください。