ＣＳＳ３の新機能を押し込んでみる。
新機能としておもしろそうなのは
・角丸
・影（文字、枠）
・グラデーション
・アニメーション
また、セレクタに関して、機能が拡張したので、それについて。
具体的には、こんなかんじ
悪夢のようなデザインだ（＾＾；）
ちなみに、フッターの部分にマウスを置くと、
のように、色が変わる。
ソースは、前に書いたものをつかっている。
今回は、ＣＳＳ部分を書いてみた。
■ＣＳＳ３全般について
ＣＳＳ３の独自機能の場合、
-webkit-box-shadow: 10px 10px 25px #555555;
-moz-box-shadow: 10px 10px 25px #555555;
box-shadow: 10px 10px 25px #555555;
のように、-webkitとか、-mozとか付いたりする。
これは、ブラウザを示していて、-webkitは、safariとchrome、mozはfirefoxを示している。あとoとかもある。
実は、Webkit系とmozでは、同じことをさせるのに、書き方が違うところもある。
■セレクタに関して
#main
{
clear:both;
float:right;
}
なんてとき、#mainのところがセレクタ。
セレクタで対象を指定する。何もなく名前だけのときは、タグ名、#はid名、.はクラス名を示す。
例だと mainというID名に対してということになる。
このセレクタが拡張されていて、
input [ type="text" ]
のように、ある属性値のものだけ集めたり、
#topics article:nth-child(2n)
{
background-color:#dddd88;
}
のように、要素の偶数番目だけ、なにかする（今回は背景色を変える）ということもできる。
表などで便利？
■角丸
border-radius: 10px; /* 一般には */
-webkit-border-radius: 10px; /* SafariとChrome用 */
-moz-border-radius: 10px; /* FireFox用 */
ってなかんじで指定する。これは、四隅を丸めてしまう場合で、
ひとつの角だと、
-webkit-border-top-right-radius: 10px;
のように指定する。
■影
文字の影は、
text-shadow: #aaaaaa 3px 5px 10px;
のように、指定する。
枠の影は
-webkit-box-shadow: 10px 10px 25px #555555;
-moz-box-shadow: 10px 10px 25px #555555;
box-shadow: 10px 10px 25px #555555;
のように指定する。
■グラデーション
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#ffaaaa),
color-stop(0.50, #ffffaa),
color-stop(0.80, #ffffff),
to(#aaaaaa)
);
のようにかく。fromとtoがあれば、color-stopはなくてもいい。
color-stopがあると、途中でまた色を切り替えることも出来る。
■アニメーション
まず、対象のＣＳＳに、
-webkit-transition:all 0.5s linear;
というように、どのように変化するかを指定して書く。
そしたら、
background-color:rgba(100,200,255,1);
のように、色の変化が始まる初期値を書き、
変化先を
footer:hover
{
background-color:rgba(255,0,0,0.5);
}
のようにかく。
■ソースコード
ソースコードは、こんな感じ
|
header font-size:40; background-image:url(header.jpg); #main #topics -webkit-box-shadow: 10px 10px 25px #555555; #topics article:nth-child(2n)
background: -webkit-gradient( #menu #menu nav margin: 0px; } #menu nav ul
#address footer |
他にもいろんな機能があるけど、とりあえず、ここまで
アクセス
トータル
ランキング
