CSS3

CSS3 要素を透明に出来る Opacity と RGBa の使い方

CSS3 要素を透明に出来る Opacity と RGBa の使い方

Opacity、RGBa は共に要素に透明度を指定することができるCSS3のプロパティです。

RGBa の指定については「CSS3 グラデーション(gradient)の指定方法」でも使用してますが、今回は詳しくまとめておきたいと思います。

Domo Page

CSS3 でボタンを作る為のテクニック、サンプル集

CSS3 でボタンを作る為のテクニック、サンプル集

CSS3 の基礎をいくつかに渡り紹介していたのですが、その後手付かず...今回はパーツの一部ですが、ボタンのサンプルを作ったので作り方を紹介をしたいと思います。

サンプルは今後自分もコピペでも作れるようシンプルなものにしたので、使えそうと思った際はお好きに使って下さい。

Domo Page

CSS3 変形処理を行う transform プロパティ

CSS3 変形処理を行う transform プロパティ

transform は文字や画像を拡大・縮小、移動、回転などを指定出来るプロパティです。

単独でも使いがっては色々あるのですが、前回の記事「CSS3 アニメーション(Transitions)の使用方法」と併用して使ったらさらに面白い動きも出来ちゃったりします。

という事で今回は transform の基礎や使い方やなどを紹介したいと思います。

Download

CSS3 アニメーション(Transitions)の使用方法

CSS3 アニメーション(Transitions)の使用方法

CSS3 になる事で今までと画期的に変わる部分の一つが、このアニメーション機能です。

自分もまだ勉強中ですが、使い方によってはけっこう面白い動きとかも出来ちゃうので、使いこなせればけっこう楽しめると思いますよ。
なので今回は基礎的な事を書いていきたいと思います。

Domo Page

CSS3 グラデーション(gradient)の指定方法

CSS3 グラデーション(gradient)の指定方法

CSS3 でグラデーションの指定が出来る -moz-linear-gradient -webkit-gradient の使用方法などを紹介、解説したいと思います。

Domo Page

CSS3 background 関係のプロパティ・使い方

CSS3 background 関係のプロパティ・使い方

最近は CSS3 ネタばかりですが、今回は CSS3 で使える background 関係のプロパティを紹介、解説です。

Download

CSS3 でのレイアウトで使える box 系プロパティのまとめ

CSS3 でのレイアウトで使える box 要素系のまとめ

今は 3カラムのレイアウトをする際 float を使い clearfix や clear を使ったりと覚えたての頃は頭を悩まされた人も少なくはないかと思います。

でも今後普及するであろう CSS3 で 3カラムのレイアウトする際も display: box; を使うだけで簡単に出来ちゃうんですよね。って事でbox 要素系のプロパティについての紹介をしておきます。

demo page

CSS3 text-shadow box-shadow の使い方

テキストやボックス要素に影をつける box-shadow text-shadow の使い方

テキストに影をつける text-shadow ボックス要素に影をつける box-shadow は今後必須のプロパティになりそうな気がするので使い方などをまとめておきたいと思います。

CSS3 角丸を表現する border-radius

CSS3 角丸を表現する「border-radius」

今まで画像で角丸を表現していた部分を border-radius を使用する事で簡単に角丸を表現出来ちゃうプロパティです。

正確にはCSS3の草案「CSS3 Backgrounds and borders Module」中なんですが、これが普通に使えればどれだけ楽になるか...って感じなので、使い方を紹介しておきたいと思います。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年