safari4 betaで実装されたCSS Animationを使ってみました。
こんにちは。橋本です。 さて、今日は先日公開されたsafari4 betaで実装されたCSS Animationを使ってみたいと思います。（今回のサンプルはsafari4 beta、もしくはwebkitのnightlyビルドを使ってご覧ください） CSS Animationとは何かと言いますと、文字通りCSSを使ってAnimation効果を表現する技術です。 まずこちらをご覧ください。 Falling Leaves 'Using CSS Animations and Transforms これはwebkitの公式blogで紹介されていたサンプルなんですが、この美しく舞う落葉のアニメーション効果は全てCSSで定義されています。 では実際にどのようにアニメーション効果を定義するかを見ていきたいと思います。 まず、以下のように、キーフレームを定義します。 キーフレームの定義は、「@-webkit
hxxk.jp - DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )
DOCTYPE スイッチについて再度まとめ 以前 DOCTYPE スイッチについての検証とまとめと一覧表という記事で DOCTYPE スイッチについてまとめましたが、あれから 2 年弱が経過したので、改めてまとめてみようと思います。 まとめるまでの話がけっこう長いので、一覧表だけ参照したい ! という場合は DOCTYPE スイッチの一覧表をご覧ください。 DOCTYPE スイッチとは何か そもそも DOCTYPE スイッチとは何か、というのがまず書くべきところですが、これは私が書かずとも良質のリソースが各種ありますのでそのリンクのみまとめておきます。 !DOCTYPE スイッチ 各UAのDOCTYPEスイッチについて - CSS Dencitie Mozilla's DOCTYPE sniffing - MDC Mozilla's DOCTYPE sniffing - MDC ( 日本語
Safariでページを反転させるブックマークレット | 秋元@サイボウズラボ・プログラマー・ブログ
Ajaxianに出てた。Safariブラウザだけの機能。 -webkit-transform に ‘rotate(180deg)’ を与えると、180度回転したページが表示される。 javascript:document.body.style[‘-webkit-transform’]=’rotate(180deg)’; リンク先に、ブックマークレットが置いてある。flip2は確認を挟んで180度回転。 180deg, ってことは任意の角度でもいけるのかな、と20degを入れたら、こうなった 貼り付けたビデオプレイヤーは元の角度のままだったり、範囲選択がなんかカクカクしたりと新鮮で面白い。斜めにすると横幅が広くなるけど、横スクロールバーはでないなあ。 これ少しずつ値を変えたら、ページがぐるぐる廻せそうだね。 この記事は移転前の古いURLで公開された時のものですブックマークが新旧で分散している
WebKitのデバッガが超絶便利になっている件 - os0x.blog
WebKitのデバッガはDroseraという別アプリで提供されていましたが、つい最近(2008/05/16)本体とセットになるようになりました。 このデバッガがヤバイです。(画像でかくて自分のモニタでもはみ出してるけど気にしない) 開発のWebインスペクタを開いてから、Scriptsを選択するとDebuggerを起動するか聞かれる Attach Debuggerをクリックすると左上に読み込んでるScriptがリストになっている。(eval script)となっているのはGreaseKitが実行するScriptの模様。 GreaseKitのScriptもちゃんとソースが見えるし、 左下の蟻アイコンが青くなっているとエラー(?)のあった箇所でPauseする。右上にPausedと出ていて、この左のボタンでステップ実行とかが出来る。 右側にはローカル変数とクロージャで保持されている変数がスコープご
速度で選ぶ次世代ブラウザー IE 8だけじゃない (1/4)
ウェブサービスが重い！ ボトルネックはブラウザー!? 「mixiが重い」 1～2年ほど前から筆者の周りで聞くようになった言葉である。たしかに以前はアクセス過多のせいで表示が遅かったけれど……と、気が付けば重いのはmixiだけではない。「Google Docs」も、「Gmail」も、「ヤプログ」も、「BIGLOBEメール」も重い。いわゆるWeb2.0系のサービスがみんな遅いのである。 その原因は、いわゆる「Ajax」などと呼ばれる最近のJavaScriptの流行にある。かつては「セキュリティー的に問題だからオフにするのが望ましい」とまで言われたJavaScriptだが、「Googleマップ」の成功以降、JavaScriptを使って動的なインターフェースを実現するのがトレンドになった。 このJavaScriptが行なっているのは、サーバ側でなくクライアント側、つまりブラウザーのほうでプログラム
CSS 3のbackground-sizeとbackground-break：FirefoxとSafariのCSS対応 - builder by ZDNet Japan
前回に続いて、CSS 3で追加された背景に関するプロパティを確認していきたい。 今回は、背景画像の大きさを指定するbackground-sizeと、インライン要素の背景画像の繰り返し方法を指定するbackground-breakを取り上げる。background-sizeにはSafari 3とOpera 9.5が、background-breakにはFirefoxが対応している。 なお、背景に関する規格については、CSS 3の草案CSS3 Backgrounds and Borders Moduleを参考にする。 背景画像の大きさを指定するbackground-size background-sizeは、背景画像の大きさを指定するプロパティだ。現在、Safari 3が対応しており、-webkit-background-sizeというプロパティ名で利用することができる。また、Opera 9.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
worldending.jp
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！