>> 
[FC2ブログ] Opera での CSS3 linear gradients についてのメモ
 >> 
[FC2ブログ] Opera での CSS3 linear gradients についてのメモ

スポンサーサイト

  • このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[FC2ブログ] Opera での CSS3 linear gradients についてのメモ

  • このエントリーをはてなブックマークに追加

[FC2ブログ] Opera での CSS3 linear gradients についてのメモ



このブログのブログテンプレート作成中のメモです。




[FC2ブログ] Operaでの CSS3 linear gradients についてのメモ

ブログテンプレートを変えましたが、配色などはほとんど変更せずタグなどを整理した感じです。気分を変えたかったため無計画ですが、CSS3 を使ってみたいという目的で行いました。



Operaでの CSS3 linear gradients についてのメモ

行き当たりばったりで CSS3 をいろいろ試した結果、最終的に「text-shadow」「linear-gradient」ぐらいしか残らないという残念な結果に・・・ CSS3 を盛り込む計画をしっかり立ててやれば良かったと後から反省。急に思い立ってやった事なのでいまのところは全体的にOKかなと思っていますが、これから少しずつ修正していきます。




CSS3 linear gradients に挑戦

このブログで初めて使用してみた「linear-gradient」これによってCSSで線形グラデーションを指定できます。使い方については以下のWebサイトでとても分かりやすく解説してくれています。




Opera 11.10 から linear-gradient がサポートされました

Operaでの CSS3 linear gradients についてのメモ

2011年3月にこのブログテンプレートを作成していましたが、2011/4/12に公開された Opera 11.10 では「linear-gradient」がサポートされるようになったそうなので早速入れてみました。

Opera ブラウザ | スピードと安定性を追求したインターネット | 無料ダウンロード



Opera の CSS3 linear gradients

Operaでの CSS3 linear gradients についてのメモ

Opera では以下の記事を参考に "background-imageプロパティ" にベンダープレフィックス "-o-" を付ける事で線形グラデーションを指定できます。

background: linear-gradient(top, #FAFAFA, #FFFFFF);
background: -moz-linear-gradient(top, #FAFAFA, #FFFFFF); // Firefox
background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#FFFFFF)); // Google Chrome、Safari
background-image: -o-linear-gradient(top, #FAFAFA, #FFFFFF); // Opera
CSS3 linear gradients - Dev.Opera




jQuery

このブログに jQuery を導入する必要もないのですが、簡単に導入できる jQueryプラグイン がありましたのでおまけで導入しました。

jRumble は要素をぶるぶると振るわせる jQueryプラグイン です。

↓マウスオーバーすると振るえます。

((((;゚Д゚))))ガクガクブルブル


jRumble | A jQuery Plugin That Rumbles Elements

関連記事
-0 comments
管理者にだけ表示を許可する
-0 trackbacks