mery 風 head css

僕はメリーのデザインが好き。
ということで、ヘッダを再現してみました。

style.css

    .cover {
        position: relative;
        overflow: hidden;
        max-height: 300px;
        height: 211px;
    }

    .cover span.crop_image {
        height: 100%;
        display: block;
        background-color: rgb(245, 245, 245);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url('/img/hoge.jpg');
        vertical-align: middle;
    }


    .cover .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(65%,rgba(0,0,0,.06)),color-stop(80%,rgba(0,0,0,.15)),to(rgba(0,0,0,.18)));
        background-image: -webkit-linear-gradient(rgba(0,0,0,.06)65%,rgba(0,0,0,.15)80%,rgba(0,0,0,.18));
        background-image: linear-gradient(rgba(0,0,0,.06)65%,rgba(0,0,0,.15)80%,rgba(0,0,0,.18));
    }

    .cover .curator {
        position: absolute;
        bottom: 15px;
        left: 15px;
        color: #fff !important;
    }


    .icon.icon-button-float-love {
        background-image: url(https://a.mery.jp/8a2ceea/images/sprites/[e-mail]);
        background-position: -149px -161px;
        background-size: 448px 437px;
        width: 64px;
        height: 64px;
    }


    #btn-waku {
        position: relative;
        padding: 0 15px;
    }


    .like-button {
        position: absolute;
        top: -30px;
        right: 15px;
    }

    .icon.icon-button-float-love {
        background-image: url(https://a.mery.jp/8a2ceea/images/sprites/[e-mail]);
        background-position: -149px -161px;
        background-size: 448px 437px;
        width: 64px;
        height: 64px;
    }

    .icon {
        display: inline-block;
        margin: -1px auto 1px;
        vertical-align: middle;
    }

そして

hoge.html

<div class="cover">
                <span class="crop_image"></span>
                <div class="filter"></div>

                <a href="#" class="curator">
                    <img src="https://pbs.twimg.com/profile_images/945436187056947200/ROg1tP94_normal.png"><span>hideki</span>
                </a>
            </div>


            <div id="btn-waku">
                <div id="fav_area1" class="like-button">
                    <div id="like_bt" class="js-nonUserLove">
                        <span class="icon icon-button-float-love"></span>
                    </div>
                </div>
            </div>

とりあえずコピペで動きます。