↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone / WebKitでしか最適化されていません)
これは簡単！ a要素ひとつでiPhone UIボタン - jsdo.it - share JavaScript, HTML5 and CSS
ちなみにiPhone / WebKitで実際に見るとこんな感じに見えます↓
今回のサンプル作成でこだわったのは、1要素に1クラスを指定するだけでiPhoneのようなデザインを実装することです。
つまり、以下のように指定するだけでiPhone風ボタンに早変わりする、というような手軽さを意識しました。
実はタイトル周りもCSSのみで実装しています。
ソースもかなりシンプル。
さらには背景の縞々模様もCSSのみで作っていたりします。
CSS3のポテンシャルは非常に高いです。
こうした比較的シンプルなデザインであればCSSのみで、かつ要素を何重にも入れ子に・・なんてしなくても実現できてしまいます。
（具体的には、:after擬似要素、:before擬似要素を匠に使うことで、無理に思えるデザインも実装できてしまったりします）
[追記] Twitterで指摘をもらいましたが、:after(:before)擬似要素はCSS3からの定義ではありません。ここで言いたかったのは、それらを工夫して使うことでCSS3の力が増し、CSSのみで複雑なデザインが実現できる、ということでした。:after(:before)擬似要素がCSS3だと勘違いされる人がいるかもしれないので追記しておきます。
iPhone4の対応で画像サイズがーという悩みを解消できることを考えると、色々とテンプレートとして作ってみるのも面白いのではないでしょうか。
ぜひぜひみなさんも色々なデザインを、少数構成で実現できるように挑戦してみてください。
ちなみにこのサンプルは、自分で作ったCSS3ジェネレーターでグラデーションを調整しながら作りました。よかったら使ってみてください。
jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。
ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。
ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。
まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。
リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS
今回のテクニックの肝は、transform-originです。このプロパティは、transform系の値を変更する際、どこを基点にするかというものになります。
このtransform-origin、デフォルト値は50% 50%となっています。つまりその要素の縦横中央、ということですね。もしこれを0 0とすれば左上が基点となり、100% 100%とすれば右下が基点となるわけです。そしてこの数値には、pxも指定することができるので、細かく位置を調整することも可能となります。
前回と合わせて連続でtext-shadowネタです。今回は、text-shdaow のぼかし部分を利用して、CSS のみでテキストをぼかすテクニックの紹介です。
今回のテクニックは text-shadow に対応しているブラウザであれば、CSS のみで実現可能です。
まずは下の jsdo.it のサンプルを見てください。（下の方にある「Play」ボタンを押すと実行されます）
スタイルをtextareaに設定しているので、ぼかし状態の文字が入力されるのが確認できると思います。
[Demo] Blur text for CSS3 - jsdo.it - share JavaScript, HTML5 and CSS
まずポイントとなるプロパティは当然、text-shadowです。
普通はテキストに影をつけるためのプロパティですね。
それを以下のようにすることでぼかし部分だけを表示することができます。
color が大事なポイントです。普通はカラーは色をつけるのが当たり前ですが、今回のテクニックの場合はこれを透明にしてしまいます。
つまり、影の上に乗っているテキストの色を透明にすることで、結果、影だけが表示されぼかし効果が残る、というわけです。
サンプルを WebKit 系ブラウザで見ている人は気づいていると思いますが、実はこのサンプルにはアニメーションを設定しています。
text-shadow のぼかし部分を 0 から 10px などに指定することで、プレゼンツールで表示されるような効果を得ることができます。ぜひ試してみてください。
元々は CSS3 Watch の記事じゃないか、というコメントを頂きました。調べたところ、そこでこのCSSに関する記事が見つかったので参考として記載しておきます。
今回は、とあるサイトで見かけた面白い表現を紹介したいと思います。
右にある画像が、その表現を拡大したものです。これはテキストに対してtext-shadowを指定しただけです。
もちろんテキストなのでコピペもできるし、textareaに指定すれば入力した文字がこのような立体的な文字になります。
下にjsdo.it上で作成したデモを載せてあります。下のほうにある「Play」ボタンを押すことでサンプルが実行されます。
サンプルはtextareaなので、自由にテキストを入力してみてください。（対応ブラウザは WebKit 系か、Firefoxです）
※ちなみにアンチエイリアスのかかったフォントじゃないとあんまりきれいに見えませんｗ
今回のこのテクニックの肝はtext-shadow（というかそれだけ）です。
この text-shadow、実は影の部分の指定を複数指定することができるのです。
意外と知らない人は知らない気がするこの指定、カンマ区切りで列挙すればひとつの要素に対して様々な影をつけることが可能になります。
さて、ではどんなことをやっているかというと、サンプルを見ていただくと一目瞭然ですがこの「影を複数指定できる」というのを利用して、立体的に見えるようにたくさんの影を指定することで実現しています。
.realTextクラスに指定している text-shadow の値の最初の 5 つが、文字が飛び出しているように見せる部分。そのあとの 7 つが、その盛り上がった文字からできる影を表現しています。
最初の 5 つの指定で、徐々に暗くなるように色を指定しています。（実際のものは同じ色でも光の当たり方によってグラデーションができます。それを表現している、というわけです）
そして次の 7 で、盛り上がった（ように見える）テキストから、さも影が落ちているような演出をしている、というわけです。
残念ながら、最初のほうにも書いた通り、対象ブラウザが限定されてしまいます。
しかし、対応していないブラウザでも、立体的に見えないだけでテキストは正常に表示されます。
なので、こうしたリッチ表現ができるブラウザにはリッチな表現を、そうでないブラウザに対しては情報にアクセスできるようにしておく、という対応ができます。いわゆる「プログレッシブ・エンハンスメント」ですね。
今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。（なぜ・・・？）
そのため、Firefox や WebKit 系ブラウザで使うには-moz-や-webkit-のベンダープレフィクスが必要です。
また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。
ということで、百聞は一見にしかず、ということでデモを見てください。
今回も CSS3 で遊んでみるシリーズです。
"今回のネタは、CSS3 で袋文字を作る"、です。
いちおう、WebKit では -webkit-text-strokeというそのものズバリなプロパティがありますが、そもそも WebKit しか対応していないこと、また微妙に縁がテキストにかぶるので（現状のままだと）使いづらい、というのがあります。
今回のネタは、見栄えはよくないですが、いちおう IE にも対応させてあります。
ただ、やっぱりネタなので実践で使うには「？」ですが、こんなこともできるよーという感じでご覧下さいｗ
ちなみに、色々なサイズを見られるように JavaScript を使って境界線の太さを調整できるようにしてあります。また、使う人がいるか分かりませんが 設定したものを CSS として書き出すようにしてあります。
今まで、CSS3 のグラデーションを利用したサンプルの作成を作成するとき、Photoshop っぽい感じでグラデーションが作れたらなーと前から思っていたので、最近 JavaScript から遠ざかっていたのもあって思い切って自分で作ってみました。
メインはグラデーションの作成ですが、Photoshop ライクなものを目指したので、Photoshop では当たり前のように出来るドロップシャドウなんかも設定できたら便利かな、と思って付け加えてあります。
ちなみに、CSS3 のグラデーションがメインなので、"CSS3 のグラデーションに対応している Firefox3.6以上か、WebKit 系のブラウザでしか動作しません"。
色々チェックはしていますが、もし不具合なんかあったら連絡もらえるとうれしいです。
連絡いただける際は、この記事へのコメントか、問い合わせからお願いします。
今回は、CSS3 のプロパティを出力するのが目的だったので、そもそも CSS3 に対応していないブラウザはすっぱり切り捨てましたｗ なので、全体的に CSS3 をめっさ使ってます。
加えて、IE6 などのブラウザを切り捨てたので、気兼ねなく色々なセレクタを使ったりしてとてもコーディングが楽でした。
CSS3 が当たり前になったらこんなに楽になるんだなー・・としみじみ思いました。早く、CSS3 をメインで使ってコーディングがしたい・・・。
考えてみたら -webkit-animation についての記事を書いていなかったので、ちょうどいいかなーと思いつつエントリー。
今回の記事は、これで決まり？な画像置換 - DKIR で紹介したz-indexのマイナス値と、-webkit-animationを使ったボタンに光るエフェクトを加える方法の紹介です。
前回 に引き続き、CSS3 で遊んでみるの第 2 段ですｗ
ちなみに今回のサンプルは、WebKit 系が先行実装している-webkit-animationを使ったものなので、Google Chrome や Safari で見ないとまったくなにも起こりませんのであしからず。（ただ、逆を返せばその他のブラウザ（もちろん IE6 も）では変化がないので、WebKit 系ブラウザで見た人向けに仕込んでおく、なんていう使い方もできちゃったりします）
最近なんだか結構 CSS3 で色々やっているのが流行ってるようなので、自分も CSS3 で遊んでみることにしました。n 内容は、「CSS3だけで丸いボタンを作る」です。
画像を見てもらうと分かるように、完全に丸いボタンです。
しかもこれ、画像は一切使っていません。使用しているのは CSS のみです。n
今回はとにかく遊んでみる、っていうのが主題なので使いどころとかは一切考えていませんｗ
それから CSS3 に対応していないブラウザで見ると、ただの真四角のボタンリンクになります。n
色々と記事を書いてきて、いざ CSS3 を使ってサンプルを作ってみよう、って思ったときに微妙にプロパティ名とかを忘れていたのでまとめてみる。ちなみにまだ草案のものもあるのでちょこちょこ更新予定。
漏れているものもあると思うので、もしなにかあったら連絡もらえると助かります。
(*) は CSS3 で定義された値
項目をクリックすると、詳細が表示されます。
[使い方] -webkit-background-size: 40px 20px;
背景画像のサイズを指定します。横 縦の順で記述します。
[使い方] -webkit-background-origin: padding;
上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。
[使い方] -webkit-background-clip: padding;
背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。border に対して、透過のある画像や、透明度のある色を指定した際に背景が border の下に表示されると問題がある場合などに使うといいと思います。
[使い方] backgorund-image: url(sample.png), url(sample2.png)...;
CSS3 では背景画像を複数指定することができるようになりました。
カンマ区切りで列挙することで、前面から背面への画像指定が可能です。
繰り返し処理や配置箇所なども同じようにカンマ区切りで指定します。（それぞれ書かれた位置が画像と対応します）
[使い方] -webkit-border-image: url(sample.png) 4 4 4 4 [round|repeat] / 4px [,4px 4px 4px];
[使い方] -webkit-border-radius: 5px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
CSS Backgrounds and Borders Module Level 3 の勧告案を受けてか、Google Chrome4 では -webkit- のプレフィクスがなくても動作するようになっています。
[使い方] display: -webkit-box;
この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。
[使い方] -webkit-box-flex: 1;
display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。
つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。
[使い方] -webkit-box-ordinal-group: 1;
display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）
[使い方] -webkit-box-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
[使い方] text-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。
[使い方] -webkit-text-stroke: 2px blue;
テキストにアウトラインを設定します。アウトラインの太さ、幅を指定します。また、以下のプロパティを使うことで個別に設定できます。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。
[使い方] -webkit-text-fill-color: white;
テキストの塗りつぶし色を指定します。color と同義ですが、こちらの値を transparent に指定することで、アウトラインのみを表示することが可能になります。
※ちなみにこれは W3C に提案されている段階なので、CSS3 の規格には取り込まれていません。
[使い方] -webkit-box-sizing: content-box [,border-box];
ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。
[使い方] -webkit-transition-property: color, background-color;
transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。
[使い方] -webkit-transition-duration: 0.5s;
transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。
[使い方] -webkit-transition-timing-function: ease-in-out;
transition の変化の具合を設定します。指定できる値は以下の通りです。
[使い方] background-image: -webkit-gradient(linear, left top, left bottom, from( white ), color-stop( 0.3, gray ), to( black ) )
[使い方] -webkit-box-reflect: below [0px -webkit-gradient()];
生成されたボックスなどを反転表示させます。また、透過 PNG 画像や、-webkit-gradient() を使用することで反転した要素にマスクをかけることもできます。
指定する値は、「above(上)、below(下)、left(左)、right(右)」で位置を、続く px で離れる距離を、最後に PNG 画像の URL か、もしくは -webkit-gradient でマスクを指定します。
[使い方] -webkit-mask-box-image: url(mask.png);
透過 PNG 画像を指定することで、ボックスにマスクをかけることができます。
[使い方] -webkit-transform: rotate(45deg);
生成されたボックスを変形(transform)させます。
指定できる値は次の通り。
| rotate(deg) | 回転（deg で指定。30deg など） |
|---|---|
| rotateX(deg) rotateY(deg) | 横(縦)回転。-webkit-transform-style、-webkit-transform と組み合わせて使うことで 3D 的表現が可能。（deg で指定。30deg など） |
| scale(xy[x,y]) | 拡大・縮小（数値を指定。1 や 0.5 など） |
| skew(deg) | スキュー(シアー)（degで指定。30deg など） |
| translate(xy[x,y]) | 移動（px で指定。30px など） |
| perspective(deg) | 遠近感（数値で指定） |
[使い方] -webkit-transform: preserve;
上で書いた -webkit-transform の変形の仕方を、2D 表示にするか、3D 表示にするかを指定します。
指定できる値は次の通り。
[使い方] -webkit-transform-origin: X Y Z;
transform の基準点を指定します。
[使い方] -webkit-backface-visibility: hidden;
rotateX などで裏返ったときにコンテンツの裏側を表示するかどうかを指定。
[使い方] @font-fase{ font-family: myFont; src: url(font.otf) format('opentype');
サーバにアップしたフォントを指定し、そのフォントがインストールされていない環境でもフォントが見えるようにする指定です。
font-family で任意の名前をつけ、src でフォントファイルのパスを指定します。
ちなみに利用する場合は、任意に付けた名前を指定することで利用できるようになります。
※使用する場合は、ライセンスなどの問題を確認した上で使うよう注意する必要があります。
[使い方] width: -moz-max-content
幅（width）の算出方法を指定するプロパティの値です。新しく追加されたのは以下の通り。
[使い方] -moz-border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;
ボーダーに画像を指定するプロパティです。ちょっと英語なので解釈が合っているか分かりませんが、どうやら仕様が変更になったようです。そのため、若干 webkit 系と指定方法が異なるので注意が必要です。
[参考：mozilla developer center]
[使い方] -moz-border-radius: 5px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。（webkit 系と指定方法が異なるので注意）
[使い方] background-image: -moz-linear-gradient(-90deg,rgb(237, 237, 237) 0%,rgb(204, 204, 204) 40%,rgb(0, 134, 224) 100%)
線状のグラデーションを指定する値です。（webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です）
参考URL: https://developer.mozilla.org/en/CSS/-moz-linear-gradient
[使い方] background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%)
円状のグラデーションを指定する値です。（webkit 系と指定方法が異なるので注意。こちらの方が仕様に則した指定方法です）
参考URL: https://developer.mozilla.org/en/CSS/-moz-radial-gradient
[使い方] -moz-background-inline-policy: bounding-box;
インライン要素の背景画像の繰り返し方を指定します。指定できる値は以下の通り。
[使い方] display: -moz-box;
この display を指定された要素内のブロック要素（p や div など）は、自動的に横並びになり、かつ最大の高さを持つ要素の高さにすべてが追従する。
[使い方] -moz-box-flex: 1;
display: box を指定された要素内に配置されたブロック要素(※)の幅の状態を指定します。（flex は "フレキシブル" の意味です）
(※)の要素のうち、box-flex で指定された数値の合計に対する割合が算出幅となります。
つまり、box-flex: 1, box-frex: 2 というふたつの要素が存在した場合、前者は親要素の 1/3 の幅を閉め、後者は 2/3 の幅を占めることになります。
[使い方] -moz-box-ordinal-group: 1;
display: box 内に配置されたブロック要素に指定します。
指定できるのは数値で、設定した数値の順番にコンテンツが表示されます。
（HTML の記述順序に関わらず出現順序を変更したい際に使用します）
[使い方] -moz-box-sizing: content-box [,border-box];
ボックスの生成するルールを設定します。content-box は、通常の CSS の仕様に沿ったボックスを生成し、border-box は IE6 の後方互換モードで代表される、width 値に border や padding が含まれるボックスを生成します。
[使い方] -moz-transform: rotate(45deg);
詳細については -webkit-transform を参照してください。
[使い方] -moz-transform-origin: X Y;
transform の基準点を指定します。
WebKit で書かれている内容を参照してください。
[使い方] -o-background-size: 50% 50%;
背景画像のサイズを指定します。横 縦の順で記述します。
[使い方] background-origin: padding;
上記の background-size で % を指定した場合の、算出方法を指定します。使える値は以下の通り。
[使い方] background-clip: padding-box;
背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。
[使い方] border-radius: 10px;
ボーダーの角を丸くするプロパティです。個別に四隅の値を設定することもできます。
CSS Backgrounds and Borders Module Level 3 が勧告候補になったため、Opera10.50 では -o- のプレフィクスがなくても動作するようになっています。
[使い方] border-image: url(bg_pickupbox.gif) 4 4 4 4 / 4px round;
[使い方] box-shadow: 2px 2px 3px #999;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。
現在は W3C の CSS3 の草案からは一端消去されている仕様となります。
また、まだ草案の段階ですが Opera ではベンダープレフィクスが取れています。
[使い方] text-shadow: 2px 2px 5px black;
左から順に、横方向のずれ、下方向のずれ、ぼかし具合、影の色、となります。box-shadow と異なり、文字自体に影を付けます。
[使い方] -o-transform: rotate(45deg);
詳しくは -webkit-transform を参照してください。
[使い方] -o-transition-property: color, background-color;
transition を適用するプロパティを設定します。all を指定するとすべてが対象となります。
[使い方] -o-transition-duration: 0.5s;
transition の変化をどれくらいの時間で表現するかを設定します。単位は s です。
[使い方] -o-transition-timing-function: ease-in-out;
transition の変化の具合を設定します。指定できる値は以下の通りです。
[使い方] background-color: rgba( 0,0,0,0.5 );
透明度を持った色を設定します。左から RGB 値を指定し、最後に 01 の間で透明度を指定します。（0 で完全な透明になります）
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
