描画とかGPUアクセラレーションの怪 (モバイル編)
何かと不透明なあたり 気がつけば一ヶ月ほどブログを更新していませんでした。リハビリ記事です。 今回は、GPUを効かせる == それに関連するプロパティ（ただしOSやバージョンによって何がトリガかは厳密に異なる）を適用したら挙動が改善した、というようなノリの体験TIPSをゆるくまとめました。 このあたりの振る舞いについては、描画パフォーマンスの問題として、それなりに明らかになってきているように思います。WebKitのレンダリングプロセスにはじまり、GPU命令のサポートが受けられるのはどんな操作だとか、GPUへ処理が預けられるレイヤーの生成がどーとか、最近よく見聞きします。 自分が業務で扱っているスマートフォン向けのWebサービスでは、このような描画パフォーマンスの問題は、スクロールパフォーマンスと合わせて非常にクリティカルです。この辺りについてのロジカルなまとめは、某氏が近日中にまとめるらし
Styling Form Controls – WebKit
Styling Form Controls Using Pseudo Classes WebKit provides a way to give CSS styles to form controls. Some form controls can be styled through pseudo classes. This article will illustrate how we can customize their appearances using the pseudo classes. Note: These pseudo classes are not standardized and we might change the behavior in the future. <progress> By giving "-webkit-appearance: none;", <
iOS・Androidのハイライト表示の指定について。
今回は iOS・Androidのハイライト表示の設定について 紹介します。 （以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ） リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。 CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS３を使ったハイライト表示の指定 まず、CSS３でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co
『半透明のアイツ。iPhone用CSS"-webkit-tap-highlight-color"』
珍しくコーディングの話でも書いてみる。 おひさしぶりです。たすくです。 注：今回の記事は、iPhoneやiPadで見ないと何の意味もないです。笑 最近、ひょんなことから、iPad向けのコーディングをする機会ができまして。 CSS3がガッツリ使えるので、ニヤニヤしながら作ってるんですが、 どうもボタンがキレイに見えない。 例えば、こんなボタンがあったとするじゃないですか。 テストボタン1 （CSSだけで書いています） でもね、 iPhone/iPadでクリックする瞬間、一瞬半透明の黒いのが出てくるんですよ。 おいあんた、そりゃねーぜ。 せっかくキレイにボタン作ったって、そんなんじゃちょっとイヤですよワタシ。 こんな見た目じゃJSで色々やらせたりできないっすよ。 そこで色々調べた結果、iPhone/iPad用にこんなCSSが用意されてるらしいことを発見。 -webkit-tap-highlig
FACEs: CSS3のアニメーションプロパティを動的生成するJavaScript
CSSのアニメーションプロパティでキーフレーム指定が面倒なので、動的に指定するJSを用意しました。 動作確認環境は、Chrome、Safari、MobileSafariです。 直接記述して指定する場合 マウスオーバーすることで、赤色から緑色に変わります。 直書きなので動的に色を変更（キーフレーム指定）するようなアニメーションは出来ません。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>demo-1</title> <style> div#demo1 { width :50px; height:50px; border:1px solid #000000; background-color: rgb(255,0,0); } div#demo1:hover { -webkit-animati
ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り
yamaokaです。 だいぶiPhoneやAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。 ただし、今回はiPhone向けです。 タップされた場所をハイライトする iPhoneのSafariでは「-webkit-tap-highlight-color」という拡張された属性があり、タップされた箇所に色を付けることができます。CSS3ではRGBaによる色指定ができるので、半透明の色を指定すればタップされた箇所をわかりやすく示すことができます。例えば、-webkit-tap-highlight-color:rgba(255,0,0,0.40);と指定すると薄い赤色を付けることができます。「outline:none;」と併せてリンク文
search 型 input 要素 のスタイルをリセット - terkel.jp
HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基本的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
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.
FirefoxのWebGLのサンプルが公開されたので動かしてみた - 強火で進め
(11/03/22 追記) WebGLのサンプルをお探しの方はこちら。 (10/02/25 追記) WebGLの関数名などの変更によりブラウザのバージョンによっては動作しない可能性があります。 WebGLのサンプルが動作しなくなった - 強火で進め http://d.hatena.ne.jp/nakamura001/20100224/1267028558 前回のエントリーでFirefoxにWebGLが実装されたと紹介したのですが前回は残念ながら動作しませんでした。 Firefox Nightly BuildsでFirefoxにもWebGLが実装された？ - 強火で進め http://d.hatena.ne.jp/nakamura001/20090920/1253417113 今回、こちらでサンプルが公開されたので早速試してみました。 WebGL Samples/Demos and othe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SoHaya.com is for sale | HugeDomains