全くの物まねです。こちらで教えてもらいました。
（この画像も同じサイトのものです。）
2014年10月22日
CSS3で、文字をぱたぱたさせる〜簡単です
実際にやってみました。
（スクロールすると２バイトの文字も見えます。）
準備は比較的簡単です。
ヘッダに書き込むのは次の２行だけです。
<link rel="stylesheet" type="text/css" href="../css/patapata.css">
<script src="../js/prefixfree.min.js"></script>
CSS（patapata.cssと名前を付けました。）の内容は以下の通りです。
@import url(http://fonts.googleapis.com/css?family=Lato:900);
*, *:before, *:after{
box-sizing:border-box;
}
body{
font-family: 'Lato', sans-serif;
;
}
div.foo{
width: 90%;
margin: 0 auto;
text-align: center;
}
.letter{
display: inline-block;
font-weight: 900;
font-size: 6em;
margin: 0.2em;
position: relative;
color: #00B4F1;
transform-style: preserve-3d;
perspective: 400;
z-index: 1;
}
.letter:before, .letter:after{
position:absolute;
content: attr(data-letter);
transform-origin: top left;
top:0;
left:0;
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out;
}
.letter:before{
color: #fff;
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8);
z-index: 3;
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg);
}
.letter:after{
color: rgba(0,0,0,.11);
z-index:2;
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg);
}
.letter:hover:before{
color: #fafafa;
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg);
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg);
}
HTMLのbodyのソースは以下の通りです。
<span class="letter" data-letter="K">K</span>
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="W">W</span>
<br>
<span class="letter" data-letter="P">P</span>
<span class="letter" data-letter="I">I</span>
<span class="letter" data-letter="E">E</span>
（後半省略）
ヘッダに
<script src="../js/prefixfree.min.js"></script>
という行があります。これは、cssを多くのブラウザに対応させるためのプレフィクスを自動的に追加してくれるスクリプトです。
「prefixFree」からダウンロードしました。
実際にダウンロードできたファイルは、prefixfree.js ではなく、prefixfree.min.jsというファイル名でした。縮小版でしょうか。
ダウンロードのリンクがなかなか分からなかったのですが、サイトの左上の丸いところ（2KBなどと書いてある）からダウンロードできます。gzippedとありますが、ダウンロードされるファイルは、prefixfree.min.jsという名前のテキストファイルです。
実際に使ってみて分かったこと。
１ patapata.cssの先頭の方で、
body{
font-family: 'Lato', sans-serif;
;
}
という部分があり、フォントの指定をしてしまっているので、利用するページによっては、他の文字の表現に影響を与えます。サンセリフにしてゴシック系の文字を利用した方が見た目がいいからでしょう。削除しても動作には問題ありません。
２ プレフィクスの対処をしないと、私が使っているブラウザの中ではSafariだけがきちんと動作しませんでした。prefixfree.min.jsを使えば、動作しました。
ただ、これにより他の部分のCSSの記述に影響を与えてしまったので、互換性を犠牲にして私はこの行を削除しました。
文字の大きさなど、patapata.cssを書き換えれば、もちろんいろいろと表現を変えることができます。
【HTML5の最新記事】
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/104819270
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック
http://blog.sakura.ne.jp/tb/104819270
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。
