0

HTML5のサイトでよく利用されているrest.css

:HTML5

HTML5で作成されているサイトではHTML5 Doctorで掲載されているrestファイル(初期化ファイル)が利用されているのをよく見かけます。

ほかにもいくつかあるようですが、これで十分な気がするので他割愛。

HTML5 Reset Stylesheet | HTML5 Doctor

Tags: ,

0

CSS3 グラデーションをつける gradient

:CSS3

グラデーションについては、まだ動作未確認な部分が多いです。

■ 線形グラデーション

-webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色)); 
-moz-linear-gradient(開始位置, 終了位置, 開始色, 途中色 位置, 終了色);
※色はrgba(Red, Green, Blue, Alpha)で指定する事で透明度を指定できる
	background: -moz-linear-gradient(
		top,
		#fcc800,
		#c70067 50% ,
		rgba(154,13,124,0.5)
    );
    background: -webkit-gradient(
		linear,
		50% 0%,
		50% 100%,
		from(#fcc800),
		color-stop( 0.5  , #c70067 ),
		to(rgba(154,13,124,0.5))
    );

■ 円形グラデーション
-webkit-gradient(radial, 開始位置, 開始位置の半径, 終了位置, 終了位置の半径, from(開始色), color-stop(位置, 途中色), to(終了色)); 
-moz-radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);
※色はrgba(Red, Green, Blue, Alpha)で指定する事で透明度を指定できる
	background: -moz-radial-gradient(
		50% 50%,
		circle,
		#fcc800,
		#c70067 50% ,
		#9a0d7c,
		rgba(154,13,124,0.5)
    );
    background: -webkit-gradient(
		radial,
		50% 50%,
		0,
		50% 50%,
		400,
		from(#fcc800),
		color-stop( 0.5  , #c70067 ),
		to(rgba(154,13,124,0.5))
    );

DEMO

Tags:

0

CSS3 テキストに影をつける text-shadow

:CSS3

テキストに影をつける場合は、text-shadowを使います。
複数指定することもできます。複数指定する場合は、「,」で区切ります。
※ IE否対応、デモにはPIE.htcを導入

   text-shadow: 縦距離 横距離 ぼかし距離 影の色;

■ 影をつける
   text-shadow: 2px 2px 3px #666;

■ 複数の影をつける
   text-shadow: 0 0 4px #FFE900,
         -1px -1px 4px #FFDD33,
         -2px -2px 6px #FFE900,
         -4px -4px 8px #FF0000;

DEMO


売れるネットショップ開業・運営 eコマース担当者・店長が身につけておくべき新・100の法則。

  • 著者／訳者：坂本悟史 川村トモエ
  • 出版社：インプレスジャパン( 2010-05-14 )
  • 単行本：232 ページ
  • ISBN-10 : 4844328379
  • ISBN-13 : 9784844328377
  • 定価：￥ 2,520

Tags:

0

CSS3 ボックスに影をつける box-shadow

:CSS3

ボックスに影をつけるプロパティがbox-shadowです。
※ IE否対応、デモにはPIE.htcを導入

   box-shadow: [inset] 縦距離 横距離 ぼかし距離 広がり距離 影の色;

[inset]がなければ外側の影、つければ内側の影になります。
縦距離と横距離は影の大きさになります。
ぼかし距離はぼけ方の強さになります。
広がり距離は全方向への広がりになります。

■ 外側の影指定
.bshadow {
   box-shadow: 5px 5px 3px #666;
}

■ 内側の影指定
.bshadow {
   box-shadow: inset 5px 5px #999;
}

■ 内外の両方の影指定
.bshadow {
   box-shadow: 0 0 3px 3px #666, inset 0 0 15px 10px #EC0082;
}

DEMO

Tags:

0

CSS3 角丸プロパティ border-radius

:CSS3

CSS3では角丸プロパティがあります。
※ IE否対応、デモにはPIE.htcを導入

■ 一括指定

.bradius {
    border-radius: 50px;
}

■ 部分指定
.bradius {
    border-top-left-radius: 0
    border-top-right-radius: 0
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;

    /*firefoxは記述が異なるので注意*/
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 30px;
    -moz-border-radius-bottomleft: 30px;
}

DEMO

Tags: