Branberyheag Lab

IE6~8でCSS3を適用するライブラリ、CSS3PIEというのがあるようだ。
※どこかで見たと思うんだけど、完全に無視してたので、改めて調べてみた。

どんなプロパティに対応するかというと・・・

</pre>
</div>
<div><span style="color: #333333; font-family: Helvetica, Verdana, sans-serif; line-height: 18px;">
<pre style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: #eeeeee; display: block; padding-top: 10px; padding-right: 12px; padding-bottom: 10px; padding-left: 12px; background-position: initial initial; background-repeat: initial initial; border: 1px solid #cccccc;"><code>behavior: url(PIE.htc);</code></pre>
</span></div>

そのうち使ってみたいのがWebFontだ。

fontのライセンス次第だけど、サーバにアップロードして、CSSで指定すれば好みのフォントで表示できる。将来、画像で加工して見出しを作る行為自体がなくなるかもしれない。

指定の仕方は・・

More

これ、使えそうなので、メモ。

元ネタは、こちら
CSS Sprites w/out Using Background Images

背景画像を使わずにimg要素で呼び出した画像をCSSスプライトとして呼び出すテクニック。

<div>
<a href="#"><img src="rokkan.gif" alt="" /></a>
<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>

使用されている画像は、カーソルを合わせなかった時、合わせた時の画像を一枚にしている状態。

背景画像を位置変更ではなくoverflow:hidden;にしている。
コントロールは、margin-topで制御している。

.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
}
.affiliates a:hover img {
margin-top: -182px;
}

このテクニックを使う条件として、正確な画像の縦、横のサイズが分かることが必要で、hoverには、margin-topを使っている。

この記事でCSS3のtransitionを使ってアニメーション効果を出すテクニックも記載されている。

.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
margin: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
margin-top: -182px;
}

どこかで使えそうなテクニックだよね。。。

CSS3のテキストシャドーが面白い。
自分のブログで使おうと思い立って、実際付けてみるとちょっと合わなかったから付けなかったけど、面白いので、メモ。

プロパティの内容はこんな感じ。
text-shadow: X軸の移動距離 Y軸の移動距離 ぼかしの半径 シャドウの色
例）text-shadow:2px 2px 3px #000;

これ、普通に使いたい。。。

出典元
http://mantiddesign.com/archives/7703

CSS3でボックスの背景をグラーションについていろいろと調べてみた。
今のところ対応しているブラウザは、Safari , Google Chrome , Firefox

その実装方法は・・・

background: -moz-linear-gradient(top, #990, #066);　/* Firefox 用 */

background: -webkit-gradient(linear, left top, left bottom, from(#990), to(#066)); 　/* Safari,Google Chrome用 */

Firefoxでグラーデションの方向は一番最初にある「top」と記述されているところを変更すると良いみたい。（開始位置のみ指定する）
グラーデションを斜めから始めたい場合は、「left top」とすると良いらしい。

また、途中から色を加えたい場合は

background: -moz-linear-gradient(left top, #990,
 #c36 30%,
 #f60 50%,
 #000 70%,
 #066);　/* Firefox用 */
background: -webkit-gradient(linear, left top, right bottom, from(#990),
 color-stop(0.3, #c36),
 color-stop(0.5, #f60),
 color-stop(0.7, #000),
 to(#066)); 　/* Safari,Google Chrome用 */

グラデーションを透過する場合は・・・

background: -moz-linear-gradient(top,
 rgba(60,100,50,0.5),
 #066);　/* Firefox 用 */
background: -webkit-gradient(linear, left top, left bottom,
 from(rgba(60,100,50,0.5)),
 to(#066));　/* Safari,Google Chrome用 */

とするようだ。

グラデーションがCSSでできるようになって、IEにも実装されたら画像の数とか圧倒的にヘルと思う。

出典元
http://www.css-lecture.com/log/css3/css3-gradient.html

「12 Elegant, Free & High Quality HTML5+CSS3 Templates」

これを見るとHTML5のシンプルさ、CSS3のデザインの作り込み度の高さを感じられる。もうphotoshopでデザインの作り込みをするっていう作業がなくなるかもしれない。
これは大げさだけど、現実問題おおまかなデザインは、photoshopで、パーツの作り込みはCSS3でっていう時代が来そう。すごいもんだ。

個人ブログのコンセプトを練っているんだけど、HTML5で作ってもいいかもしれないな。。。

今更だけど、dtタグをフロートして、ddを横に移動する時のポイント。

dl dt{
clear:left;
float:left;
width: 任意の幅を指定する
}

dl dd{
margin-left: dtで指定幅　+ dtとddの間の余白
}

時々忘れてしまう。基本中の基本なのに・・・

やっと使ってみようとかなと思い立った。
自分がやっぱり慎重なほうでブラウザが全部対応するまでなかなか使えないのかなと思ったけど、結構使っている方が居たり、IEにはJavascriptで対応すれば良いかなと考え方が変わったので、思い切ってブログリニューアル時に使ってみようと思った。

まだ、ブラウザによってプロパティが違うためブラウザごとにプロパティを用意しておかなきゃいけないし、しかも、調べるのも面倒なのでいろいろと探していた。

CSS-EBLOGの方がまとめていたのでメモ。

http://css-eblog.com/summary/css3-summary.html

あと、CSS3ではグラデーションの使えるので、ロジックを理解できそうなサイトを見つけた。

[CSS]CSS3グラデーションの表示サンプルと指定方法のまとめ

http://coliss.com/articles/build-websites/operation/css/css3-linear-gradients.html

まだまだブラウザで対応、未対応があるけどCSS3を使うことでリッチなコンテンツなればやはり先行でも導入した方が良いと思う。

前から気になっていたIE9がついに披露されたようだ。

IEって、あまり好きじゃないブラウザだけどなんだかんだで、どうしても切っても切り離せない。コンシュマーやビジネスでも影響はとても大きいと思う。
なんと言ってもHTML5、CSS3に対応というのがなんと言っても魅力だと思う。しかも、Javascriptのスピードも格段に上がっているようだ。

リリースされて、２，３年後には確実にHTML5は、広くひろがると予想できるし、もっと面白いコンテンツが出ているだろうと思う。

• MicrosoftがIE9披露　新JavaScriptエンジン搭載でHTML5をサポート
• Internet Explorer 9: Platform Demos

メモ
あとで試してみよう。

clipプロパティ

http://www.htmq.com/style/clip.shtml

こんなプロパティがあるなんて知らなかった・・・