[ZB] CSS3のトランジション（transition）をコピペでどーぞ。 - ZAWABLOG
transition効果で時間差表現 使えるブラウザがまだ少ないけど、transitionプロパティを使えばかなりリッチな表現が出来ちゃいます！ マウスオーバーで動かしたり、色をじわ〜っと変えたり、消したり。 jQueryもFlashも使わずにCSSだけでできちゃうぜー！ コピペして、値をいろいろいじくって覚えちゃいましょう！ ※スマートフォンでの閲覧は、うまく表示がされない場合があるのでできたらPCで閲覧してください。 使えるブラウザを確認しよう。 こんな便利なtransitionプロパティですが、まだまだ使えるブラウザが限られてます。というかie以外で使えます。 2013年現在は次のブラウザで利用可能です。 transitionプロパティは、Safari、Chrome、Firefox、Operaで使えます。 もし今、InternetExplorerで見てる方は、よかったら対応してい
Chrome、FF、IE等クロスブラウザで使えるブラウザキャプチャツール「qSnap」:phpspot開発日誌
qSnap Chrome、FF、IE等クロスブラウザで使えるブラウザキャプチャツール「qSnap」 単に画面をキャプチャするだけではなくキャプチャした画像にテキストを入れたり切り抜いたり編集した後に、サイト上にシェアしたりローカルに保存できるというもの。 サイト制作の共同制作ツールとして活用できそうです。 関連エントリ PHP,Ruby,Node.js等のサーバサイドのデバッグをChrome上で行える「Chrome Logger」 あらゆるRESTのテストが出来るWEB開発者用Chromeアプリ「Postman」 WEBページ構成ファイル保存と同時にリロードできるChrome拡張「Tincr」 CSS3でChrome風ウィンドウを作成するチュートリアル
Bootstrap 3 で何が変わるのかをまとめてみた
Twitter Bootstrap 3 の変更点概要 Bootstrap 自体の仕様だけでなく体制なども変更されるようです。 モバイルファースト twitter/bootstrap, twitter/bootstrap-server, mdo/bootstrap-blog（プライベートレポート）を twbs organization アカウントへ移行 サイトの URL を http://getbootstrap.com に変更 CSS はレスポンシブ用スタイルも含めて1ファイルにする IE7, Firefox3系 のサポート廃止 Glyphicon のフォント版を採用 Apache ライセンスから MIT ライセンスへ移行 *-wip ブランチの開発スタイルから 3.1.0-modal-revamp のような機能ごとのブランチに変更 過去バージョンのダウンロードにタグを使う コミュニティの
JavaScriptにおける引数や配列の要素数の制限について
JavaScriptにおける、引数や配列の要素数の制限について調べましたので、本エントリーで紹介します。 １．問題点 数万という、大量の要素をもつ配列を扱うJavaScriptプログラムを作りました。 <script> var foo = new Array('1','2','3','4','5'... ); // 数万の要素をもつ配列 </script> このプログラムをGoogle Chromeに読み込ませると「Uncaught SyntaxError: Too many arguments in function call (only 32766 allowed)」というエラーに遭遇しました。 ２．原因 これはブラウザのJavaScriptエンジンに依存する制約のようです。対処方法はないようなので、この範囲を超えない実装に変更する必要があります。 次の部分でこの制約にひっかかることを
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
ボックスを上下左右画面中央に
ウィンドウを小さくした時に左上が見えなくなってしまうことに関する対処を追記しました。 何か、こういう立場のお仕事してる人とか、初心者のススメでFirefoxを使え！とかまずはFirefoxで確認すべしとか聞きますが、ボクはIE派です。 Firefoxに乗り換えようと頑張った時期もあったんすが、どーも合わない感じだったんすよね。 重さとかスクロールの仕方とかが、、、 だから確認もIEが先だったりします。 まーコレはボクのスタンスなんで、どーでもいいんすが。 ちなみにこのサイトのアクセス解析を見てると、IEとFirefoxの比がおおよそ、5:4っていう普通のサイトじゃありえない結果が出ます。こんなブログ書いてると当然っちゃ当然かもしれませんが（笑 さて本題にでも。 Tipsでも充実させたいと思ったので、特に目新しい内容ではございませんが、div要素とかのボックスを左右の中央、そして上下も中央に
scriptタグをdocument.writeで出力する場合の動作 - Backstage of theater.js
jsファイルの動的ロードはポピュラーな話題です。私も自分でdocument.writeで書き出したscriptタグが有効なのを見つけたときは驚きました。 これを利用してASPのincludeみたいなことができないかなと試行錯誤中ですが、どうも無理がある感じです。。。*1 原因の一つに、document.writeされたscriptタグの実行順序の問題があります。これはつまり、ページに書き込まれたタグの順番なわけですが、これがブラウザによって違う場合があるのです。 以下、サンプル。 [test.htm] <html> <head> <title></title> <script src="test1.js"></script> <script src="test2.js"></script> </head> <body onload="document.getElementById('tes
jQueryで画像のWidth,Heightを取得する。 - funxion
jQueryで画像のサイズを取得しようとしたらChrome,Safariで取得出来なかったからメモ。 Firefoxではこれで取得出来たのですが、(IE6以上、Operaもこれでオッケーみたいです。) $("img").width(); $("img").height(); ChromeやSafariではwidthもheightの値も0になります。 原因は画像を読み込む前に値を取得していることみたいです。 なので、 $("img").bind("load",function(){ $(this).width(); $(this).height(); }); 因みにbind()の使い方は $("hoge").bind("イベント名",function(){}); 詳しくはjQuery日本語リファレンスで。
CSSの小数点以下の数値を各ブラウザはどのように解釈するか
CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づらいかもしれませんが、我慢してください。 なお、これはどうレンダリングされるかなどは考慮していません。 その指定がどう解釈されるかだけを調べたものです。 指定した値についてですが、但し書きがない場合は1.5555555555です。 Percentageフォントサイズをパーセンテージ指定。
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
カラーツール「0to255」で色を決めてメニューを作ってみる
このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。 色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。 0to255の使い方 まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。 今回は「#ff7400」を指定してみます。 すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。 メニューの配色を決める ということで、以下のような配色でメニューを作ってみます。 メニュー背景のグラデーションと境界線の1pxラインに使う色を選ん
最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
画像不要！HTML5のCanvasでグレースケールのマウスオーバーが作れるチュートリアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ももこです。 HTML5の新要素であるCanvasを使って、グレースケールのマウスオーバーを実現するチュートリアルをご紹介します！ 現在CanvasはFirefox/Chrome/Safari/Operaなど殆どのブラウザの最新版で実装されています。 ■DEMOを表示 Javascript <script> $(window).load(function() { $('#gallery img').each(function() { createCanvas(this); }); function createCanvas(image) { var canvas = document.createElement('canvas'); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // キャンバスサイズを指
デフォルトスタイルシートから考える、リセットCSSの留意点 - kojika17
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://temog.info/archives/programming/jquery-ajax-crossdomain.html