吹き出し的なもの（以下、吹き出しという）を作ってみた。

入力欄を空欄で入力した時に、
吹き出しで「未入力です」ってアナウンスが
フェードインして入る、って感じで。

・　吹き出しを、cssで用意
・　吹き出しのcssは、<input　の後の　<span　に設定
・　吹き出しのcssは、最初は非表示にしとく(display:none)
・　吹き出したいときに、表示する（ここでは、submit時）

そんな感じで作れそうだったので作った。

表示位置の設定と、フェードインアウト,
入力時には非表示状態、をコードしてるので、
ちょっと長いのが残念。

完成コードはこれ
でも、吹き出しをフェードアウトさせるところが気に入らない。いつか直そう。

//------- jquery ----------
<script>
  $(function(){
    var position,width;
    var $form=$('form');
    var $inp =$('input[name="inp"]');
    var $sp  =$('span[name="sp"]');

    $form.submit(function(){
      if(!$inp.val()){
        position=$inp.offset();
        width   =$inp.width();
        $sp.text('未入力です');
        $sp.css('display','inline');
        $sp.offset({top :(position.top-1),
                    left:(position.left+width+10),
                  });
        $sp.hide().fadeIn(100);
        return false;
      }
    });

    $inp.on('keypress',function(){
      $sp.fadeOut(100);
    });
  });
</script>
//----------------------------


//---------- css -------------
<style>
  .tip    {display:none;
           color:white;
           background:blue;
           border-radius:5px;
           }
</style>
//----------------------------


//--------- html -------------
<form action="test" method="post">
  {{csrf_field()}}　// これはlaravel仕様です
  <input name="inp">
　<span name="sp" class="tip"></span>
</form>

コードを打つだけで楽しい。
心が躍るような楽しさ。
こんな楽しいことがあったんだ。

GOAL

背景画像だけ暗くし、文字は白く

how to

---

test.html

<div class="overlay-box">
    <div class="overlay-child">
        <h3 >Hello world</h3>
    </div>
</div>

test.css

.overlay-box {
  height:100%;
  width: 100%;
}
.overlay-box::before{
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    z-index: 79;
}
.overlay-child {
    z-index: 80;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

// この記事は、 note に投稿した記事の再掲です。

background-attachment: fixed; を指定した親要素に対して transform プロパティが使われていると fixed がきかない様子。
transform プロパティを設定すると、その子要素が全て relative になってしまうのが原因ぽい？
「スクロールして、要素が画面の中に表示されたらフェードインする」って実装をしたときにハマったのでメモ。

HTML

<div class="contents">
 <div class="bg-fixed"></div>  <!-- fixedしたい背景要素は別にする -->
  <div class="fade-in">        <!-- transformを利用する要素は背景要素は別にする -->
     <p>Hello World!</p>
 </div>
</div>

CSS

css
.contents {
 position: relative;
}

// 背景要素をabsoluteにする
.bg-fixed {
 position: absolute;
 width: 100%;
 height: 100%;
 display: block;
 left: 0;
 top: 0;
 background: url("bg.jpg") no-repeat center top fixed;
 background-size: cover;
}

.fade-in {
 opacity: 0;
 transform: scale(0.8);
 transition: all .3s ease;
}

// 要素がスクロールされて "visible" クラスを付与されたときに適応するスタイル
.fade-in.visible {
 opacity: 1;
 transform: scale(1);
}