CSS3アニメーションナビゲーションサンプル

10/26

isaoCSS , No Comments

CSS3アニメーションを使ったナビゲーションのサンプルで良い感じものがあったので、メモ。

http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

JavaScriptを使わずにここまでアニメーションができると、もっと面白い表現ができるかもと思ってしまう。

IEでCSS3を実現するCSS3 PIE

08/30

isaoCSS No Comments

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

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

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image
  • border-radiusbox-shadowborder-imagemultiple background imageslinear-gradient as background image
に対応するみたい。
記述する方法も簡単。
</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>

あとは、パスを通すだけ。
そんなに難しくないので、どこかで試してみたい。

サーバの仕様によっては、.htaccsecを用意して「AddType text/x-component .htc」を記述しないといけないみたい。

CSS3PIE
http://css3pie.com/

CSS3を先行実装しているプロパティまとめ

03/24

isaoCSS No Comments

やっと使ってみようとかなと思い立った。
自分がやっぱり慎重なほうでブラウザが全部対応するまでなかなか使えないのかなと思ったけど、結構使っている方が居たり、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を使うことでリッチなコンテンツなればやはり先行でも導入した方が良いと思う。