選んで、見て、使える簡単CSS3ジェネレーター「CSS3 Generator」
次世代の規格として注目されているCSS3。新しいブラウザではすでに対応していて、すでに利用しているという方もいらっしゃると思いますが、今回紹介するのは様々なCSS3ならではの処理を簡単に実現できるCSS3ジェネレーター「CSS3 Generator」です。 上記のようにものすごくシンプルなインターフェイスとなっていて、まずはCSS3で行ないたいデザイン処理を選びます。シャドウ、テキストシャドウ、線の外側に線など様々なデザイン処理が準備されています。 詳しくは以下 デザイン処理を選択するとPreview Areaとそのデザインに利用するパラメーターが出現。カスタマイズしながら、デザイン処理を確認することができます。 デザインが確定したあとはYour codeという欄にコードも自動的に出力されるため、そのまま利用することも可能です。物凄くシンプルな作りですが、これからCSS3を覚えようという方
CSS3を利用するときに役立つWEBツール6選「Six Useful CSS3 Tools」
TOP > WebDesign , WebService > CSS3を利用するときに役立つWEBツール6選「Six Useful CSS3 Tools」 徐々に利用され始めてきているCSSの新しい規格CSS3。現状のCSSでは、不可能だった表現がコードのみで可能にしてくれる次世代の規格ですが、今回紹介するのはCSS3を利用してコーディングしていく、または勉強するのに役に立つWEBツールを集めたエントリー「Six Useful CSS3 Tools」。 CSS3 Button Maker 数値を変えてデザインを確かめていけるものから、グラデーション表現の補助ツールなど様々なWEBツールがまとめられていました。以前Designdevelopで紹介したものもありますが、順に紹介したいと思います。 詳しくは以下 ■CSS3 Generator 非常にシンプルなつくりのCSSジェネレーター
ソース付きCSS3で作るボタン「10 Awesome CSS3 Buttons to use on your website」
次世代の規格として注目され、最新のブラウザでは問題なく認識ができるようになってきているCSS3。今日紹介するのはCSS3を利用してつくるボタン集「10 Awesome CSS3 Buttons to use on your website」を紹介したいと思います。 グラデーション、ドロップシャドウ、角丸など、CSS3の機能をふんだんに使って上記のような全部で10のボタンが公開されています。 詳しくは以下 ありがたいのが、見本のボタンのしたに、ソースコードがそのまま書かれており、細かい作り方まで見ることが出来ますし、CSS3で書かれているため、画像などは使っておらず、すぐに試すことができます。 デモも公開されていてデモは「10 Awesome CSS3 Buttons to use on your website」からご覧いただけます。また、ソースファイルはまとめてダウンロードすることもでき
CSS3とjQueryでHTML5動画プレイヤーを自作するチュートリアル:phpspot開発日誌
Building a custom HTML5 video player with CSS3 and jQuery - Opera Developer Community CSS3とjQueryでHTML5動画プレイヤーを自作するチュートリアルが公開されています。 ライブラリは数多く公開されていますが、自分で作るのが一番自由度が高いということで、自作したい場合に参考にできそうです。 作ったものはjQueryのプラグインなので、再利用も出来ます。 HTML5非対応ブラウザ用にFlashでのカバーをする機能も既存ライブラリなどを参考にして実装してみるのもよいかもしれません。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装J
便利なCSS3ツール6つ＋α:phpspot開発日誌
Six Useful CSS3 Tools | Tools 便利な６つのCSS3ツールがまとまったエントリを＋αでご紹介。 まだ覚えていないプロパティなんかもWYSIWYGやジェネレート等で簡単に理解＆覚えることが可能です。 CSS3 Button Maker CSS3なボタンメーカー。角丸やシャドウの指定が可能 CSS3 Generator CSS3を使ったスタイル効果をブラウザ上で簡単ジェネレート CSS3 Please! クロスブラウザ向けのradiusやshadow等を一括生成 CSS3 Gradient Generator CSS3のグラデーション生成ツール CSS3 Transforms WYSIWYGでCSS3のtransformプロパティを生成可能 CSS3 Selectors Test ブラウザのCSS3対応状況が分かるツール CSS3 Click Chart by Im
[CSS]クールなエフェクトを伴って、CSS3アニメーションで画像を拡大するスタイルシート
<textarea name="code" class="css" cols="60" rows="5"> .images{ float:left; margin-left:-20px; margin-right:-20px; margin-top:10px; -webkit-transform:scale(0.6);/*Initial size of image when page loads*/ -webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/ } .images:hover{ -webkit-transform:scale(0.8);/*When hover on images image size will increased*
机の上に写真を無造作に並べたような写真ギャラりー実装デモ:phpspot開発日誌
Interactive Photo Desk with jQuery and CSS3 | Codrops 机の上に写真を無造作に並べたような写真ギャラりー実装デモ。 jQueryとCSS3を使って次のようなドラッグ＆ドロップも可能なギャラリーを作ることが出来ます。 ソースのダウンロードも可能なので参考にしてみましょう。 Flashを使わずともこうしたことが出来るのはよいサンプルかもしれません。 ちょっと変わったギャラリーを実装したい際の参考にしましょう。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 高いカスタマイズ性を持つ画像ギャラリー実装用jQueryプラグイン「AD Gallery」 JavaScript製の画像スライダー・ギャラリーいろいろ
ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
IE6-8でもCSS3に対応するライブラリまとめ:phpspot開発日誌
Kick-ass CSS3 Support in IE6, 7, and 8 | AEXT.NET MAGAZINE IE6-8でもCSS3に対応するライブラリまとめ。 IEでCSS3に対応するには behavior で htcを指定する方法が簡単で便利ということでライブラリが色々あるようだったのでまとめました。 そんなに多機能はいらないという場合に、機能を削ったものを使うという方法もありかもしれません。 CSS3 PIE 角丸、ドロップシャドウ、グラデーション背景等、多くのプロパティに対応していて今後も対応を強化 IE-CSS3 border-radius、box-shadow、text-shadow等のプロパティが使えるようになる。いかがスタイリング例 css3shadow.htc テキストに影をつけるためのhtc curved-corner - Project Hosting on
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
IE6-8でもCSS3が使えるようになる「CSS3 PIE」:phpspot開発日誌
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな
[CSS]非対応ブラウザにも配慮したCSS3で実装するボタンのチュートリアル
ビギナーにも分かりやすくステップごとに解説された、CSS3でスタイリングしたボタンを実装するチュートリアルを紹介します。 Create a CSS3 Call to Action Button 下記は、各ポイントを意訳したものです。 Basic HTML まずはHTMLから始めましょう。 標準的なリンク要素に「.btn」というclass名をつけます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="linear"> <a href="http://www.sixrevisions.com" class="btn">CLICK THIS BUTTON</a> </div> </textarea>
モバイル用のHTML5フレームワーク「Sencha Touch」
開発者の間では次世代の規格として注目を集めているHTML5。様々な可能性を示してくれていますが、今日紹介するのはPCようでは無く、モバイル用のモバイル用のHTML5フレームワーク「Sencha Touch」です。 このフレームワークはWEBアプリに、iphoneアプリやアンドロイドアプリ並みのデザインと、操作感を可能にするフレームワークで、HTML5とCSS3を使って構築されています。 詳しくは以下 ほとんど、現在のアプリで実装されているようなことは、可能で、タップ、ダブルタップ、スワイプ、ピンチなどといった基本的な操作からAJAX、YQL、JSONP経由でデータを取得など、といったデータ連携も可能です。 フレームワークはオープンソースライセンスで提供されています。アンドロイドの動向もありますが、Appstoreは審査なども厳しくコンテンツによっては公開が難しいものが多々ありますが、こうし
css3で実装するドロップシャドウの応用・めくれた感じを作り出す - かちびと.net
css3で新たに加えられたドロップ シャドウを使って一歩進んだシャド ウを作るTipsです。画像でよく使わ れている、めくれた際に出来る様な シャドウをcssのみで実装。 以下のようなシャドウをcssのみで実装します。 CSS3 でめくれた感じのドロップシャドウを 下部の両端にドロップシャドウがあると思います。良く見る手法ですね。これを画像を使わず、css3のみで実装します。 cssとHTMLのソースは以下。 htmlは以下 <div id="shadows"> <article> <h3>CSS3 でめくれた感じのドロップシャドウを</h3> <p>下部の両端にドロップシャドウがあると思います。良く見る手法ですね。これを画像を使わず、css3のみで実装します。</p> </article> </div> css div#shadows { width: 559px; margin: 20
CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart」:phpspot開発日誌
CSS3 Click Chart by Impressive Webs CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart」。 サイトにアクセスすると、サンプルが並んでおり、クリック一発でサンプルのコードが出力されます。 更に、サポートブラウザまでが表示されるので、なんとも便利。 サンプルをクリックすると画面下部にサポートブラウザと具体的なCSS3コードが表示されます。 画面端の矢印で別画面に移動。更にサンプルを表示できます。合計22個が確認できます。 単なるリファレンスとしてだけでなく、入門用としても最適かもしれませんね。 関連エントリ ピュアCSS3で3Dアニメーション jQueryとCSS3で作るカラフルなスライダーウィジェット ピュアCSS3を使ったajaxアニメーション実装例 近未来に頻繁に使われるであろうCSS3サンプル１０
[CSS]一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。 Multiple Backgrounds and Borders with CSS 2.1 CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似要素をサポートするIE8+, Fx3.5+, Safari 4+, Chrome 4+, Opera 10+となっています。 実装の仕組みは上記の画像のように、擬似要素の「:before」と「:after」を利用したもので、複数の背景やボーダーを配置することで面白い効果が得られます。 下記にその実用的で面白い効果をもったデモを紹介します。 マルチプル バックグランド デモ：Multiple Backgrounds with CSS 2.1 CSSファイル：backgrounds.css
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3だけで実現するクリックすると色の変わるボタン実装:phpspot開発日誌
IDEA * IDEA
IDEA * IDEA
[CSS]CSS3の機能をふんだんに使用した実用的なナビゲーション