phiary
今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-sizing プロパティを指定することでボックスサイズ(width, height) の算出方法を指定することができます. あまり普及していないようですが, 実はこれめちゃめちゃ便利だったりします!! まだ独自実装レベルだからかもしれません. ですが, 現在のCSS3 の草案にも 一応残ってるので, がっつり使わせて頂いてる次第です.
これは使いやすい、美しいCSS3グラデーションのボタンが簡単に作成できるオンラインツール -CssGradientButton
パネル右：グラデーションやシャドウなどの編集 作成が完了したら、コードを下部に生成されます。 生成されるコードは下記のようになっています。 <!DOCTYPE html><html><head> <style type="text/css"> .button_example{ border:solid 1px #819bcb; -webkit-border-radius: 3px;width:150px; -moz-border-radius: 3px;border-radius: 3px; font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center;
[CSS]ボタンのクリックを楽しくするCSS3アニメーションのテクニックいろいろ
ボタンをCSS3で美しくスタイルするだけでなく、ホバー・アクティブ時にもかっこいいCSS3アニメーションを使った7種類のテクニックを紹介します。 ちょっと前まではこういったアニメーションはFlashかJavaScriptを使用しないとでしたが、今ではもうCSS3でとなってきましたね。 Demo 1 ボタン内のテキストや画像は、span要素やimg要素で配置されており、それらをa要素で内包して実装します。 <a href="#" class="a-btn"> <span class="a-btn-slide-text">$29</span> <img src="images/icons/1.png" alt="Photos" /> <span class="a-btn-text"><small>Available on the Apple</small> App Store</span> <
CSSでモーダル・ウィンドウ
pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ Demo: Pure CSS Modal Window .window { opacity: 0; pointer-events: none; } で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。 .window:target { opacity: 1; pointer-events: auto; } 簡単！ デモのようにposition: fixed;とかしておくとよりら
スタイルシート関連の便利なオンラインツールのまとめ
スタイルシートの制作、確認などに役立つ、便利なオンラインツールを紹介します。 [ad#ad-2] ジェネレーター：ベーシック系 ジェネレーター：ボタン、画像使わない系 制作補助、診断、確認 リファレンス、対応ブラウザなど ジェネレーター：ベーシック系
JavaScriptなし!! CSSだけで実現する3Dアニメーション | HTML5GOGO
CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。 イメージ 概要 今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。 ※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。 ※対応ブラウザ：Chrome 12～, Safari 5～ Mozillaは「現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。」だそうです。 MDN – CSS transforms の利用 ※グラフィックボードが3Dの表現に対応している必要があります。 ※動作にはCPUパワーが少々必要になります。 HTMLサンプル ※各面はリンクになっています。 回転方向を指定できるコントローラー付きのサン
CSS3のベンダープレフィックスを自動で付けてくれる手軽で軽量なJavaScriptライブラリ・cssFx.js - かちびと.net
久しぶりにかなり便利そうな気がした ので備忘録。CSS3で各ブラウザに対応 させるために加えるプレフィックスを 自動で付けてくれるライブラリです。 将来的にCSS3のプレフィックスは付け る必要が無くなるのでそうなったら これを外せばいいだけですね。 使い方もすごく簡単で3.7KBと軽量です。cssが管理しにくくて困ってる方は検討してみてはいかがでしょう。また、jQueryやmootoolsのようなライブラリに依存しないのも素敵ですね。 地味にいいかも。CSSPrefixerみたいにプレフィックスを付けてくれるWebサービスはいくつか存在しますが、こういうのがあるのは多くの人が面倒だと思っているからですしね。これを、jsで付けようぜ、というのがcssFx.jsです。 何より、将来的にプレフィックスは不要になるので、そのときのメンテナンスもこれにしておけば、外すだけで済むので楽ですよね。 C
CSS3対応、スタイルシートの記述で気をつけるべき19のポイント
The CSS Lint Rules [ad#ad-2] 以下は、スタイルシートをオンラインでチェックできるツール「CSS Lint」で使用しているルールを意訳したものです。 スタイルシートの記述で気をつけたい19のポイント スタイルシートの記述ミスはしない これは一番大切なことです。 1文字でもタイプミスをしないようにしましょう。 隣接クラスは避ける 「.foo.bar」のような隣接クラスはIE6などでサポートしてないので、使用には注意してください。 空のルールを残しておかない 空のルールとはプロパティを指定していないものです。 .foo {} これは単にファイルの容量を肥大化させるだけなので、削除します。 display使用時のプロパティに注意 スタイルシートではプロパティのグループを一緒に定義することができますが、displayを使用する際には下記のものがそれぞれ無視されます。 di
[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック
アニメーションのエフェクトを仕込む際、:hoverを使ってユーザーのホバー操作に対して実行することが多いですが、それ以外の擬似クラス :active, :focus, :checked, :disabled やMedia Queriesに仕込むスタイルシートのテクニックを紹介します。 CSS3 Transitions Without Using :hover [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:hover」を利用す
2011年、押さえておきたいウェブデザインの11のトレンドとテクニック
Web Design Trends in 2011 [ad#ad-2] 以下、各ポイントを意訳したものです。 1. HTML5 + CSS3 2. シンプルなカラースキーム 3. モバイル対応 4. 視差効果 5. タッチスクリーン 6. 奥行き 7. 大きい写真の背景 8. 素敵なドメイン名 9. QRコード 10. サムネイルデザイン 11. Life Stream 1. HTML5 + CSS3 HTML5とCSS3はリリースされてから今日まで、あまり多くは使用されませんでした。しかし、この2011年、多くのサイトで採用されるようになるはずです。 多くのデザイナーはFlashから離れてはじめています。次の2つのサイトを見てみてください。 Scribblertoo(Flash) ここで注意してほしいのは、FlashとHTML5は敵対するものではないことを理解しておいてください。問題は、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
CSS 20 stunning examples of CSS 3D transforms