2017年6月16日金曜日

HTMLで炎に燃える文字

野球中継を見ていたら、バックスクリーンに炎に燃える文字が出てまして。

文字が燃えてるんじゃなくて、文字のフォント部分の背景が燃えてるんですね。

で、こいつをHTMLでできるんじゃないかとやってみたよ。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
<!--
.fireback
{
text-align: center;
line-height: 1.1;
font-size: 5em;
font-weight: bold;
display: inline-block;
margin: .45em;
padding: .5em .75em;
color: #fff;
background-color: #000;
background-image: url(./fire.gif);
background-repeat: no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
-->
</style>
</head>
<body>
<div class="fireback">
熱男<br>
</div>
</body>
</html>

ここから実際の表示を見ることができます。

0 件のコメント:

コメントを投稿