CSS3 ちょっといじってみる。 Vol.2

2011.04.30 Sat

またCSS3をちょっといじってみました。テキストに影を付けることができるtext-shadowです。

text-shadow <ドロップシャドウ>

dakkie.com

.text_shadow {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 1px 1px 1px #222222;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <へこみ>

dakkie.com

.text_shadow_2 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: -1px -1px 1px #222222;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadowは下記のような指定の方法です。

text-shadow: 右方向へのズレ, 下方向へのズレ, ぼかし具合, 影の色;

右方向へのズレ、下方向へのズレはマイナスの値を指定すれば、左方向へのズレ、上方向へのズレになります。
また、ぼかし具合は0から値を指定することができます。値を0に指定した場合は、線のようになります。マイナスの値は指定できません。

このtext-shadowは、「,(コンマ)」で区切ることによって複数の値を指定することもできます。

text-shadow <縁取り>

dakkie.com

.text_shadow_3 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 0 -1px 0 #ffffff, 1px 0 0 #ffffff, 0 1px 0 #ffffff, -1px 0 0 #ffffff;
  font-size: 124%;
  color: #222222;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <立体的>

dakkie.com

.text_shadow_4 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: 1px 1px 0 #cccccc, 2px 2px 0 #cccccc, 3px 3px 0 #333333;
  font-size: 124%;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadow <エンボス>

dakkie.com

.text_shadow_5 {
  width: 250px;
  height: 50px;
  background: #0066cc;
  text-shadow: -1px -1px 0 #ffffff, 1px 1px 0 #222222;
  font-size: 124%;
  color: #0066cc;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}

text-shadowは、かなり使えそうですね。CSSだけである程度テキストの装飾ができてしまいます。


HTMLやCSSの文法をチェックする。

2011.04.28 Thu

HTMLの文法が正しいかどうか、何か間違いはないか。
Webサイトのページ数が多かったり、多くのHTMLやCSSを書いていたりする場合、全てをチェックするのはとっても大変です。

そんな時に便利なのが下記のようなチェックツールです。

The W3C Markup Validation Service

W3Cが提供しているHTMLの文法をチェックするサイトです。URLを入力するか、ファイルを参照するか、またはHTMLを貼り付けるかして「Check」ボタンを押すと、HTML/XHTMLの仕様で正しく記述されているかがチェックできます。

Another HTML-lint gateway

これもHTMLの文法をチェックするサイトです。URLを入力するか、HTMLを貼り付けるか、またはファイルを参照するかして「チェック」ボタンを押すと、100点満点で採点してくれます。チェック項目を細かく指定することができます。

W3C CSS 検証サービス

W3Cが提供しているCSSをチェックするサイトです。URLを入力するか、ファイルを参照するか、またはCSSを貼り付けるかして「検証する」ボタンを押すと、CSSが正しく記述されているかがチェックできます。


CSS3 ちょっといじってみる。 Vol.1

2011.04.15 Fri

あんまりCSS3をいじったことがなかったので、この機会にちょっといじってみました。角丸を表現できるborder-radiusとグラデーションを表現できるgradientです。

border-radius <角丸>

.kadomaru {
  width: 250px;
  height: 50px;
  background: #0066cc;
  border-radius: 10px;
}

値を1つ指定した時は、4つの角に対して同じ半径が適用されます。

また、値を2つ指定した時は、左上と右下で同じ半径、左下と右上で同じ半径が適用され、値を4つ指定した時は、左上の半径、右上の半径、右下の半径、左下の半径が別々に適用されます。

border-radius <正円>

.seien {
  width: 50px;
  height: 50px;
  background: #0066cc;
  border-radius: 25px;
}

widthとheightの半分の値をborder-radiusに指定すると正円にすることができます。

gradient <グラデーション>

グラデーションには線形グラデーションと円形グラデーションの2種類があります。

1.線形グラデーション <上から下へ>

.senkei_gradation {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(top, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

2.線形グラデーション <左から右へ>

.senkei_gradation_2 {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(left, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left top, right top, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

3.線形グラデーション <左下から右上へ>

.senkei_gradation_3 {
  width: 250px;
  height: 50px;
  background: -moz-linear-gradient(left 45deg, #0066cc, #cccccc);
  background: -webkit-gradient(linear, left bottom, right top, from(#0066cc), to(#cccccc));
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

線形グラデーションはFirefoxとWebkit系のブラウザ(Safari、Google Chrome)で指定の方法が違います。

-moz-linear-gradient(開始位置と角度, 開始色, 終了色);

-webkit-gradient(linear, 開始位置, 終了位置, form(開始色), color-stop(位置, 途中色), to(終了色));

4.円形グラデーション <中心から外へ>

.enkei_gradation {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc);
  background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), to(#cccccc));
  border-radius: 10px;
}

5.円形グラデーション <位置を変更する>

.enkei_gradation_2 {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(10px 25px, circle, #0066cc, #cccccc);
  background: -webkit-gradient(radial, 10 25, 0, 10 25, 50, from(#0066cc), to(#cccccc));
  border-radius: 10px;
}

6.円形グラデーション <正円にする>

.enkei_gradation_3 {
  width: 50px;
  height: 50px;
  background: -moz-radial-gradient(center center, circle, #0066cc, #cccccc 24px, rgba(255, 255, 255, 0) 25px);
  background: -webkit-gradient(radial, center center, 0, center center, 50, from(#0066cc), color-stop(49%, #cccccc), color-stop(50%, rgba(255,255,255,0)), to(rgba(255,255,255,0)));
}

円形グラデーションも線形グラデーションと同じでFirefoxとWebkit系のブラウザ(Safari、Google Chrome)で指定の方法が違います。

-moz-radial-gradient(開始位置, 形状, 開始色, 終了色);

-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色));

CSSだけでこれだけの表現ができるのはスゴいですね。
画像を作らなくてもある程度のものは作れるので、軽量化もできます。CSS3恐るべし。IEも早く対応してくれれば良いのになあ。

若干おかしい部分があるかもしれませんが、許してください。もしあれば教えてください。


page 3 of 41234