IDEA * IDEAドットインストール代表のライフハックブログ
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
CSS3で実現するMac OS Leopard風のStack実装例:phpspot開発日誌
CSS3 Stacks Experiment CSS3で実現するMac OS Leopard風のStack実装例が公開されています。 クリックすると、アニメーションしながら出てくるStackがカッコいいです。 半透明、ボーダー付き角丸となかなかのテクニックを駆使しているみたいですね。 サイトに書かれている使われているプロパティとしては、次のようなものが使用されてるそうです。 ・擬似 :target クラス ・transform ・transition ・border-radius ・border-image ・CSSグラデーション ・rgba colors ・text-overflow: ellipsis; 関連エントリ ピュアCSS3で3Dアニメーション jQueryとCSS3で作るカラフルなスライダーウィジェット 近未来に頻繁に使われるであろうCSS3サンプル１０ ピュアCSS3を使っ
iFingerScrollをtranslate3dで再実装しました - collisions.doppac.cc
■iFingerScrollを公開したあと、GmailのiPadビューのペインスクロールが自分のに比べて相当サクサクなのに気付き、どうやってんだろと思ってPCからiPadのUAを送ってソースをちょっと見てみたところ、” -webkit-transform: translate3d “をつかってdivをスクロールさせてるらしいことがわかりました。 ということでiFingerScrollもCSS Transitionでabsoluteの座標を動かすのではなく、translate3dの指定をjavaScript側の制御で動かすように再実装したところ、いい感じになりました。translate系の指定はもともとtransitionやanimation目的でGPUサポートありで実装されてるので、CSS Transition/Animationとして使わなくても速いのかもしれません（憶測）。レガシーCS
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル:phpspot開発日誌
jQueryとCSS3で文字修飾に便利なMS OfficeのMinibar風ウィジェットを実装するサンプル 2010年05月27日- Why and how to create Microsoft Office Minibar with jQuery and CSS3 jQueryとCSS3で文字修飾に便利なMS Office 2007のMinibar風ウィジェットを実装するサンプル テキストを選択すると、ツールバーがうっすらと現れ、ツールバー内のボタンを押すと、文字が修飾されるようタグを付与してくれるようなMinibar実装サンプルです。 デモページではその場でプレビューされる機能もあります。 デモでは、b, i, uタグの他、リンクタグしかありませんが、他にも追加することで、テキスト入力をより便利にすることが出来そうですね。 関連エントリ フォームのユーザビリティに貢献するjQuery
10 Mind-Blowing Experimental CSS3 Techniques & Demos
As CSS3 gathers momentum, more and more new techniques are being published every day. Each seems to explore exciting never seen before avenues, and ALL push the boundaries of CSS ever further. It really is an exciting time for web design. The post should have been called “The Top 10 Kick-Ass Experimental CSS3 Techniques That Simply Blew My Mind Away!“, but instead we opted for the more conservativ
[CSS]ふんわりとアニメーションで浮かび上がるツールチップ
スクリプトを使用しないで、ツールチップがふんわりとアニメーションで浮かび上がるスタイルシートをAdmix Webから紹介します。 Creating a Bubble Coda Style with CSS3 デモページ 使用しているのはCSS3で、ふんわりと浮かび上がるアニメーションはChrome, Safariで動作可能となっています。 CSSアニメーションに未対応のFirefoxやIEなどのブラウザでは、アニメーション無しでツールチップが表示されます。 HTML HTMLはリスト要素で実装されています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="bubblemenu"> <li> Penn Jillett <div> My favorite thing about the Internet is tha
13 Pure CSS Techniques for Creating JavaScript-like Interactions - Web Design Ledger
24 Comments Hi Henry, nice showcase and thanks for including my tutorial here! Much appreciated! Very nice effect. Hope CSS3 is fully supported in all browsers soon. If only I could use these. Unfortunately, I still have to support IE6. When will that browser ever die? Very nice collection, but if you want some more don’t miss Bouncing Navigation (CSS3-Animation Tutorial)! Ha! CSS3 will definitely
RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
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で制作されたテン
HTML5 / CSS3のソースがダウンロードできるサンプル – creamu
HTML5 / CSSでできることをざっくり掴みたい。 そんなときに参考になるのが、『Create An Elegant Website With HTML 5 And CSS3』。HTML5 / CSS3のソースがダウンロードできるサンプルです。 HTML5で使われる<section>や<aside>、<header>、<footer>などの各タグの解説と、CSSにおける「RGBa」、「box-shadow」、「border-radius」、「text-shadow」などのプロパティーの解説がされています。 デモは以下から。 Download Source ソースのダウンロードも提供されているので、参考に見てみてはいかがでしょうか？ Touch The Future: Create An Elegant Website With HTML 5 And CSS3 あることが一つ決まった。と
[CSS]CSS3グラデーションを使用した美しいツールバーとボタン
Experiments ツールバーもボタンもいくつかのバリエーションがあり、ノーマルタイプ、アイコンタイプ、カラーを変更したものと実用性の高いデモが公開されています。
クロスブラウザで動作するCSSグラデーション – creamu
CSSでグラデーションを表現したい。 そんなときにおすすめなのが、『Cross-Browser CSS Gradient』。クロスブラウザで動作するCSSグラデーションです。 画像を使わずに、ブラウザ上でグラデーションを描く方法ですね。CSS3の書き方ではFirefox3.6+やSafari4、Google ChromeなどのモダンブラウザにCSS Gradientsが効きますが、IEには対応していません。 そのため、IE用にfilterの記述を追加したものになっています。 IEのfilterでは、水平か垂直方向の2色のグラデーションしかできないため、それに対応させた書き方になっているようです。シンプルなグラデーションを表現したいときにはいいかもですね。 一度見てみてください。 Cross-Browser CSS Gradient 一つ挽回。 久々に服を買いたくなってきました。週末に見に行
【コラム】攻略! ツール・ド・プログラミング (20) Zen-Codingをカスタマイズしてさらにコーディング効率を上げる | エンタープライズ | マイコミジャーナル
Zen-Codingのその他の機能 前回はHTMLやCSSのコーディングを助ける「Zen-Coding」について、そのコード展開の機能を中心に紹介した。しかしZen-Codingに用意されて機能はそれだけではない。Notepad++の場合、コード展開以外に次のような機能がサポートされている。 ショートカットキー 機能 Ctrl + Shift + A 選択範囲を指定のタグで囲む Ctrl + Shift + D カーソルのある位置を囲む開始タグから終了タグまでを選択する Ctrl + Alt + ] 次の編集位置(属性の値など)にカーソルを移動する Ctrl + Alt + [ 前の編集位置にカーソルを移動する Ctrl + Alt + L カーソルのある位置のタグと対になっているタグに移動する(開始タグ< - 終了タグ>) Ctrl + Alt + M 複数行にまたがっているタグ(ネスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/html5-template.html
[CSS]背景画像を使用しないCSSスプライトのテクニック
IDEA * IDEA
http://www.designwalker.com/2010/05/css3.html
[CSS]HTMLとCSSだけで実装する、ごく普通のアイコン
