CSS3 の border-image で簡単にリッチなボタンを作れる未来がいつの間にかきてた - latest log
画像を使ってリッチでフレキシブルに伸び縮みするボタンやフレームを作る時みなさんはどうしているでしょうか。 従来の方法だと デザイナーさんが画像を9分割 マークアップで頑張って再現する というハードワークを強いられていましたが、 昨今のモバイル開発環境では、それ、もう要らない苦労らしいですよ。 CSS3 の border-image を使うと、9 slice(9 patch)を CSS だけで実現可能です。 用意するものは、9つに分割する前のボタン画像です。 画像を用意したら、http://border-image.com のジェネレーターを使い border-image 用のCSSを生成します。 -webkit-border-image: url(img/btn.9.png) 27 24 30 25 round; とすると、 Android Browser 2.3.3 iPhone 4S
CSS3なライブラリxcss.jsを作ってみました - ?D of K
GitHub - ofk/xcssjs デモ（オリジナルはCSSでアイコンをデザイン - Hail2uのDesign icon with CSS） デモの結果はオリジナルと同じでよく分からないかもしれませんが、CSSが違います。xcss.jsを読み込むとベンダープリフィックスは記述不要です。 つまり、どういうことかというと .rotate10 { transform: rotate(-10deg); } とCSSで書いておき、xcss.jsを読み込むと、 .rotate10 { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); } というCSSを動的に追加するライブラリです（実際はブラウ
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
Selectors
Selectors W3C Working Draft 15 December 2005 This version: http://www.w3.org/TR/2005/WD-css3-selectors-20051215 Latest version: http://www.w3.org/TR/css3-selectors Previous version: http://www.w3.org/TR/2001/CR-css3-selectors-20011113 Editors: Daniel Glazman (Invited Expert) Tantek Çelik (Invited Expert) Ian Hickson (Google) Peter Linss (former editor, Netscape/AOL) John Williams (former editor, Q
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
