Get step-by-step guidance on basics, advanced techniques, and best practices, to help you master CSS and create dynamic, engaging websites. View all CSS content
![CSS Tutorials on Speckyboy Design Magazine](https://cdn-ak-scissors.b.st-hatena.com/image/square/d6ef9f1830bd63640a907bf6f48ff45ac6519c9f/height=288;version=1;width=512/https%3A%2F%2Fspeckyboy.com%2Fwp-content%2Fuploads%2F2007%2F12%2Fspeckyboy-default.jpg)
ブラックに塗られたdiv要素を左からホバーするとオレンジに、右からホバーするとブルーに変更するスタイルシートのテクニックを紹介します。 HTML 最初に表示されているブラックのdiv要素と4つのdiv要素を配置します。 <div class="b-block"> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__hoverer"></div> <div class="b-block__content"> Hover me! </div> </div> CSS CSS3のtransformを使用して、div要素を移動します。 /* The wrapper */ .b-block {
Parent container Perspective "Cube" container Preserve 3D Automatic rotation X Y Z Cube Coordinates Cube x Cube y Cube z Cube rotation Cube rotate x Cube rotate y Cube rotate z Front logo (MDN) Front logo Coordinates Front x Front y Front z Front logo Rotation Front rotate x Front rotate y Front rotate z Front Backface visibilily
2011年も多くのWEB開発のためのリソースが公開され、開発者を助けてくれました。今回紹介するのは2011年に公開された中から選ばれた開発者のためのWEB開発リソース50個、紹介する「Our 50 Favorite Web Developers Resources and Tools from 2011」です。 Less Framework 4 CSSのフレームワークから、便利なjsライブラリ、オンラインツールなどなど、それぞれのジャンルで選びぬかれた50ものリソースがまとめられています。今回はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは以下 Sencha CSS3 Animator & HTML5 Animations スマートフォンのフレームワークでも有名なSenchaからリリースされて入るCSS3とHTML5をタイムラインで編集できるツール CSS
デモページ 2 実装 HTML メインとなるスライダー、サムネイル一覧、を2つのul要素で実装します。 <div id="ei-slider" class="ei-slider"> <ul class="ei-slider-large"> <li> <img src="images/large/1.jpg" alt="image01" /> <div class="ei-title"> <h2>Creative</h2> <h3>Geek</h3> </div> </li> <li>...</li> </ul> <ul class="ei-slider-thumbs"> <li class="ei-slider-element">Current</li> <li> <a href="#">Slide 1</a> <img src="images/thumbs/1.jpg" alt="thu
気になったので備忘録的に触って見ました。 ハードウェアアクセラレーターを使った CSS3の新機能を実装出来るjsライブラリ・ Alice.jsです。と、分かったような事を 書きましたが、まだちょっと勉強不足で いろいろ調査中です。ので内容にはあまり 期待しないで下さい。 アクセラレーターに関しては以下の記事がわかり易いです。 iOSのアクセラレーターが使えるCSS3 このアクセラレーターを使って高度なビジュアルエフェクトの生成をちょいと簡略化しよう、という意図で作られたライブラリみたいです。 サンプルを見たほうが早いと思いますので以下でChromeかiOSにてご覧下さい。6つ用意しました。 Sample01・TossSample02・WobbleSample03・RotateSample04・SpringSample05・BounceSample06・carousel出来ればiPhoneな
ブラウザウインドウにあわせてコンテンツが可変する可変グリッドレイアウト(リキッドレイアウトやフレキシブルレイアウト、海外ではFluid Grid Layout) 以前はFlashが得意とする表現でしたがJavascriptでできるようになったことから数年前にいろいろなサイトに使われていましたよね。 ウインドウ全体に広がるのはインパクトあるので写真中心系のサイトは見栄えがよくなりますが、テキストが入るコンテンツは若干読みにくくなりますので、用途に合わせて使い分ける形がよいですね。 この可変レイアウトですが、ブラウザ全体に可変する場合と一定の幅を最大としてそれ以下の場合に可変するサイトがあります。サイズを固定してウインドウサイズによってカラムを切り替えるというのはCSS3のMedia Queries(メディアクエリ)の考え方と同じですよね。 今回は「国内」「海外」サイトと「Wordpressの
キーフレームを使ったCSS3アニメーションの入門として、ウェブページにちょっとしたアニメーションを適用するチュートリアルを紹介します。 Enhance Your Sites with CSS3 Animations デモページ [ad#ad-2] 下記は各ポイントの意訳です。 CSS3アニメーションとは アニメーションでドロップダウンするヘッダ 透過PNGを使ったカラーアニメーション 回転するローディングのアニメーション フォームのエラーをアニメーションで強調 フォームのエラーをアニメーションで強調:その2 CSS3アニメーションとは CSS3アニメーションはエレメントに異なる見た目を順に適用するステータスから構成されています。これらのステータスを定義するにはキーフレームを使って、アニメーションの持続時間をセットします。インターバルはパーセントを使って定義し、それぞれにCSSのスタイルを指
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます! Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。 かなり詳細にまとめられているので、辞書のように使うこともできます。 印刷して参照するのが向いているので、すぐに確認で
m 150 50 c 0 50 35 65 70 30 c -35 35 -20 70 30 70 c -50 0 -65 35 -30 70 c -35 -35 -70 -20 -70 30 c 0 -50 -35 -65 -70 -30 c 35 -35 20 -70 -30 -70 c 50 0 65 -35 30 -70 c 35 35 70 20 70 -30 l 0 50 a 50 50 0 0 1 0 100 a 50 50 0 0 1 0 -100 l 0 -50 /* Apply the animation to the target element. */ /* Hardware acceleration requires a nested element for each axis. */ #target { -webkit-animation: myPathX 13
下の記事でほとんどCSSだけでアニメーションしているサンプルがっ。 -webkit-transformを使ったCSSアニメーションを試してみた at HouseTect, JavaScriptな情報をあなたに CSS3のアニメーション機能ってのはすごい。JavaScriptで動かすのに比べて簡単でかつなめらかに動く気がする。まだ、動作するブラウザが限られているっぽい(Webkit系とFirefoxくらいなのかな)んだけど、今からでもやっておくべきだと思った。 CSSアニメーション系の仕様 CSS Animations Module Level 3 CSS Transitions Module Level 3 CSS 2D Transforms Module Level 3 CSS 3D Transforms Module Level 3 CSS transformを使って3Dっぽく見せるサ
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 CSS3セレクタはW3
CSS3なら簡単! アニメーションするリングメニューを作る カテゴリ:CSS3関連 2011年7月19日 07:40 jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。 ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。 ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。 デモ まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。 リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS テクニックの肝 今
HTML5・CSS3対応のブラウザが増えてきて、制作のコンセプトも変化してきました。 プログレッシブエンハンスメントなどユーザーのブラウザ環境に焦点を置いた制作コンセプトをまとめました。 足りない知識を埋めながら書いたので一部認識が間違ってる箇所があるかも知れませんが、その場合はご指摘頂けると助かります。 Progressive Enhancement Graceful Degradation Polyfill Progressive Enhancement(プログレッシブエンハンスメント) どのブラウザでも基本的な水準のユーザーエクスペリエンスを提供をし、 新しく高水準のブラウザにはCSS3やjsなどでよりリッチなデザインや機能を提供するという考えです。 またProgressive Enhancementには下記の原則があります。 基本的な内容は、すべてのブラウザでアクセス可能である必要
Top 15 HTML5 and CSS3 Forms Tutorials | webexpedition18 HTML5&CSS3でフォームをかっこ良くするチュートリアル集 次のように検索窓をかっこよくしたり入力フォームをクールにしたりするチュートリアル集です。 CSS3の便利さは分かっているつもりでも、いざつくろうとなると頭を抱えてしまう場合もありそうですが、あらかじめこうしたサンプルでパターンを把握しておけばデザインが効率的に行えそうですね。もちろんそのまま利用させてもらうというのもありですが。 5年後のフォームはどんな物が主流になっているか楽しみですね 関連エントリ HTML5とCSS3を使ったフォームデザインのチュートリアル集30 HTML5/CSS3に関する便利ツールやチーとシート、リソース25 HTML5+CSS3でクールなオーディオプレイヤー「ZEN」 CSS3で描画された
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く