CSS で作るスマートフォン向け片手操作メニュー サンプル | WWW WATCH
記事に戻る CSS で作るスマートフォン向け片手操作メニュー サンプル ドコモのスマートフォン 「P-07C」 の 「タッチスピードセレクター」 からヒントを得た、片手で操作しやすいショートカットメニューを HTML、CSS と 簡単な JavaScript の組み合わせで作ってみたサンプルです。左下のメニューアイコンをクリック （タップ） してみてください。実際の動作を確認できます。 詳しくは記事 「CSS で作るスマートフォン向け片手操作メニュー」 をご覧ください。 動作環境 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 5 （iPhone 4S） Safari では動作確認しました。他のスマートフォンとか知らない （CSS の position:fixed に対応してないヤツだと動かない）。IE？何それ美味しいの？ その他 メニュ
CSS3のtransitionとtext-shadowで作る様々なリンク装飾
CSS3のtransitionとtext-shadowでオンマウス時のリンクを楽しく装飾してみます。すべてのリンクに使うとわずらわしいですが、タイトルロゴなんかだとこれくらい凝ってもいいのかなと思います。 transition（時間的変化をつける） hoverなどでスタイルが変化する際、通常はすぐに切り替わりますが、transitionを使うと時間をかけて変化するなど様々な設定をすることが可能になります。 適応するプロパティの「all」、変化の仕方「ease」、変化の始まるタイミングの「0」は初期値となるので省略しても大丈夫です。 transitionはFirefoxとwebkit系のChromeやSafariで先行実装されている機能ですので、-moz-や-webkit-などのベンダープレフィックス付ける必要があります。 text-shadow（テキストに影をつける） その名の通りテキスト
nth-child() 疑似クラスを試してみる | d-spica
nth-child() 疑似クラスを試してみる 2008-05-26 0 0 XHTML/CSS CSS, nth-child CSS3で定義される nth-child() 疑似クラス。これが使えるようになると，HTMLファイル，CSSファイルのメンテナスが楽になるだろうな...と思うのです。 どんな具合か，ちょっと試してみました。 nth-child() 疑似クラスとは 英文ですが，詳細は以下から。W3Cの Working Draft（草案）ですので，今後変更されることがあるかもしれません。 Selectors - 6.6.5. Structural pseudo-classes - :nth-child() pseudo-class その要素が何番目の子要素かによって，該当するものにだけ，CSSをあてることができます。 たとえば，セレクタにul li:nth-child(2n)，または
Mobile Safariでビットマップ画像をrotateすると荒れるのを回避する - inkdesign
23 Jan 2013 WebkitもといMobile Safariで、ビットマップ画像をtransform: rotate(deg)したときにフチがジャギー出てしまう現象についてのお話。とりあえず、iPhone+iOS前提で説明していく。 transform: rotate(10deg)みたいな半端な角度でrotateさせたときに確認できる。 transform: rotate(45deg)単位の場合にはこのようなジャギーはほぼ無い。ちなみにWebkitとタイトルにあげたが、新しめのデスクトップのGoogleChromeやSafariでは、中途半端な角度でもジャギーは見られない。古いものだとジャギーが出るはず。正確なバージョンで確認できていないが、それも今回の方法で解決するかもしれないし..しないかもしれない。 デスクトップの話はさておき、Mobile Safariとしての話に戻る。 結
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ultimate CSS Gradient Generator from ColorZilla
