きのこに媚薬。

tumblrにグラデーションつけたかったのであたしはposition:absoluteなwidth:100%を:beforeしたっていうやつを書きます。

tumblr（タンブラー）というサーヴィス（サービス）はすごく便利ですが背景に80pxのグラデーションつけたりするのが1クリックで出来ないので1クリックで出来ないかわりに文字を書いてグラデーションの機能を自分で書いてごまかすことにしました。私は人生をごまかして生きているので、この期に及んでtumblrまでごまかして生きるのかなんて叱責を受ける心配もありませんし、ここ数年のCSSを知らないHTML4時代の人はCSSを覚えると人生が薔薇色になります。薔薇色っていうのはだいたいhsl(355,64%,62%)ぐらいだと思うのですが、このhsl()っていうのもCSSが新しくなった時にこっそり入った機能で我々の意見とか取り入れられてないしCSSはそうやって大きくなるんです。子どもと一緒です。

そういう大人子供人間CSSに対抗するのがtumblrの自由度なんですが、tumblrにはご存知のようにアレとかをアレする機能とかが一切合切全部欠けている。そのかわり自由にかけるCSSがあります。そういう楽しい機能はガンガン使ってあたしたちも大人になりましょう。

こうゆうふうにbodyなところの上側にだけモヤモヤを付けたかったのです。

ところが、bodyってやつはheightが固定されてないっぽい軟弱なやつだったので、bodyの前にブロック要素を挿入することにしました。割と古くから:before擬似要素は使えていたんですが99.9%のCOBOLerがガン無視していた事実上Mozilla Firefoxだけの機能だったんですが、ChromeとかiPhone（Safari）が登場したので、基本的に:beforeを使えない奴は人間のクズ、完全に不必要な元素だけで出来ている出来損ないブラウザーだっていうことが確定しているしそういうブラウザーは埋めろ。

実際にはbody:before{}とすることで、bodyの前になにかの要素ができてきますし、それをブロック要素にすることすら簡単にできる世の中になりました。

body:before{
  display:block;
  content:"";
}

content:""っていうのは完全におまじないなので理解するのに777億年かかるし本を読んでください。でもとにかくそうすると虚空にいきなりブロック要素が現れてくれる。

結局こうなります。

body:before{
  display:block;
  position:absolute;
  content:"";
  top:0;
  left:0;
  height:80px;
  width:100%;
  border:1px solid red;box-sizing:border-box;
  background: -webkit-gradient(linear,left top, left bottom, from(rgba(240,60,40,0.1)), to(rgba(240,60,40,0)));
  background:-moz-linear-gradient(top, rgba(240,60,40,0.1), rgba(240,60,40,0.0));
}

backgroundを2回使っているのは完全におまじないなので理解するのに777億年かかるし本を読んでください。でもとにかくそうすると虚空にいきなりグラデーションが現れてくる。

するとbodyの高さに依らない80PIKUSERUの領域がドドンしてグラデーションがワワンします。

あとはデバッグ用に確保していた1ピクセルの赤いやつ（border:1px solid red;box-sizing:border-box;）をぶっ殺します。

まとめ

• CSSは完全におまじないのやつが凄く多いので小学3年生の子が泣きます。
• はてなダイアリーでタブを使おうとすると「確認する」のボタンに飛ぶ。
• Operaっていう都市伝説用のCSS拡張に-o-ってやつがあるけれどOperaってブラウザは都市伝説です。

Permalink | コメント(0) | トラックバック(0) | 20:01