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

Leave a Reply

Your email address will not be published. Required fields are marked *