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

clearfix

• いまどき ? いまさら ? clear fix のコード | ヨモツネット

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

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


border-radius
角丸

• 4.4. The ‘border-radius’ properties – CSS Backgrounds and Borders Module Level 3
• -moz-border-radius – MDC
• -webkit-border-radius – Safari CSS Reference: Supported CSS Properties


/* 全部 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
箱に影

• 22. The ‘box-shadow’ property – CSS3 Backgrounds and Borders Module
• -moz-box-shadow – MDC
• -webkit-box-shadow – Safari CSS Reference: Supported CSS Properties


/* 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
テキストシャドウ

• 8.3 Text Shadows: the ‘text-shadow’ property – CSS Text Level 3
• text-shadow – MDC
• text-shadow – Safari CSS Reference: Supported CSS Properties


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


gradient
グラデーション

• 5. Gradients – CSS Images Module Level 3 Editors Draft
• -moz-linear-gradient – MDC
• -moz-radial-gradient – MDC
• -webkit-gradient – Safari CSS Reference: CSS Property Functions
• Gradients – Safari CSS Visual Effects Guide: Gradients
• CSS3 Gradient Generator


.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 使ってます。