被這個樣式驚醒

http://codepen.io/tianzi77/pen/ZGPmgR

在codepen上面看到的一個效果，我承認我是一個偏向審美的頁面仔。如此效果卻被同事說她並不喜歡玩樣式。。。

看看簡介的html結構：

    <h1 class="gradient1">知不知對你傾上萬縷愛意</h1>

    <p class="gradient2">Love is there in side,Make life warm and strong.</p>

在看這高大上的樣式，簡直驚醒夢中人：

        body {
            background: #04161f;
            font-family: '微軟雅黑',"Lato", sans-serif;
            margin: 3em auto;
            max-width: 70em;
        }

        .gradient1 {
            display: inline-block;
            font-size: 96px;
            margin: 0;
            opacity: 0.9;
            background: white;
            color: black;
            position: relative;
            text-shadow: 1px 1px 0px #04161f, 1px -1px 0px #04161f, -1px -1px 0px #04161f, -1px 1px 0px #04161f;
        }


        .gradient1::before,
        .gradient1::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none;
        }

        .gradient1::before {
            background: -webkit-linear-gradient(left, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            background: linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            content: '';
            display: block;
            mix-blend-mode: screen;
        }


        .gradient1::after {
            content: "知不知對你傾上萬縷愛意";
            background: #04161f;
            color: white;
            mix-blend-mode: multiply;
        }

        .gradient2 {
            text-align: center;
            margin: 1em auto;
            width: 10em;
            background: white;
            color: black;
            position: relative;
            text-shadow: 1px 1px 0px #04161f, 1px -1px 0px #04161f, -1px -1px 0px #04161f, -1px 1px 0px #04161f;
        }

        .gradient2::before,
        .gradient2::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none;
        }

        .gradient2::before {
            background: -webkit-radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            background: radial-gradient(circle, #23966c, #faaa54, #e23b4a, #db0768, #360670);
            content: '';
            display: block;
            mix-blend-mode: screen;
        }

        .gradient2::after {
            content: "Love is there in side,Make life warm and strong.";
            background: #04161f;
            color: white;
            mix-blend-mode: multiply;
        }

大概看了一下，裏面的樣式確實玩的很新穎。

text-shadow可以設置幾個方向的文字陰影。
before和after 的使用。
漸變背景linear-gradient

mix-blend-mode: multiply; 文字和圖片混合模式，multiply指的是漸變，screen的話混合，設置normal來解除混合。

大概就這些點吧～