[B! css3] ametyokoのブックマーク

[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック

hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。実装のポイントは5つ。画像は使用しない。 spanなど、余分なHTMLは使用しない。フォントのサイズを大きくしても自動で調整される。可変。背景が画像でも水平ラインが綺麗に描かれる。実際の動作は、下記ページで確認できます。デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo

ametyoko 2014/12/02

リンク

[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ

Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ実装デモデモはbox-shadowに対応した下記のブラウザでご覧ください。対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height

ametyoko 2012/08/28

リンク

html5-memo.com

ametyoko 2012/08/09

リンク

シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy

HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。 Wirefy [ad#ad-2] Wirefyの対応ブラウザとデバイス Wirefyのデモ Wirefyの対応ブラウザとデバイス WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。 Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, IE8, IE7 iPhone (Retina) Droid (Charge/Original) iPad あらかじめセットされているMedia Queriesのブレイクポイントは6つで

ametyoko 2012/07/17

リンク

CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方

こんにちは、鴨田です。最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。注意事項として、FirefoxとWebkit系ブラウザ(Google Chrome、Safariなど)でしかベンダープレフィックスをつけていないので、それ以外のブラウザで見ると、崩れます。

ametyoko 2012/06/27

リンク

グリッドレイアウトなレスポンシブWebデザイン対応のテンプレートを手軽に生成出来るジェネレーター・Responsify

オンラインで手軽にレシポンシブWeb デザイン対応のテンプレを生成できるというジェネレーター・responsify.it のご紹介。グリッドレイアウトにも対応可能です。この手のはいくつか同じツールがありますけど、これはかなり使いやすい印象でした。操作もシンプルですし、スターターキットを生成するのに使えそうです。レスポンシブWebデザイン対応のテンプレートを手軽に生成出来るグリッドの調整が可能なジェネレーター。スマフォやタブレットでの表示確認も出来ます。操作感はよくあるグリッドレイアウトのテンプレジェネレーターと変わりません。使い方は上図の通りです。ダウンロードできるテンプレートにはjQuery、modernizrが装備されており、IE6と7にも対応したclearfixも含まれていました。総合的に見て、結構いい感じのジェネレーターじゃないかなと思います。 Responsify