デラックスでカッコいいボタンをCSS3で作成するチュートリアル:phpspot開発日誌
Build Kick-Ass Practical CSS3 Buttons | Nettuts デラックスでカッコいいボタンをCSS3で作成するチュートリアルがNettutsにて公開されています。 ホバー、クリック時に色が変わり、影が付くというエフェクト付です。 CSSなしのマークアップは以下のように<a>だけなのですが、CSS3の凄さが分かります。 <a href="#" class="button"> Follow Me </a> こうしてCSSにして外部ファイルにしてブラウザにキャッシュさせることで、デラックスなボタンを実装しつつ、転送量を少なくしたりすることも出来るところがよいですね。 関連エントリ ピュアCSS3で3Dアニメーション ピュアCSS3を使ったajaxアニメーション実装例 jQueryとCSS3で作るカラフルなスライダーウィジェット
jQueryとCSS3を使ったカラフルなレーティングシステムのサンプル:phpspot開発日誌
jQuery quickie: Colourful rating system with CSS3 jQueryとCSS3を使ったカラフルなレーティングシステムのサンプルが公開されています。 点数によって色を変え、アニメーション表示するもので、視覚的にわかりやすい投票のUIが作れますね。 動きをみたい方は以下のムービーでも見ることができます。 こうした投票のUIとしては★が一般的ですが、こういうUIも慣れるとなかなか使いやすそうですね。 関連エントリ jQueryのAjax機能を使った投票システムのサンプルプログラム reddit風のGoodかBadの投票機能実装サンプル Ajax+PHP+MySQLな投票ウィジェット jQueryとPHPでダイナミックな投票スクリプトを作成
キャプションがクロスしながら切り替わるcss3+jQueryのスライドギャラリーのサンプル
cssやプログラミングtransition slide css3とjQueryを使ったギャラリーの サンプルです。css3のtransitionを 使ってキャプションをクロスさせなが ら、切り替えています。transitionは IEが対応していないので参考という 感じで。 css3とjQueryを使ったギャラリーの サンプルです。css3のtransitionを 使ってキャプションをクロスさせなが ら、切り替えています。transitionは IEが対応していないので参考という 感じで。 という訳でサンプルです。 css3 transition slider Chromeで見ると凄くスムーズにクロススライドしてました。css3、いろいろと使いたいんですけどやはりIEが対応しないとですね・・ライブラリでドロップシャドウや角丸は対応できますけど。。 画像の切り替わり時に-moz-transi
CSS3で作る素晴らしいボタン・メニュー集「12 Excellent CSS3 Button and Menu Techniques」
TOP > WebDesign > CSS3で作る素晴らしいボタン・メニュー集「12 Excellent CSS3 Button and Menu Techniques」 いままでのCSSで画像を使ってしかできなかった表現が、CSSのみで、できるようになった次世代のCSS3。実際にもう使われていたり、名前は広く知られていたりしますが、今回紹介するのはCSS3を活かしたボタンやメニューを集めたエントリー「12 Excellent CSS3 Button and Menu Techniques」です。 Radioactive Buttons 上記のようなCSS3の機能である、グラデーション、角アール、ドロップシャドウなどをうまく使った様々なボタンやメニューのデザインTipsがまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Apple’
CSS3とHTML5でつくるテンプレート集「15 Useful CSS3 and HTML5 Templates and Frameworks」
TOP > WebDesign > CSS3とHTML5でつくるテンプレート集「15 Useful CSS3 and HTML5 Templates and Frameworks」 言葉自体ははかなり浸透してきた次世代のWEBの標準的なになっていくとされているHTML5とCSS3。ブラウザも対応してきて、一部のWEBサイトで使われ始めてきていますが、今回紹介するのはCSS3とHTML5で制作されたテンプレートを集めたエントリー「15 Useful CSS3 and HTML5 Templates and Frameworks」です。 RamblingSoul 19 CSS3 Template 様々なテンプレートが公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Ampersand HTML5 HTML5で制作されたテン
[CSS]CSS3グラデーションを使用した美しいツールバーとボタン
Experiments ツールバーもボタンもいくつかのバリエーションがあり、ノーマルタイプ、アイコンタイプ、カラーを変更したものと実用性の高いデモが公開されています。
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
CSS3 ボーダーと背景、ボックス - 血統の森 web実験小屋
血統の森: Home > web実験小屋 > CSS3 ボーダーと背景、ボックス この文書は、CSS3 borders, backgrounds and boxes - Dev.Operaをクリエイティブ・コモンズのライセンスに基づいて一部改変した日本語訳です。著作権表示は文末にあります。 この文書の翻訳についてその正確性は保証しませんが、誤り等お気づきの点がありましたら、<xmomdo@gmail.com>か、Twitterアカウント@momdo_までお願いします。 CSS3 ボーダーと背景、ボックス 日本語訳の作成日: 2010-04-06 日本語訳の更新日: 2011-10-27 はじめに この記事では、W3CのCSS3 Backgrounds and Borders仕様における新しいプロパティを使用したいくつかの例を紹介します。これらの見栄え例を閲覧するためにOpera 11かそれ
css3のtransformの実装サンプル - かちびと.net
今更ですけど、css3のサンプル をメモ代わりに記事にしておき ます。使わないと思っていました が、仕事以外で使うのでコピペ 用にメモ。 実装例をそのままコピペして使えば同様の変形が可能です。ブラウザはChromeとかFiirefox、Safariなどでご覧下さい。細かい対応状況は調べていません。数値は記事に収まり、且つ実装状態が分かるようにしています。見難かったらごめんなさい。webkit系とmoz系を一緒にしてます デフォルト デフォルトの状態 これが基準です skew / 要素を曲げる skewX(*deg) -moz-transform: skewX(30deg); -webkit-transform: skewX(30deg);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]CSS3を使用した素敵なボタンを実装するチュートリアルの決定版
ピュアCSS3を使ったajaxアニメーション実装例:phpspot開発日誌
HTML5とCSS3を使用した、ハイクオリティな無料のテンプレート集
ピュアCSS3で3Dアニメーション:phpspot開発日誌
綺麗にデザインされたCSS3ボタンのまとめ:phpspot開発日誌
[CSS]アイコンがアニメーションでズームするスタイルシート
[CSS]角丸を少しでも滑らかに実装するスタイルシートのテクニック
CSS3のみでWindows7のスタートメニューを作成したデモとサンプル:phpspot開発日誌
[CSS]画像を使用しないでもCSS3ならここまでできる実用的な実装サンプル
[CSS]CSS3グラデーションを美しく効果的に使用したチュートリアル
http://shoonm.com/2010/03/html5css3.html