HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス） レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
角丸・シャドウ・回転・文字装飾などのCSS3を生成してくれるジェネレータ「CSS Playground」*二十歳街道まっしぐら（FC2ブログ時代）
「CSS3 Playground」はCSS3を自動生成してくれるジェネレータです。 角丸やシャドウなどの調整を手軽に行え、コードを生成してくれます。 真四角の図形にほどこせる装飾ならお任せって感じですね。 以下に使ってみた様子を載せておきます。 まず「CSS3 Playground」にアクセスしましょう。 全体はこんな感じになっていて、真ん中にプレビューが表示されいます。 左側の設定をいじると、プレビューが変化していきます。 いろいろいじってみると、こういうのが作れました。 （角丸、シャドウ、テキストシャドウ、回転、背景、枠、テキスト本文がいじれました） CSS3のコードはプレビューの下に表示されています。 こちらを適用すれば、プレビュー通りに描けます。 CSS3ほんと便利ですね。 さらにこういったジェネレータがあると、コードを書くのが楽で嬉しいですね。 （本記事で紹介したサイト：CSS3
[CSS]角丸やシャドウだけではないCSS3の大切な三つのテクニック
CSS3って角丸とかシャドウとかグラデーションでしょ、という人に知っておいてほしいCSS3の大切なテクニックを紹介します。 3 Advanced CSS3 Techniques You Should Learn デモページ（※キャプチャはChrome） [ad#ad-2] 1. Advanced Selectors CSS3で最も重要といってもよい特徴の一つが「Advanced Selectors」です。簡単に説明すると、特定のHTMLエレメントに対してIDを使用しないで、スタイルを適用できるものです。 リスト要素で配置した下記のデモを見てください。 背景色を奇数番目はブルーに、更に5番目はレッドにしています。
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ピュアCSSで実装された吹き出しのデザイン例色々:phpspot開発日誌
IDEA * IDEA
http://blog.e-riverstyle.com/2010/12/css3-1.html