layer13.com トップページで使った CSS のメモ

とりあえず組んだ、って感じだから、これから直していく予定ですが、
layer13.com トップページで使った CSS についての覚え書き。忘れんうちにメモ。

clearfix

参考に、というか、そのまま使わせていただきました。

.cf{ /zoom : 1; }
.cf:after{ content : ''; display : block; clear : both; height:0; }

border-radius
角丸


/* 全部 5px */
.hoge{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
/* 上だけ 5px */
/* 左上 右上 右下 左下 */
.fuge{
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}

div で border-radius を指定しても、その中の要素(h1など)は角丸にならないので、そこにも border-radius をつけないといかん。

box-shadow
箱に影


/* fff の背景を 15px ぼかし。 こりゃ影っちうよりグローだけど。*/
/* hオフセット vオフセット ぼかし 色 */
.hoge{
box-shadow: 0px 0px 15px #fff;
-moz-box-shadow: 0px 0px 15px #fff;
-webkit-box-shadow: 0px 0px 15px #fff;
}

text-shadow
テキストシャドウ


/* 色 hオフセット vオフセット ぼかし */
.hoge{
text-shadow: #333 -1px -1px 0px;
}

gradient
グラデーション


.hoge{
background-color: #484232; /* 背景色 */
/* 透明から白。 */
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgba(255,255,255,0.7)),
color-stop(1, rgba(255,255,255, 0))
);
background-image:-moz-linear-gradient(
center bottom,
rgba(255,255,255,0.7) 0%,
rgba(255,255,255,0) 100%
);
}

gradient は background-image に指定する。 -moz と -webkit で指定方法がぜんぜん違うのでめんどい。ハイライトっぽいのを付けるだけであれば、背景色は backgroud-color、ハイライトを background-image にしておけば、色を変更するのも楽。

ページの背景を薄く radial-gradient をかけようと思ったのだけど、 firefox 3.6.8 だと重い、Chrome 6.0.472.51 beta だとレンダリングが思ったように出ない(共に Ubuntu上) なので、却下。

そのた

  • position: static の位置指定はhtmlの左上からのみ?
  • layer13.com のテキスト部分だけ、Web Fonts 使ってます。