カテゴリー:CSS3関連

リスト表示へ

Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

2009年12月17日 14:49

PhotoshopライクなCSS3ジェネレーターイメージ
[09/12/22]
Opera でもいよいよ border-radius に対応する ようです。また、W3C の「CSS Backgrounds and Borders Module Level 3」が勧告案(Candidate Recommendation)になったためか、Opera ではプレフィクスがないようです。
なので、プレフィクスのない border-radius プロパティも出力するように修正しました。
[09/12/18]
若干 機能追加を行いました。
作成したものを、IE の独自拡張である filter を用いて、同じような表示になるソースも出力できるようになりました。
ただ、そもそもの実装が違うので完全には再現されません。(グラデーションが最初と最後の色しか指定できない、など)

今まで、CSS3 のグラデーションを利用したサンプルの作成を作成するとき、Photoshop っぽい感じでグラデーションが作れたらなーと前から思っていたので、最近 JavaScript から遠ざかっていたのもあって思い切って自分で作ってみました。

メインはグラデーションの作成ですが、Photoshop ライクなものを目指したので、Photoshop では当たり前のように出来るドロップシャドウなんかも設定できたら便利かな、と思って付け加えてあります。

ちなみに、CSS3 のグラデーションがメインなので、"CSS3 のグラデーションに対応している Firefox3.6以上か、WebKit 系のブラウザでしか動作しません"。

色々チェックはしていますが、もし不具合なんかあったら連絡もらえるとうれしいです。
連絡いただける際は、この記事へのコメントか、問い合わせからお願いします。

Photoshop ライクな CSS3 ジェネレーター

作ってみた感想など

今回は、CSS3 のプロパティを出力するのが目的だったので、そもそも CSS3 に対応していないブラウザはすっぱり切り捨てましたw なので、全体的に CSS3 をめっさ使ってます。

加えて、IE6 などのブラウザを切り捨てたので、気兼ねなく色々なセレクタを使ったりしてとてもコーディングが楽でした。
CSS3 が当たり前になったらこんなに楽になるんだなー・・としみじみ思いました。早く、CSS3 をメインで使ってコーディングがしたい・・・。

ボタンに光のエフェクトを加えるCSS3 - CSS3で遊んでみる2

2009年12月15日 14:27

考えてみたら -webkit-animation についての記事を書いていなかったので、ちょうどいいかなーと思いつつエントリー。

今回の記事は、これで決まり?な画像置換 - DKIR で紹介したz-indexのマイナス値と、-webkit-animationを使ったボタンに光るエフェクトを加える方法の紹介です。

前回 に引き続き、CSS3 で遊んでみるの第 2 段ですw
ちなみに今回のサンプルは、WebKit 系が先行実装している-webkit-animationを使ったものなので、Google Chrome や Safari で見ないとまったくなにも起こりませんのであしからず。(ただ、逆を返せばその他のブラウザ(もちろん IE6 も)では変化がないので、WebKit 系ブラウザで見た人向けに仕込んでおく、なんていう使い方もできちゃったりします)

CSS3だけで丸いボタンを作る方法 - CSS3で遊んでみる

2009年12月12日 00:04

CSS3で丸いボタンを作成したサンプル

最近なんだか結構 CSS3 で色々やっているのが流行ってるようなので、自分も CSS3 で遊んでみることにしました。n 内容は、「CSS3だけで丸いボタンを作る」です。

画像を見てもらうと分かるように、完全に丸いボタンです。
しかもこれ、画像は一切使っていません。使用しているのは CSS のみです。n

今回はとにかく遊んでみる、っていうのが主題なので使いどころとかは一切考えていませんw
それから CSS3 に対応していないブラウザで見ると、ただの真四角のボタンリンクになります。n

各ブラウザで先行実装しているCSS3プロパティまとめ

2009年6月22日 15:35

[10/03/03]
Opera10.50 がリリースされました。それに伴って、Opera10.50 で新しく実装されたプロパティを追加しました。
[10/01/25]
-moz-linear-gradient, -moz-radial-gradient の項目を追加しました。
[10/01/22]
-webkit-border-radius について若干補足を追加しました。

色々と記事を書いてきて、いざ CSS3 を使ってサンプルを作ってみよう、って思ったときに微妙にプロパティ名とかを忘れていたのでまとめてみる。ちなみにまだ草案のものもあるのでちょこちょこ更新予定。

漏れているものもあると思うので、もしなにかあったら連絡もらえると助かります。

WebKit 系

(*) は CSS3 で定義された値

項目をクリックすると、詳細が表示されます。

すべて開閉

  • -webkit-background-size

    [使い方] -webkit-background-size: 40px 20px;

    背景画像のサイズを指定します。横 縦の順で記述します。

  • -webkit-background-origin

    [使い方] -webkit-background-origin: padding;

    上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。

    • border (ボーダーまで含めたボックスサイズで算出)
    • padding (パッディング領域まで含めたボックスサイズで算出)
    • content (コンテンツ領域のみのボックスサイズで算出
  • -webkit-background-clip

    [使い方] -webkit-background-clip: padding;

    背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。border に対して、透過のある画像や、透明度のある色を指定した際に背景が border の下に表示されると問題がある場合などに使うといいと思います。

    • border (ボーダーまで含めたボックスサイズで背景画像を描画)
    • padding (パッディング領域まで含めたボックスサイズで背景画像を描画)
  • Multiple background

    [使い方] backgorund-image: url(sample.png), url(sample2.png)...;

    CSS3 では背景画像を複数指定することができるようになりました。
    カンマ区切りで列挙することで、前面から背面への画像指定が可能です。
    繰り返し処理や配置箇所なども同じようにカンマ区切りで指定します。(それぞれ書かれた位置が画像と対応します)

  • -webkit-border-image

    [使い方] -webkit-border-image: url(sample.png) 4 4 4 4 [round|repeat] / 4px [,4px 4px 4px];

  • -webkit-border-radius

    [使い方] -webkit-border-radius: 5px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
    CSS Backgrounds and Borders Module Level 3 の勧告案を受けてか、Google Chrome4 では -webkit- のプレフィクスがなくても動作するようになっています。

    • -webkit-border-top-left-radius: 5px;
    • -webkit-border-top-right-radius: 5px;
    • -webkit-border-bottom-left-radius: 5px;
    • -webkit-border-bottom-right-radius: 5px;
  • -webkit-box*

    [使い方] display: -webkit-box;

    この display を指定された要素内のブロック要素(p や div など)は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。

  • -webkit-box-flex

    [使い方] -webkit-box-flex: 1;

    display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。(flex は "フレキシブル" の意味です)
    (※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

    つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。

  • -webkit-box-ordinal-group

    [使い方] -webkit-box-ordinal-group: 1;

    display: box 内に配置されたブロック要素に指定します。
    指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
    (HTML の記述順序に関わらず出現順序を変更したい際に使用します)

  • -webkit-box-shadow

    [使い方] -webkit-box-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。

  • text-shadow

    [使い方] text-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。

  • -webkit-text-stroke

    [使い方] -webkit-text-stroke: 2px blue;

    テキストにアウトラインを設定します。アウトラインの太さ、幅を指定します。また、以下のプロパティを使うことで個別に設定できます。
    ※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。

    • -webkit-text-stroke-width
    • -webkit-text-stroke-color
  • -webkit-text-fill-color

    [使い方] -webkit-text-fill-color: white;

    テキストの塗りつぶし色を指定します。color と同義ですが、こちらの値を transparent に指定することで、アウトラインのみを表示することが可能になります。
    ※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。

  • -webkit-box-sizing

    [使い方] -webkit-box-sizing: content-box [,border-box];

    ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。

  • -webkit-transition-property

    [使い方] -webkit-transition-property: color, background-color;

    transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。

  • -webkit-transition-duration

    [使い方] -webkit-transition-duration: 0.5s;

    transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。

  • -webkit-transition-timing-function

    [使い方] -webkit-transition-timing-function: ease-in-out;

    transition の変化の具合を設定します。指定できる値は以下の通りです。

    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier() 4つの数字をカンマ区切りで指定
  • -webkit-gradient()*

    [使い方] background-image: -webkit-gradient(linear, left top, left bottom, from( white ), color-stop( 0.3, gray ), to( black ) )

  • -webkit-box-reflect

    [使い方] -webkit-box-reflect: below [0px -webkit-gradient()];

    生成されたボックスなどを反転表示させます。また、透過 PNG 画像や、-webkit-gradient() を使用することで反転した要素にマスクをかけることもできます。

    指定する値は、「above(上)、below(下)、left(左)、right(右)」で位置を、続く px で離れる距離を、最後に PNG 画像の URL か、もしくは -webkit-gradient でマスクを指定します。

  • -webkit-mask-box-image

    [使い方] -webkit-mask-box-image: url(mask.png);

    透過 PNG 画像を指定することで、ボックスにマスクをかけることができます。

  • -webkit-transform

    [使い方] -webkit-transform: rotate(45deg);

    生成されたボックスを変形(transform)させます。
    指定できる値は次の通り。

    rotate(deg)回転(deg で指定。30deg など)
    rotateX(deg)
    rotateY(deg)
    横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。(deg で指定。30deg など)
    scale(xy[x,y])拡大・縮小(数値を指定。1 や 0.5 など)
    skew(deg)スキュー(シアー)(degで指定。30deg など)
    translate(xy[x,y])移動(px で指定。30px など)
    perspective(deg)遠近感(数値で指定)
  • -webkit-transform-style

    [使い方] -webkit-transform: preserve;

    上で書いた -webkit-transform の変形の仕方を、2D 表示にするか、3D 表示にするかを指定します。
    指定できる値は次の通り。

    • flat (2D 表示)
    • preserve-3d (3D 表示)
  • -webkit-transform-origin

    [使い方] -webkit-transform-origin: X Y Z;

    transform の基準点を指定します。

  • -webkit-backface-visibility

    [使い方] -webkit-backface-visibility: hidden;

    rotateX などで裏返ったときにコンテンツの裏側を表示するかどうかを指定。

  • @font-face

    [使い方] @font-fase{ font-family: myFont; src: url(font.otf) format('opentype');

    サーバにアップしたフォントを指定し、そのフォントがインストールされていない環境でもフォントが見えるようにする指定です。
    font-family で任意の名前をつけ、src でフォントファイルのパスを指定します。
    ちなみに利用する場合は、任意に付けた名前を指定することで利用できるようになります。
    使用する場合は、ライセンスなどの問題を確認した上で使うよう注意する必要があります

Mozilla 系

  • -moz-max-content(etc.)

    [使い方] width: -moz-max-content

    幅(width)の算出方法を指定するプロパティの値です。新しく追加されたのは以下の通り。

    • -moz-max-content (コンテンツが取り得る最大幅)
    • -moz-min-content (コンテンツが取り得る最小幅)
    • -moz-available (表示に利用可能な幅)
    • -moz-fit-content (内容にフィットさせた幅)
  • -moz-border-image

    [使い方] -moz-border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;

    ボーダーに画像を指定するプロパティです。ちょっと英語なので解釈が合っているか分かりませんが、どうやら仕様が変更になったようです。そのため、若干 webkit 系と指定方法が異なるので注意が必要です。
    [参考:mozilla developer center]

  • -moz-border-radius

    [使い方] -moz-border-radius: 5px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。(webkit 系と指定方法が異なるので注意)

    • -moz-border-radius-topleft: 5px;
    • -moz-border-radius-topright: 5px;
    • -moz-border-radius-bottomleft: 5px;
    • -moz-border-radius-bottomright: 5px;
  • -moz-linear-gradient*

    [使い方] background-image: -moz-linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 40%,rgb(0, 134, 224) 100%)

    線状のグラデーションを指定する値です。(webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です)
    参考URL: https://developer.mozilla.org/en/CSS/-moz-linear-gradient

  • -moz-radial-gradient*

    [使い方] background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)

    円状のグラデーションを指定する値です。(webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です)
    参考URL: https://developer.mozilla.org/en/CSS/-moz-radial-gradient

  • -moz-background-inline-policy

    [使い方] -moz-background-inline-policy: bounding-box;

    インライン要素の背景画像の繰り返し方を指定します。指定できる値は以下の通り。

    • bounding-box (インライン要素全体に対して背景画像を繰り返し表示する)
    • each-box (行ごとに背景画像を繰り返して表示する)
    • continuous (前の行の繰り返しを引き継いで背景画像を表示する)
  • -moz-box*

    [使い方] display: -moz-box;

    この display を指定された要素内のブロック要素(p や div など)は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。

  • -moz-box-flex

    [使い方] -moz-box-flex: 1;

    display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。(flex は "フレキシブル" の意味です)
    (※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。

    つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。

  • -moz-box-ordinal-group

    [使い方] -moz-box-ordinal-group: 1;

    display: box 内に配置されたブロック要素に指定します。
    指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
    (HTML の記述順序に関わらず出現順序を変更したい際に使用します)

  • -moz-box-sizing

    [使い方] -moz-box-sizing: content-box [,border-box];

    ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。

  • -moz-transform

    [使い方] -moz-transform: rotate(45deg);

    詳細については -webkit-transform を参照してください。

  • -moz-transform-origin

    [使い方] -moz-transform-origin: X Y;

    transform の基準点を指定します。

Opera 系

  • Multiple backgrounds
  • -o-background-size

    [使い方] -o-background-size: 50% 50%;

    背景画像のサイズを指定します。横 縦の順で記述します。

  • background-origin

    [使い方] background-origin: padding;

    上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。

    • border (ボーダーまで含めたボックスサイズで算出)
    • padding (パッディング領域まで含めたボックスサイズで算出)
    • content (コンテンツ領域のみのボックスサイズで算出
  • background-clip

    [使い方] background-clip: padding-box;

    背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。

    • padding-box (padding のエッジから開始)
    • border-box (border のエッジから開始)
  • border-radius

    [使い方] border-radius: 10px;

    ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
    CSS Backgrounds and Borders Module Level 3 が勧告候補になったため、Opera10.50 では -o- のプレフィクスがなくても動作するようになっています。

  • border-image

    [使い方] border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;

  • box-shadow

    [使い方] box-shadow: 2px 2px 3px #999;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
    現在は W3C の CSS3 の草案からは一端消去されている仕様となります。
    また、まだ草案の段階ですが Opera ではベンダープレフィクスが取れています。

  • text-shadow

    [使い方] text-shadow: 2px 2px 5px black;

    左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。

  • -o-transform

    [使い方] -o-transform: rotate(45deg);

    詳しくは -webkit-transform を参照してください。

  • -o-transition-property

    [使い方] -o-transition-property: color, background-color;

    transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。

  • -o-transition-duration

    [使い方] -o-transition-duration: 0.5s;

    transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。

  • -o-transition-timing-function

    [使い方] -o-transition-timing-function: ease-in-out;

    transition の変化の具合を設定します。指定できる値は以下の通りです。

    • default
    • linear
    • ease-in
    • ease-out
    • ease-in-out
    • cubic-bezier() 4つの数字をカンマ区切りで指定

その他

  • rgba

    [使い方] background-color: rgba( 0,0,0,0.5 );

    透明度を持った色を設定します。左から RGB 値を指定し、最後に 01 の間で透明度を指定します。(0 で完全な透明になります)

参考にした記事

builder by ZDNet Japan より

The Art of Web より

装飾用divを劇的に減らせるCSS3プロパティとテクニック

2009年6月20日 09:55

div イメージ

以前の記事の HTML5で組んでみた に続いてサンプルがまったく一緒ですがw
タイトルの通り、HTML5+CSS3 を使ってできるだけ無駄な HTML 要素(主に div)を使わずにどこまで思い通りのデザインが実現できるか実験してみました。⇒[DEMO]

結果、使用した div はわずかに 3 つ。ちなみに実際のブログトップで使用している div を数えたところ、54 個も使ってました。(一概に減らせばいい、というものでもありませんが)n

ただし、今回の実験はまだ草案の段階のものなどを多く含んでいるため、またそれらに対応しているブラウザが webkit 系(Safari や Google Chrome など)のみということもあり、正常に表示されるのは webkit 系だけとなってます。n

無駄なHTML要素がどこまで減らせるか実験してみた デモ

今回の実験の説明

個人的にアツイと思った CSS3 プロパティ・値

  • border-image: ...
  • display: box
  • box-flex: 1
  • background: ...
  • box-shadow: ...
  • box-sizing: border-box

CSS3 の草案で定義されているプロパティなどについては、各ブラウザで先行実装しているCSS3プロパティまとめ でまとめています。n

簡単に説明すると、n

HTML5 の新要素により、div を使う機会が減った

まず、header 要素や footer 要素、nav 要素など、今までは<div id="header">などとして定義していた箇所が、そのまま要素名として使えるようになったため、div を使う必要がなくなりました。n

border に画像が使用できる「border-image」

ひとつの画像を指定した値で区切って上下左右、それからボックス四隅へ適用するプロパティです。これのおかげで、ひとつのボックス要素にこれを指定するだけで、角丸などの複雑な囲みでも簡単に実装することができます。n

つまり、これを ul 要素などに使えば、装飾用に新しく div を追加する必要がなくなる、というわけです。n

簡単にカラム同士の高さを揃えられる「display: box」

こちらはプロパティではありませんが、CSS3 で新しく定義されている display プロパティの新しい値です。
display: box を指定された要素の子要素であるブロック要素は、自動的にカラム配置となり、さらにどのカラムも最大の高さを持つカラムに追従して高さが確保される、という特徴があります。n

そのため、メイン・サブカラムの高さを揃える JS を使ったり、はたまた背景を使ったトリッキーな方法で高さを揃える、という必要がなくなるため、これもまた div 要素を削る要因となります。n

それのおかげで、div をほとんど使わずにサンプルの左右のカラムの高さがそろっている、というわけです。n

背景画像を複数指定できるようになった CSS3

現在策定中の CSS3 では、背景画像を複数指定することができるようになりました。
指定したい数だけ、カンマ区切りでそれぞれ指定します。n

上のようにカンマ区切りで指定すると、それぞれの配置や繰り返し内容を列挙することができます。n

これにより、アイコンと画像ボーダー、のように複数の画像を指定することが可能なため、余計な div などの要素を追加する必要がなくなります。n

100% の要素内でも固定幅を持ったように要素を配置するテクニック

ここの気づきも、div を減らす要因になりました。
以下の HTML と CSS を見ていただくと分かりますが、heade 要素は横幅 100% に設定されているにも関わらず、内包している h1 などの要素がメインのコンテンツと同じ 830px の幅に収まっています。n

このテクニックの肝は、float,position,marginの 3 つです。n

設定する値は上記を参考にしてもらうとして、なにをやっているか、を説明すると、float させた要素に対し、position: relative を指定します。n

こうすることで、続く left などの値が反映されるようになります。
そしてこの left に 50% を指定すると、指定された要素の左端は画面中央に来ます。n

最後に、margin にマイナス値を設定し、数値をコンテンツ幅の半分に指定することで、まるでコンテンツ幅が固定されているような位置に配置される、というわけです。n

つまり、いったんコンテンツを画面中央に移動させたのち、マイナス方向に要素を移動することで、意図した固定幅の範囲にコンテンツが収まるようになる、というわけです。n

今回のサンプルでは、RSS feed のアイコンが右側にあるので、同じように左右を入れ替えて値を設定すれば、右寄せにコンテンツが表示される、というわけです。n

まとめ

以上の、border-image,background,display: boxと、HTML5 の新要素、および上記のテクニックを使うことによって 54 個も使っていた div を、3 つまでに抑えることができました。n

まだ CSS3 の草案段階のプロパティだったりしますが、早くすべてのブラウザに実装してもらいたいものですね。n

CSS3の数行で作る簡単な3カラムレイアウト

2009年1月 6日 13:12

CSS3で作る3カラムレイアウト

今回は久々に CSS ネタを書いてみようと思います。
最近(自分の中で)注目度の高い CSS3 のネタです。

実用的になるまではまだまだ先の話だと思いますが、CSS3 になるとやたらと簡単にレイアウトができるので面白くてサンプルを作ってみました。

CSSだけでアニメーションプルダウンメニューを作る

2008年8月19日 18:37

前回のエントリーに引き続き、-webkit-transition を使ってアニメーションの CSS について書きたいと思います。
-webkit-transition のアニメーションについては前回の記事 CSS3はアニメーションも指定できる! を参照ください。動画キャプチャ入りで簡単に説明してます。n

今回は、-webkit-transition を使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。n

とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
(※実際のサンプルは、webkit 系が実装している CSS3 を使用しているので、Safari か webkit 以外で見ると、通常のプルダウンメニューになります。また、IE6 では動作しません)n

実際に動いている動画サンプル

CSS3はアニメーションも指定できる!

2008年8月10日 00:34

すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。

先日、CSS Reloaded というイベントに参加してきました。
そこでは CSS3 の可能性を示唆していました。

内容としてはとても刺激的で、将来、現在ある JavaScript ライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。

ただ問題点として、対応ブラウザが webkit 系(Safari、Google Chromeなど)しかないこと。
また、正式に CSS3 として勧告されているわけではないこと(今 Safari でできることが実装されない可能性)。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。

ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3 について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通り Safari でしか実行できないため、サンプルを見る際には Safari で見てください。(Safari のダウンロードはこちらから

実際に動いている動画サンプル

:target擬似クラスを使ったプルダウンメニュー

2008年2月15日 11:33

RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。n

:target擬似クラスを使ったプルダウンメニューデモ

内容は、:target 擬似クラスを使った、windows のメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavaScript なしで CSS のみでやってしまおう、というのが今回の主旨。n

前の10件 1  2