画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
画像やパネルのホバー時に、CSS3アニメーションを使った気持ちのいいエフェクトを実装するチュートリアルをまとめました。
iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。PhoneGapみたいにWebAppをネイティブにパブリッシュするツールや、Titanium MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。 iOS4までのMobile SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。 先日公開されたiOS5では今まで「なんで使えないの？」といったところが少し修正されて、
Google Chrome、Safari、Lunascape Webkitなど、Webkit系ブラウザで利用できる::-webkit-scrollbar擬似要素に関する覚え書きです。 これはその名の通り、スクロールバーをデザインするときに使います。 基本的な説明はSafariのブログに書かれていますので、そちらを参考にしました。 また、この記事で説明に使っているキャプチャ画像は、Safariのデモページのものです。 Surfin’ Safari - Blog Archive » Styling Scrollbars スクロールバーのパーツを構成する擬似要素これらを指定するときにはWebkit用のベンダープレフィクス-webkit-を忘れないようにしましょう。 ::-webkit-scrollbarwidthで縦スクロールバーの幅、heightで横スクロールバーの高さを指定します。 パーセン
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。 シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。 今回もJavaScriptは一切、使用していません。 完成したサイト ID, classなしで組んだサイトを見る。 サイトでやってみたHTML5 HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。 省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。 サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結
With all the cool things that surround JavaScript (especially with jQuery), it’s easy to forget that it’s possible to push pure CSS (with a touch of HTML) into an all singing and all are dancing interactive site, with absolutely no scripting at all. The pure CSS techniques, outlined in this article, are neither new nor are they groundbreaking. What they do offer is CSS solutions to what would trad
ウェブページを表示するブラウザのウィンドウサイズは、閲覧環境によってさまざまだ。特定のウィンドウサイズを想定してウェブページを作成すると、それ以外の大きさのウィンドウではコンテンツが読みづらくなるなどの問題が発生する。最近ではiPhoneのような携帯端末からのアクセスも考慮する必要性が出てきているが、サイズ別にページを用意するのは制作にも管理にも手間がかかってしまう。 こんなとき、CSS3の「Media Query（メディアクエリ）」の機能を利用すれば、ウィンドウサイズに応じて適用するスタイルシートを切り替えて、ユーザーの環境ごとに最適なデザインでページを表示することができる。 現在、Media Queryの規格はW3Cの勧告候補（Candidate Recommendation）となっており、Firefox 3.5以上、Safari、Google Chrome、Operaが対応している。
CSS3 Dropdown Menu 次のようなCSS3を使ったMacライクでクールなドロップダウンメニュー「CSS3 Dropdown Menu」が公開されてます。 CSS3をサポートしないブラウザでも角丸がかからないだけで綺麗に表示されるようです。 デモページはこちら。 クオリティがとても高いですね。 ヘッダーナビゲーション等に使うといい感じかもしれません。 関連エントリ クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ 複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」 jQueryで幅の大きなドロップダウンメニュー作成チュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く