確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション
Example 10 エレメントのサイズとカラーを変更し、重なり順も変更。 実装 HTML HTMLの構造は、アイコン、メインテキスト、サブテキスト、3つをli要素に含めます。 <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Exceptional Service</h2> <h3 class="ca-sub">Personalized to your needs</h3> </div> </a> </li> ... </ul> [ad#ad-2] CSS アイコンに使用しているのは画像ではなく、シンボルフォントを使用します。 @font-face { font-family: 'WebSymbolsRegul
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
スマートフォン向けサイトのラジオボタンを良さ気な感じに。
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
IEでもCSS3のプロパティ、エフェクトを表現できるようにするリソース＆スニペット
CSS3 ノンサポートの IE でも CSS3 の border-radius、box-shadow、text-shadow などの、エフェクト系プロパティを利用する為のライブラリをご紹介します。また、最後に IE の filter を使ったコードもまとめてあります。 IEでも CSS3 の表現をするためのライブラリを使ってみました。IE9 がどれくらい普及するか分かりませんが、IE9 の CSS3 のサポートを見る限り、相変わらず IE だけ特別扱いしてあげないとダメなところもありそうですねー。以下のリンクで、IE9 の CSS3 サポートの状況をチェックできます。 Impressive Webs CSS3 Support in Internet Explorer 9 今回は、IE8 以下でもいくつかの CSS3 のプロパティを利用できるようにするためのライブラリを、2つほどご紹介します
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
Román Cortés » CSS 3D Meninas
Último proyecto completado: Chimeneas Rofer & Rodi Proyecto actual en curso: Arteforo (versión en castellano abajo) I’ve took the classic paint The Maids of Honour (Las Meninas) and made this CSS pseudo-3D/parallax effect. It is pure CSS, so no javascript or flash involved: only CSS and HTML code. It has been tested and it is working on Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 a
スマートフォンコーディング : ノウハウコラム ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。 そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。 そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptを紹介します。 サンプル サンプル ※iPhoneで見てみてください。 ダウンロード tilt.zip 使い方 ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。 用途 縦横でボックスの幅を切り替える 縦横で背景色を切り替える 縦（または横）の場合だけ表示する文章や画像を設置する 縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する 等々... 仕組み 仕組みはとても単純でwindow.orientatio
第11回 CSS3でアニメーションするメニューを作る | gihyo.jp
インタラクティブな反応で操作をよりわかりやすいものに 紙やiPadなどのタッチパネル端末は、そのもの自体を触ってインターフェースを操作できますが、Webサイトはそれができません。マウスやトラックパッドを使って、モニタの中のカーソルの座標を、相対的に上下左右に動かすことで画面の中を移動・操作しなければなりません。 そのため、リンクやボタンにマウスオーバーした際に、クリックできる状態であることをユーザーに示す必要があります。そうした理由から、OSの場合はカーソルが矢印から手のアイコンに変わります。 図1 マウスオーバー時に変化するカーソルアイコン。ただ、これだけでは物足りない ただ単にカーソルを変化させるだけでなく、テキストリンクやボタンなどクリックできる箇所にhover処理を加えると、よりわかりやすいインターフェースとなります。hover時に、テキストリンクの色が変わったり、下線が引かれたり
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); これは楽で便利です。 対応していな
Creating a Realistic Looking Button with CSS3 | Inference
I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3. And this is what I ended up with. I want to go into detail on the steps I took to create the button and the ef
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ultimate CSS Gradient Generator from ColorZilla
CSS-Tricks - A Website About Making Websites
新着記事