[B! CSS] [3ページ] dawn_akiraのブックマーク

CSSグラデーションのちょっとしたテクニック #2

前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタンありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と

dawn_akira 2009/12/21

リンク

CSS のみで吹き出し

hail2u.net - Weblog - Pure CSS な吹き出しに触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出しマークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom

dawn_akira 2009/12/07

リンク

プロパティの指定順序 | かたつむりくんのWWW

CSSの記述順序をまとめてみました。おおまかなところはMozillaの順序をベースにし、それにW3Cの仕様書（CSS2 Specification）と僕のバイブルである『Web標準の教科書―XHTMLとCSSでつくる"正しい"Webサイト』での出現順序をミックスさせて、少し自分好みに並べ替えました。使用頻度の低いプロパティは隠してありますので「**」のついている項目をクリックすれば表示されるようになっています。ちなみにこのアコーディオンは、タブ形式で切り換えることにも対応できるように「よくある質問っぽいののjQueryを使ったサンプル」で紹介されているライブラリを使用させていただきました。なお、qaTab.js の以下の部分の2行目と8行目に「.accord」を加えて、dt.accordだけがアコーディオンするように変えています。そうすれば、<dt>要素の次に<dd>がない場合でも

dawn_akira 2009/12/04

リンク

idとclassの違いと使い分け！スタイルシート(CSS)適用法 [ホームページ作成] All About

idとclassの違いと使い分け！スタイルシート(CSS)適用法idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか？この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回