CSS Property Advent Calendar 2013 14日目の記事。 明日は @watilde さん。 先日のHTML5 CONFERENCE 2013 の中で "CSS Regionsを使った新しいCSSレイアウトを作る方法" というセッションを聞いて依頼、CSS レイアウトが気になったので少し調べてみました。 今回は Flexible Box Layout, Multi-column Layout, CSS Regions, CSS Shapes を調べました。 各 CSS レイアウト の概要を書く際、Microsoft Developer Network の CSS セクション を参考にさせて頂きました。 参考サイトにデモが上げられているものが、こちらに関しては Google Chrome Canary 動作を確認しました。 また、Canary で各サイトのデモを確認
CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあります。背景色を指定しても発生することがあります。また、一部の子要素だけちらつくこともあります。ちなみに、CSS 2D Transformsを指定した要素でもちらつきが発生するときがあります。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」を指定 これがいちばん効果の高い対処方法です。ほとんどのちらつき問題が解消されます。2D Transformsには関係ないプロパティのはずなのですが、なぜか有効な対策です。 「-webkit-backface-visibility:hidden;」と「backface-visibility:hidden;」と「overflo
Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector. Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images fo
フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet" href="animate.css" /> エレメントにclassを付与 <p class="flash">Live long and prosper.</p> Animate.cssの実装 デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できま
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基本的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res
a要素に余白をpaddingで設定し、カラーを指定します。 a.foo { padding: 5px 10px; background: #9c3; } a.foo:hover { background: #690; } [ad#ad-2] 繊細なアニメーションを与えるスタイルシート CSS3 Transitionsを使用して、ふわっと繊細なアニメーションを与えます。 デモページ(当方作成) 追加するのは、L4-7です。 ※デモページではpaddingなどの値を若干変更しています。 a.foo { padding: 5px 10px; background: #9c3; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: al
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く