Glory Effect

Text Shadow

屬性:text-shadow: 水平陰影 垂直陰影 擴散程度 顏色;

範例

 <h1>微弱光暈</h1>
 h1{
color:#fff;
text-shadow: 0px 0px 15px #ffdd65;
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);
}

Display

微弱光暈

重複疊加光暈,增強光圈

<h1>中等光暈</h1>
h1{
color:#fff;
text-shadow: 0px 0px 15px #ffdd65, 0px 0px 5px #fff;
position: absolute; 
top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);
}

Display

中等光暈

CodePen

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *