新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

CSS3でプルダウンメニューと可変角丸囲み

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

今度のCSSはとってもすごいらしい。
なんと、今までFlashでしか実現できなかったアニメーションによるプルダウンメニューができるらしいのだ。
CSSだけでアニメーションプルダウンメニューを作る | CSS-EBLOG
サンプルへのリンク

スポンサーリンク
 

ところが、実際は現状webkit系ブラウザ(SafariかGoogle Chrome)でしか動かないらしい。
CSS3はアニメーションも指定できる! | CSS-EBLOG

問題点として、対応ブラウザがwebkit系(Safari)しかないこと。
また、正式にCSS3として勧告されているわけではないこと(今Safariでできることが実装されない可能性)。
などがあります。

そこでCSS3を検索してみると。

[Think IT] 第3回:CSS3では何ができるのか? (1/3)

HTML 5の正式勧告である2010年を目処に、このCSS3も徐々に普及し始めるのではないかと思われます。

2010年というともう、そんなに先の話ではないような気もします。
そして、同じ記事の中にCSS3のさらなるすばらしい仕様が紹介されています。

[Think IT] 第3回:CSS3では何ができるのか? (3/3)

 実は「-webkit-border-image: url(waku.png) 18 18 18 18 round round;
」を追加することによって、可変式のボーダーを作れるのです。4隅が18pxに固定されて、それ以外の部分が中身の大きさによって伸びます(図3)。これは本当に便利ですよね!

なんと、夢にまで見た可変の角丸囲みが実現するようなのです。

プルダウンメニュー、可変の角丸ともに現在Safari3.1でのみ実装されているそうなので、
今度機会があったら調べてみたいと思います。
もしかしたら、同じwebkit系なのでGoogle Chromeでも実装されているかもしれません。

参考
プルダウンメニュー : 地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

 - デザイン, ユーザビリティ

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Togetter(トゥギャッター)とTwiccha(ツイッチャ)でつぶくま会のオンライン会議を実行 (9/20追記)

1年以上前の記事です。内容が古い可能性があります。今月は忙しくてオフラインでの会 …

Google+からツイッター、Facebookへ同期。「Plusist」

1年以上前の記事です。内容が古い可能性があります。個人的にはツイッターメインなの …

空飛ぶ自動車「AeroMobil」が2017年に販売開始。多分日本じゃ買えないと思う

1年以上前の記事です。内容が古い可能性があります。なんと、映画の世界だけだと思っ …

InDesignCS2で表スタイルを使う方法

1年以上前の記事です。内容が古い可能性があります。インデザインCS3とインデザイ …

日本はいつ?Facebook(フェイスブック)のグラフ検索でポスト本文が検索対象に

1年以上前の記事です。内容が古い可能性があります。日本ではなかなか始まるに至って …

「Internet Explorer 6」はまだ結構使われている

1年以上前の記事です。内容が古い可能性があります。株式会社サムライファクトリーか …

「iPad」で「Windows 7」、「Word」「EXCEL」等がクラウドで使える

1年以上前の記事です。内容が古い可能性があります。日本ではまだ使えないようだが、 …

IEでの確認が簡単にできるフリーソフト(IETester)

1年以上前の記事です。内容が古い可能性があります。そのうちいなくなるのでしょうが …

no image
Appleが開発しているGoogleマップに変わる新しい地図システムが凄い

1年以上前の記事です。内容が古い可能性があります。インターネットで地図というと「 …

長く使って遅くなってきたFirefoxを速くする方法 (5/11追記)

1年以上前の記事です。内容が古い可能性があります。ちょっと前からメインのブラウザ …

血液型オヤジ