[CSS]アニメーションも気持ちいい！フォーカスがはずれてもキープされるパネルを表示するスタイルシート
ボタンをタップ・クリックすると、素敵なアニメーションでソーシャルメディアのボタンを配置したパネルが表示され、フォーカスがはずれてもそのままパネルがキープされるスタイルシートのデモを紹介します。 デモページ HTML HTMLはシンプルで、リストで各ソーシャルメディアのボタン、チェックボックスでパネルの開閉をコントロールします。 <div id="content"> <input type="checkbox" class="checkbox" id="share" checked> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter"></li> <li class="entypo-facebook"></li> <li cla
[CSS]デスクトップ・スマフォ・タブレット向けの美しいUIエレメントを簡単に実装できるスタイルシート -TopCoat
クリーンなHTMLを使い、レスポンシブを念頭においたUIエレメントを簡単に実装できるオープンソースのライブラリを紹介します。 TopCoat TopCoat -GitHub TopCoatのセットアップ 当スタイルシートを外部ファイルとして配置するだけです。 <link rel="stylesheet" type="text/css" href="css/topcoat-desktop-min.css"> TopCoatのスタイルシートは2種類あり、デスクトップ用（24KB）、スマフォ用（20KB）となっています。 それぞれのデモを見てみましょう。 TopCoat for Desktop TopCoat for Mobile TopCoat for Desktop デスクトップ用のデモです。 デスクトップでご覧ください。 TopCoat for Desktop
[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。 色によっては、蛍光ペンや絵筆みたいにもできますね。 デモページ ※リンク切れ 実装は、こんな感じです。 HTML 要素はdivだけ、入れ子もラッパーも必要ありません。 <body> <div> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </body> CSS 落書き風のボーダーを実現しているのは、border-radiusです。 スラッシュで区切ることにより、水平
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
モバイルサイトマークアップ5つの小技 : LINE Corporation ディレクターブログ
こんにちは。10月の組織編成でブログビジネス部に異動になりました飯田です。 普段はディレクターしてますが、時にモバイルサイトのマークアップをするときがあります。以前、こちらのエントリーでモバイルサイトを作るうえでのノウハウを紹介していますが、本エントリーではもう少し実践的な「モバイルサイトで○○を表現するには」をすごく簡潔に紹介してみたいと思います。 ある程度の端末で正常に表示されることを確認していますが、一部を除いて正常に表示されない場合もありますがご了承ください。なお、本エントリーで紹介している記述はわかりやすいように style 属性を全てインラインで記述しています。 見出しに背景色 div タグXHTML 対応の端末であれば下記のタグで簡単に見出しに背景色をつけることができます。 <div style="background-color="#0000ff;">ほげほげ</div>
CSS3・HTML5のブラウザ対応状況一覧 – creamu
Deep Blue Skyというサイトで、CSS3・HTML5のブラウザ対応状況一覧がまとまっています。 自分のブラウザのCSS3・HTML5対応状況を調べてくれるjavascriptライブラリ、Modernizrを使って調べたようですね。 ↑はMac Firefox3.5。ちょっと残念な感じですね。。 対応状況は以下のようになっています。 Internet Explorer 6, 7 & 8 Firefox 3.5 (Win) Google Chrome (Win) Opera 10 (Win) Safari 4 (Win) Safari 4が一番優れていますね。IEがひどいことになっている。。。 詳しくは以下からどうぞ。 Browser support for CSS3 and HTML5 姉妹サイトである以下のサイトでは、自分のブラウザの対応状況が見られます。IPとかも調べられますよ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
