クロスブラウザ対応、CSS3をベースにして作成したナビゲーションのテンプレート集を紹介します。 HTML/CSSの初心者の人でも簡単に利用できると思います。
プロフェッショナル向きに開発された、HTML5+CSS3+jQueryなど直接実装に関わるファイルから、robots.txt, .htaccessなどサーバー関連のファイルも一式にまとまったテンプレートを紹介します。 HTML5 Boilerplate 昨日、当サイトで紹介した「HTML5 Reset」もHTML5+CSS3をベースに開発されたテンプレートセットですが、こちらはよりプロフェッショナル向けに開発されたものとなっています。 下記にその特徴を。 HTML5 Boilerplateの主な特長 クロスブラウザ対応(IE6も) HTML5対応 キャッシュの最適化と圧縮でGrade-Aのパフォーマンス モバイルブラウザへの最適化 クロスブラウザ対応のためにIEでは特定のclassを用意 プリント用のスタイルシート、パフォーマンスの最適化 HTML5でより早いページロードにする「.htac
Version 1.4. Made by Mike Plate @mikeplate Source code on GitHub User interface made with Dojo Reference of CSS3 capabilites from Where can I use and QuirksMode Icons from Farm-Fresh Web Icons Font stacks selected from A Way Back Clipboard copying with Zero Clipboard No copyright. Use everything in any way you like. Use this web application to experiment and learn about new css3 capabilities. The
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成:コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
Six Useful CSS3 Tools | Tools 便利な6つのCSS3ツールがまとまったエントリを+αでご紹介。 まだ覚えていないプロパティなんかもWYSIWYGやジェネレート等で簡単に理解&覚えることが可能です。 CSS3 Button Maker CSS3なボタンメーカー。角丸やシャドウの指定が可能 CSS3 Generator CSS3を使ったスタイル効果をブラウザ上で簡単ジェネレート CSS3 Please! クロスブラウザ向けのradiusやshadow等を一括生成 CSS3 Gradient Generator CSS3のグラデーション生成ツール CSS3 Transforms WYSIWYGでCSS3のtransformプロパティを生成可能 CSS3 Selectors Test ブラウザのCSS3対応状況が分かるツール CSS3 Click Chart by Im
CSS has always been the foundation of every web design on the internet. And with the introduction of CSS3, things have become pretty interesting. CSS3 has introduced many new CSS properties that can be exploited by the web designers and developers to create some great CSS3 effects. However, the major drawback of all those new CSS3 properties is that most of them have multiple browser-specific impl
The moments after your phone gets wet are crucial. Follow these steps to improve your chances of saving your device. … Read more
Building a custom HTML5 video player with CSS3 and jQuery - Opera Developer Community CSS3とjQueryでHTML5動画プレイヤーを自作するチュートリアルが公開されています。 ライブラリは数多く公開されていますが、自分で作るのが一番自由度が高いということで、自作したい場合に参考にできそうです。 作ったものはjQueryのプラグインなので、再利用も出来ます。 HTML5非対応ブラウザ用にFlashでのカバーをする機能も既存ライブラリなどを参考にして実装してみるのもよいかもしれません。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能にするライブラリ集 CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装J
CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス
CSS3のボックスシャドウを内向きにし、画像の四辺をぼかしたエフェクトにするスタイルシートを紹介します。 CSS の box-shadow を使った画像輪郭のぼかし デモページ 対応ブラウザはChrome, Safari, Firefox, Operaで、IEは非対応とのことです。下記はFirefoxでのキャプチャです。 全体のキャプチャ 当サイトの記事「画像の四辺のボーダーを一味違ったスタイルにするチュートリアル」が参考になったとのことで、嬉しい限りです。 昨日、紹介したIEをCSS3対応にする「CSS3 PIE」がbox-shadowもサポートしているのでやってみましたが、insetへの対応は未なのかな、残念。
Kick-ass CSS3 Support in IE6, 7, and 8 | AEXT.NET MAGAZINE IE6-8でもCSS3に対応するライブラリまとめ。 IEでCSS3に対応するには behavior で htcを指定する方法が簡単で便利ということでライブラリが色々あるようだったのでまとめました。 そんなに多機能はいらないという場合に、機能を削ったものを使うという方法もありかもしれません。 CSS3 PIE 角丸、ドロップシャドウ、グラデーション背景等、多くのプロパティに対応していて今後も対応を強化 IE-CSS3 border-radius、box-shadow、text-shadow等のプロパティが使えるようになる。いかがスタイリング例 css3shadow.htc テキストに影をつけるためのhtc curved-corner - Project Hosting on
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. Try the Demo This quick demo shows just a few of the CSS3 properties PIE can render. Use the controls to adjust the CSS3 applied to the box. Load this page in IE to see that it is rendered properly!
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform(変形)、box-shadow(影)、gradient(グラデーション)ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transform cssSandpaperを使用した際のtransfo
FlashもJavaScriptも使用せずに、スタイルシートでページをめくるアニメーションを実装した「Pure CSS3 Page Flip Effect」を紹介します。 Pure CSS3 Page Flip Effect デモページ 対応ブラウザはChrome, Safariと限定されたものですが、CSS3グラデーションやクリッピングを使用してリアルなアニメーションが実現されています。 Román Cortésでは他にもスタイルシートのすご技が掲載されているので、まだの方はぜひご覧ください。 CSSで実装した、ものすごいパララックス(視差)効果 スタイルシートのすご技、スムーズに回転するコーラの空き缶
ビギナーにも分かりやすくステップごとに解説された、CSS3でスタイリングしたボタンを実装するチュートリアルを紹介します。 Create a CSS3 Call to Action Button 下記は、各ポイントを意訳したものです。 Basic HTML まずはHTMLから始めましょう。 標準的なリンク要素に「.btn」というclass名をつけます。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="linear"> <a href="http://www.sixrevisions.com" class="btn">CLICK THIS BUTTON</a> </div> </textarea>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く