CSSでトランスフォーム：変形処理「transform」の基礎 - builder by ZDNet Japan
ウェブページに表示した文字や画像を回転したり、歪めたりすることができれば便利なのに――そう考えたことはないだろうか。CSSのトランスフォームの機能を利用すれば、「回転」「拡大・縮小」「スキュー（シアー）」「移動」の4種類の変形処理を簡単に適用することができる。 トランスフォームの機能を利用する トランスフォームの機能を利用するには、transformプロパティを利用する。現時点ではSafari 3.1以上とGoogle Chrome、Firefox 3.1（ベータ版）が対応しており、SafariとGoogle Chromeでは-webkit-transform、Firefoxでは-moz-transformと記述する。 たとえば、次のようなサンプルを用意してトランスフォームの処理を適用してみよう。ここでは、横幅300ピクセルの黄色いバーの中央に文字を表示している（サンプル01）。
CSSでトランスフォーム：1つの要素に複数の変形処理を適用する - builder by ZDNet Japan
前回の「CSSでトランスフォーム：変形処理「transform」の基礎」に続いて、CSSのトランスフォーム（変形処理）の機能について紹介していきたい。 トランスフォームの設定はtransformプロパティで行うが、Safari 3.1以上とGoogle Chromeでは-webkit-transform、Firefox 3.1（ベータ版）では-moz-transformと記述する。現在のところ、それ以外のブラウザではサポートされていない。 複数のトランスフォームを指定する 前回は「回転」「拡大・縮小」「スキュー（シアー）」「移動」のトランスフォームを個別に適用する方法を紹介したが、1つの要素に複数のトランスフォームをまとめて適用することも可能だ。 たとえば、次のようなサンプルを用意して複数のトランスフォームを適用してみよう。ここでは、横幅300ピクセルの黄色いバーの中央に文字を配置して、画
CSSの:target擬似クラスによるクリックで開くフッター - os0x.blog
予備知識として、target擬似クラスと、そのメニューへの応用についてはCSS 3のセレクタ解説：:root、:not、:empty、:target - builderとCSS 3のセレクタ「:target」でタブメニューをつくる - builderが良記事だと思うのでそちらを。 で、今回の場合はさらに応用を利かせて、クリックしたら開いて、もう一度クリックしたら閉じるようにしてみました。まあ、要はコントローラー部分をtargetの中に入れて、targetの状態によって、表示されるアンカーが変わるようにしただけです。(↓↓の「カレンダー、最近の記事、コメント、トラックバックを見る」というアンカーをクリックしてみてください。(アンカーテキストが冗長過ぎる感じだけど、スペース余ってるしわかりやすいからこれでいいや。)) #blogfooter{ position:fixed; bottom:0p
Safari 4が対応したCSSの新機能：グラディエント、反転、マスク - builder by ZDNet Japan
Safari 4（ベータ版）では、レンダリングエンジンのWebKitが採用したCSSの新機能「グラディエント」「反転」「マスク」を利用できるようになった。本連載で紹介したトランスフォーム（回転、拡大・縮小、スキュー、移動）の機能と合わせると、これまではグラフィックソフトが必須だった処理の多くをスタイルシートだけで実現できるようになる。 今回は、これらの機能がどのようなものなのかを簡単に紹介したい。 CSSでグラディエント、反転、マスク 次のサンプルは「グラディエント（Gradient）」「反転（Reflect）」「マスク（Mask）」のそれぞれの機能を利用して、Safari 4（ベータ版）で表示したものだ。左から順に、背景をグラデーションカラーで表示したもの、テキストと画像を反転させたもの、画像の輪郭をマスクでぼかしたものとなっている。
jQueryでアコーディオンを設定する際の注意
jQueryでアコーディオンを設定する際の注意 ネタ元：jQuery.js トピックのしつもんの89 アコーディオンを設定する際に動作がカクカクすることがあります。 サンプル この対応方法はアニメーションを設定したい要素にCSSなどでheightを与えてあげれば大丈夫です。 高さが可変でCSSでheightを設定できない場合は以下のようなコードを追加します。 $("dl dd").each(function(){ $(this).css("height",$(this).height()+"px"); }); サンプル アニメーションを設定する場合はheightを指定、これ重要です。 リキッドレイアウトの場合 リキッドレイアウトの場合heightを固定してしまうとウィンドウサイズを小さくした場合、ウィンドウが拡張されませんね。 その場合は以下のclickイベントの最初で高さを指定しておき
jQueryでブロック要素の高さを揃えてみる - 徒書
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
jQuery Selectors
Toggle Button = $('selector').addClass('highlight').animate({ marginLeft: 10}, 'fast'); Download This Lab This is a paragraph, which means it is wrapped in <p> and </p>. Those "p" tags in the previous sentence are formatted as <code>. This is the first list item (<li>) in an unordered list (<ul>). This is the second list item. It has a link in it. This is the third list item. It has a class of "my
名古屋グランパス公式サイト
名古屋グランパスの公式サイトです。ニュース、試合、チケット、選手・クラブ、スタジアム、ファンクラブなどの情報をご覧いただけます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
seofromusa.com