iOS Safariでhover状態を解除する方法 - jsdo.it - Share JavaScript, HTML5 and CSS
iOSではhover擬似クラスは clickイベント発火時に適用される。 しかし hover状態が解除されるには 他の要素のclickイベントの発火が必要で 普通の要素はclickイベントが発火しないため hover擬似クラスでドロップダウンメニューを作ると ドロップダウンを消すことができずに気持ち悪い。 そこで 全体を囲む要素等に空のonclick属性を付けてやると その要素内は適当にタップするとclickイベントが発火し ドロップダウンが消えてくれるようになる。 なおiOSではbodyはclickイベントの発生源にならないっぽく bodyにonclick属性付けても発火してくれなかった。 Androidは未検証。 直リンク http://jsrun.it/ksk1015/xBny <div class="container"> <h2>CSSでドロップダウンメニュー</h2> <ul
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
ジャストアイディアを素早く形にしていく。HTML5/CSS3デザインテンプレート·Perkins MOONGIFT
PerkinsはHTML5/CSS3のデザインテンプレート。多数のパターンに対応している。 PerkinsはHTML5/CSS3製のオープンソース・ソフトウェア。アイディアを思いついてすぐにコーディングにとりかかるが、Webデザインで詰まって投げ出してしまったという経験はないだろうか。デザインが今ひとつだと開発する気力までなくなってしまうというものだ。 2カラム 必要なのはある程度までパターンとして対応できる汎用的なテンプレートだ。それを実現するソフトウェアとしてPerkinsを紹介しよう。 PerkinsはHTML5/CSS3でデザインされたテンプレートだ。2カラムまたは4カラムのデザインで、ヘッダーやリスト、引用、コード記述、画像の回り込み、テーブル、フォーム、エラー（または通知）メッセージ、ボタン、角丸、傾き、細かく分けたブロックなどが用意されている。 リストなど さらに文字をアイコ
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント：一撃デザインの種明かし（15）（2/2 ページ） プログレッシブ・エンハンスメントでサイト作成のポイント 続いてプログレッシブ・エンハンスメントでサイトを作成するときに気を付けるポイントをまとめてみました。 CSS3プロパティにはベンダプレフィックスを付ける CSS3を用いる際、CSS3のプロパティには「-webkit-」「-moz-」などのベンダプレフィックスを付ける必要があります。これはW3C（Web技術の標準かを進める団体）で草案段階であるCSS3プロパティを、各Webブラウザが先行実装しているためです。 すでにべンダプレフィックスなしで実装されているブラウザも出始めていますが、しばらくはべンダプレフィックスを付けて指定することになるでしょう。 ベンダプレフィックスを付けると以下のようになります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
HTML 5 And CSS3 Cheat Sheets Collection