【SCSS】【Webデザイン】背景にグラデーションを入れる

昨晩はアルゴリズムを考えすぎたためか
謎の頭痛が治まらず、何回も吐いた位ひどかったので
今日はサイトのデザインとか、そういうふわっとしたことを勉強しています。

すごいよね。
考えすぎて吐くなんて。
今まで生きてきて経験ないわ。。

　
不思議なもので
楽しいことを考える（プリンとか）⇒頭痛くならない
アルゴリズムを考える（魔法陣とか）⇒死にそうに頭が痛くなる

　
っていう。
やばい。
まだ本調子ではない。

SCSSの導入

CSS3はマルチブラウザ対応が必要で記述が煩雑です↓

 .animefont {
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

SCSSを使うことですっきりしました

@mixin css3($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
    #{$prefix}#{$property}: $value;
  }
}
.animefont {
  @include css3(opacity, 0);
}

興味があればこのコミットでいじっているので参照ください

背景をグラデーション

背景にちょっとグラデーションを加えたくなる。

■before↓
水色べた塗り。これも可愛くて悪くないけどね。

■理想の背景
ごくわずかにグラデーションをつけたい。

■おすすめ情報
Webのカラーを見るサイトはたくさんあるけれど、
ここが1番重宝してます
同色相で明度だけ変えたい、が1番見やすいと思う。

■嵌ったところ
グラデーションを指定するbodyに、高さを指定する必要がある。
bodyの高さは、htmlタグに依存するので、以下を加える↓

html {height:100%;}

　
■開発中の画面
こんな感じで、あえて始点をredにして、分かりやすくしているよ。
ちょっと禍々しい。

■htmlでheightを指定していないと、
こんな風にグラデーションが途中で切れちゃう↓

　
■グラデーションのCSS
FireFoxだけ記述が違うみたい。

background: -moz-linear-gradient(top, #4ccfff, #00bfff); 
background: -webkit-gradient(linear, left top, left bottom, from(#4ccfff), to(#00bfff)); 

　
■after
わずかにグラデーションが入ってます。
控えめなのがおしゃれの秘訣！

　
と思ったけれども、
今のサイトは、クリックされたメニューによって高さが動的に変わる作りだから
グラデーションは複雑になる。。

ということで取りやめ。
変わりに、コンテンツボックスの色を少し明るくすることで
おしゃれ感を取り入れました。

http://sekai-in-the-box.appspot.com/

　
っていうか頭痛いときにアニメーションは、、辛い。