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でも実装されているかもしれません。
アドセンス広告メイン
関連記事
-
-
フリー素材紹介記事まとめ ver.2 【無料】
1年以上前の記事です。内容が古い可能性があります。様々なフリー素材を配布している …
-
-
ツイッター(Twitter)のつぶやきをRSSで読む方法 (6/2追記)
1年以上前の記事です。内容が古い可能性があります。はてなブックマークのホットエン …
-
-
ツイッター(Twitter)のスマホサイトがアプリに近くなっていた
1年以上前の記事です。内容が古い可能性があります。いつから変わったのかは知りませ …
-
-
ツイッターアカウントで目にする逆英字(ɐsıɹoN)の作り方
1年以上前の記事です。内容が古い可能性があります。ツイッターのユーザー名に普通と …
-
-
Instagram(インスタグラム)→Flickr(フリッカー)→Twitter(ツイッター)の連携方法
1年以上前の記事です。内容が古い可能性があります。「僕のInstagram(イン …
-
-
「Google Chrome」の画像検索がとてつもなく簡単になっていた
1年以上前の記事です。内容が古い可能性があります。これはいつからなのでしょうか? …
-
-
日本はいつ?Facebook(フェイスブック)のグラフ検索でポスト本文が検索対象に
1年以上前の記事です。内容が古い可能性があります。日本ではなかなか始まるに至って …
-
-
Foursquare(4sq)とFacebook(フェイスブック)を連携させる方法
1年以上前の記事です。内容が古い可能性があります。Facebook(フェイスブッ …
-
-
これは使える!LINEで友達の名前(表示名)が編集できるようになってた
1年以上前の記事です。内容が古い可能性があります。かみさんがケータイをスマホに変 …
-
-
ファミコン版Googleマップ登場。ドラゴンクエストの竜王も
1年以上前の記事です。内容が古い可能性があります。Googleマップで冒険に出よ …
- PREV
- クリック率を上げるキャッチコピーのコツ
- NEXT
- 青少年が閲覧しても問題ないサイト追加







