大家好

有看過一些廣告的文字
會把陰影用斜線作為背景
今天試作把文字重疊作出效果

首先需要先用一個 box 作為容器
再用 position 位移來作

<div class="box">範例文字</div>
  .box{
  position: relative;
  }

範例一 把陰影作成斜線

<div class="shadow">TEXT-SHADOW</div>
<div class="text">TEXT-SHADOW</div>

.shadow{
  position: absolute;
  top: 10px;
  left: 20px;
  background: repeating-linear-gradient(-45deg, #999 0px, #999 2px, transparent 2px, transparent 4px);
  color: #999;
	-webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.text{
  position: absolute;
  top: 5px;
  left: 25px;
  color: #000;
}

範例二 將 範例一 的HTML文字和陰影相反

<div class="text">TEXT-SHADOW</div>
<div class="shadow">TEXT-SHADOW</div>

範例三 陰影漸層拉長

.text{
  position: absolute;
  top: 5px;
  left: 25px;
  color: #000;
  text-shadow: 
      1px -1px 0 #767676, 
      -2px 4px 1px #787777, 
      -3px 6px 1px #828181, 
      -4px 8px 1px #8f8e8d, 
      -5px 10px 1px #9e9c9c, 
      -6px 12px 1px #adabab, 
      -7px 14px 1px #bcbbba, 
      -8px 16px 1px #cbc9c8, 
      -9px 18px 1px #d8d6d5, 
      -10px 20px 1px #e2e0df, 
      -11px 22px 1px #e4e3e2;
}

範例四 將 範例二 的文字加背景

.shadow{
  position: absolute;
  top: 5px;
  left: 25px;
  background: repeating-linear-gradient(-45deg, #FAFAFA 0px, #FAFAFA 2px, transparent 2px, transparent 4px);
  color: #999;
	-webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.text{
  position: absolute;
  top: 5px;
  left: 25px;
  color: #000;
  background-image: url(背景.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

--- 明日待續。