この土日暇だってので以下のようなものを画像ではなくhtmlとcssだけで作っていました。
これが本物じゃないのは本物と比べてみればわかると思います。微妙に違うので。
というか、縦文字で見事に発見したんですよね、問題を。
これはOperaのcss抜きでの表示。
そう、長音記号を｜で表さないといけない。ーを縦で表したかったんですが、css的にIeしか縦書きが無理なので(ieの独自拡張であるから)。この縦文字、無理やり縦にしてるだけですよ、絶対配置使いまくりです。
参考サイトはこちら: 「とある魔術の禁書目録」ロゴのフォント&ジェネレータ | Moxbit
公式のロゴのフォントは有料フォントたくさん使ってるようですね。しかし俺はそんなものをもっているわけなく…普通に代用しました。
全体："ＨＧ明朝Ｅ","ＭＳ Ｐ明朝",serifと指定しているけど、何か実際指定されてるのはserifであるものかな。…なぜ適応されぬ。仕方が悪いのか。多分方法が悪い。でもこの際ここまできたから気にしない。
レールガンの部分はネオツデイDBとかいうよくわからんフォントですが、ここは、"HG創英角ｺﾞｼｯｸUB"というのを使いました。…背景に本家使って重ねてやってたけど、ほとんど同じじゃねこれ…？ちょっと太いけど。
ソースでものせますか。適当に作ったからソースも適当です。後ieで見てない。ちょろめとOperaのみ確認。ちょろめは超の部分にグラデーションがかかります。
ソース
<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
div#toaru-wrapper{
/*
background:rgba(1,1,1,.5) url(lg_logo_t.gif) no-repeat;
*/
width:278px;
height:341px;
font-size:250%;
font-family:"ＨＧ明朝Ｅ","ＭＳ Ｐ明朝",serif;
font-weight:bold;
text-shadow:0 0 3px rgba(200,200,200,.2);
}
div#toaru-wrapper div#toaru{
position:relative;
width:100%;
height:100%;
background:rgba(255,255,255,.5);
}
div#toaru span{
position:absolute;
}
div#toaru span#to{
position:absolute;
font-size:185%;
color:#f18937;
top:5px;
left:143px;
}
div#toaru span#a{
font-size:115%;
color:#f08637;
left:167px;
top:70px;
}
div#toaru span#ru{
font-size:105%;
color:#f08235;
top:90px;
left:143px;
}
div#toaru span#word{
font-size:165%;
top:125px;
left:141px;
display:block;
width:1em;
position:relative;
}
div#toaru span#word span#c1{
color:#ed6e2e;
}
div#toaru span#word span#c2{
position:absolute;
top:59px;
left:-1px;
color:#e83221;
}
div#toaru span#no{
top:236px;
left:144px;
font-size:155%;
color:#e72521;
}
div#toaru span#slfirlet{
color:#fff;
background-color:#ea5326;
background:-webkit-gradient(linear, right top, left bottom, from(#f08336), to(#e72821));
left:66px;
top:86px;
font-size:183%;
}
div#toaru span#slseclet{
color:#e72a21;
left:90px;
top:157px;
font-size:130%;
}
div#toaru span#slthilet{
color:#e71c21;
left:82px;
top:204px;
font-size:148%;
}
div#toaru span#slfoulet{
color:#e61121;
left:65px;
top:253px;
font-size:200%;
}
div#toaru span#rb{
display:block;
left:62px;
top:159px;
font-family:"HG創英角ｺﾞｼｯｸUB","ＭＳ Ｐゴシック","MS UI Gothic",sans-serif;
font-weight:normal;
font-size:30%;
width:1em;
position:relative;
}
div#toaru span#rb *{
position:absolute;
}
div#toaru span#rb span#rbc1{
top:5px;
left:5px;
color:#e60d21;
}
div#toaru span#rb span#rbc2{
top:25px;
left:5px;
color:#e60d21;
}
div#toaru span#rb span#rbc3{
top:46px;
left:5px;
color:#e60d21;
}
div#toaru span#rb span#rbc4{
top:66px;
left:5px;
color:#e60d21;
}
div#toaru span#rb span#rbc5{
top:87px;
left:5px;
color:#e60d21;
}
</style>
</head>
<body>
<div id="toaru-wrapper">
<div id="toaru">
<span id="to">と</span><span id="a">あ</span><span id="ru">る</span><span id="word"><span id="c1">科</span><span id="c2">学</span></span><span id="no">の</span><span id="slfirlet">超</span><span id="slseclet">電</span><span id="slthilet">磁</span><span id="slfoulet">砲</span><span id="rb"><span id="rbc1">レ</span><span id="rbc2">｜</span><span id="rbc3">ル</span><span id="rbc4">ガ</span><span id="rbc5">ン</span></span>
</div>
</div>
</body>
</html>
汚い？しらないよそんなもの！
0 件のコメント:
コメントを投稿