<section>
<h1>1.Text shadowなし</h1>
<div class="box">
<p>test</p>
</div>
<h1>2.Text shadowあり</h1>
<div class="box">
<p class="shadow">test</p>
</div>
<h1>3.Text shadow 2色</h1>
<div class="box">
<p class="shadow-double">test</p>
</div>
<h1>4.Text shadow hover</h1>
<div class="box">
<p class="shadow-hover">test</p>
</div>
<h1>5.Text shadow ネオン管風アニメーション</h1>
<div class="box">
<p class="shadow-glitch">test</p>
</div>
</section>
@keyframes shadowAnimate {
from{
text-shadow: 2px 2px 2px blue, -2px 0px 1px red;
}
to{
text-shadow: 3px 3px 2px blue , -3px -1px 1px red;
}
}
section{
text-align: center;
}
.box{
margin:0 auto;
background-color:green;
width:350px;
text-align: center;
padding: 1rem;
}
p{
font-size:3rem;
}
p.shadow{
text-shadow:1px 1px 2px white;
}
p.shadow-double{
text-shadow:5px 5px 2px red, -5px -5px 2px blue;
}
p.shadow-hover{
transition:.5s;
&:hover{
text-shadow: 100px 0px 0px blue , -100px -0px 0px red;
}
}
p.shadow-glitch{
animation-name:shadowAnimate;
animation-duration: .00001s;
animation-direction: alternate;
animation-iteration-count:infinite;
mix-blend-mode: color;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.