デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2
まるでガラスで作られた棚のように、美しい半透明な3Dのエレメントを実装するCSS3のテクニックを紹介します。 デモページ:Firefoxのキャプチャ 実装 HTML HTMLはシンプルで、各アイコンはa要素、ガラス棚はdiv要素で実装されています。 <div id="shelf"> <!-- Add icons here --> <a class="icon" href="#"></a> <a class="icon2" href="#"></a> <a class="icon3" href="#"></a> <!-- Surfaces of the shelf --> <div class="front"></div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> </div> CS
Free CSS Menu Templates (Navigation Menu) is one of the most important elements of a web designs.Content-Rich Website without usable navigation will be uselessNavigation Menu is one of the most important elements of a web designs. Content-Rich Website without usable navigation will be useless. If you’re looking for a free css menu template to add a navigation menu to your design Web site, these fr
スタイルシートの制作、確認などに役立つ、便利なオンラインツールを紹介します。 [ad#ad-2] ジェネレーター:ベーシック系 ジェネレーター:ボタン、画像使わない系 制作補助、診断、確認 リファレンス、対応ブラウザなど ジェネレーター:ベーシック系
Opera requests that the EU General Court secure the DMA’s promise of free browser choice... July 12th, 2024 Opera is appealing the EU Commission’s decision not to designate Microsoft Edge as a gatekeeper, and requesting to keep freedom... AI, Gaming, Opera GX Aria gets Buffed in Opera GX July 1st, 2024 Aria gets buffed in Opera GX. New features are being added to improve Aria's capabilities. Deskt
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。
HTML5+CSS3を使って、ユーザビリティを考慮した省スペースで多くのコンテンツを配置するアコーディオンパネルを実装するスタイルシートを紹介します。 デモページのキャプチャ Pure CSS3 accordionの実装 HTML5への対応 HTML5(section要素)を使用するので、サポートしていない古いブラウザ用に準備します。 <script>document.createElement('section');</script> 参考:HTML5 Shiv あとは、外部スクリプト「html5.js」を記述し、IEなどの古いブラウザでもHTML5のエレメントが利用できるようにします。 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> HTML 各パネルはsection要素で管理し、バー
Checkerboard, striped & other background patterns with CSS3 gradients [ad#ad-2] 対応ブラウザはFirefox 3.6+, Chrome, Safariです。 デモページでは画像を使用せずに、ストライプなど計6種類の背景パターンが紹介されています。 デモページ [ad#ad-2] スタイルシートは下記のようになります。 CSS:ストライプ 全てのベースとなる指定です。 L.8-10で、ストライプのサイズを指定します。 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; background-siz
IE6, 7, 8を含めたクロスブラウザに対応した、画像を使用せずにCSSでグラデーションを適用したボタンを実装する実用的なチュートリアルを紹介します。 Cross-browser CSS gradient buttons デモページ [ad#ad-2] ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。 ホバー時のキャプチャ 実装のポイント スケラービリティ 文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小 アジャスタビリティ padding, font-sizeを変更することでサイズ調整可能 フレキシビリティ あらゆるHTML要素に適用可能 コンパチビリティ 主要ブラウザに優雅なグラデーションを提供 ユーザビリティ ノーマル時、ホバー時、アクティブ時を用
CSS3で何ができるの? という時にみておきたいサイト集 ベーシックなものから実践的なテクニックまで、サンプルやコードなど実装例が掲載されているサイトをご紹介。
Zachstronaut... isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube isocube
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く