最近、オンラインブックマークなるモノを使い始めて。他の人のブックマークやブクマコメントもちょくちょく拝見してて、これがまた結構勉強になってます。
上の記事に対するブクマコメントで、「これならtext-shadowでよくね？」的な事が書かれてて、「あー、それもそうだなぁ」って思ったけど、ちょっと考えて。
これの擬似コンテンツ側、若しくは元の要素だけに変形かませばやりたかった事が出来ちゃうじゃん！と気付いた。
<h1>デスブログ</h1>
h1 {
display: inline;
position: relative;
letter-spacing: -5px;
color: rgba(0,0,255,0.5);
}
h1:after {
content: "デスブログ";
position: absolute;
left: 0px;
top: 0px;
color: rgba(255,0,0,0.5);
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
transform:rotate(-20deg);
}
何でtext-shadowの影にだけ変形かけれるような仕様じゃないんだー！って思ってたけど、出来ちゃった。text-shadowに何かしようって思ってたのがそもそも着眼点の間違いだった‥。JSで何とかしようとか思ってたけど、CSS3だけで出来るんじゃん。
紹介元さんと元コンテンツの人とコメントの人のおかげです。
(。-∀-)有り難や。
2/26追記： ‥不安なので書いてみた。
- after擬似クラスで書いたものに変形プロパティかけてみる。（Firefox3.5以上/Safari4/Chrome3以上。）
大丈夫っぽい(。-∀-)b
コメント投稿フォーム