JSFiddle - React, Tailwind, and code Playground
by joopmicroop
HTML
<p class="slogan">tekst here</p>
CSS
.slogan{
font-size: 40px;
color: #b4b4b4;
/* glow */
text-shadow: #FFFFFF 0 0 10px;
/* IE glow */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000 ,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-10, OffY=-10, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-10, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=-10, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-10, OffY=10, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-10, OffY=0, Color=#000000)";
transition: color 750ms ease;
-webkit-transition: color 750ms ease;
-moz-transition: color 750ms ease;
-ms-transition: color 750ms ease;
-o-transition: color 750ms ease;
}
.slogan:hover {
color: #f4c96c;
/* glow */
text-shadow: #fd4201 0 0 10px;
/* IE glow */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff ,Strength=1);
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-10, OffY=-10, Color=#ffffff)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-10, Color=#ffffff)progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=-10, Color=#ffffff)progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=0, Color=#ffffff)progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10, Color=#ffffff)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=10, Color=#ffffff)progid:DXImageTransform.Microsoft.dropshadow(OffX=-10, OffY=10, Color=#ffffff)progid:DXImageTransform.Microsoft.dropshadow(OffX=-10, OffY=0, Color=#000000)";
}