読者です 読者をやめる 読者になる 読者になる

せかいや

いまいるここを、おもしろく http://sekai-in-the-box.appspot.com/

【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↓
水色べた塗り。これも可愛くて悪くないけどね。
f:id:sekaiya:20130915132629j:plain

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


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


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

html {height:100%;}


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


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


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

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

 
■after
わずかにグラデーションが入ってます。
控えめなのがおしゃれの秘訣!
f:id:sekaiya:20130915132703j:plain

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

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


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

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