ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -BoxtuffsHTML5/CSS3で作成した、ちょっと使ってみたくなるようなUIエレメントがダウンロードできるサイトを紹介します。 Boxtuffs [ad#ad-2] 掲載されている数はまだ少ないですが、どれもユニークなもので、いつかサイトで使ってみたくなるようなものばかりです。 下記に、現在掲載されているデモを全部、紹介します。 各デモのダウンロードや対応ブラウザは各ページに記載されています。
[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス） レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
[CSS]画像の四辺をふんわりとぼかすスタイルシート
CSS3のボックスシャドウを内向きにし、画像の四辺をぼかしたエフェクトにするスタイルシートを紹介します。 CSS の box-shadow を使った画像輪郭のぼかし デモページ 対応ブラウザはChrome, Safari, Firefox, Operaで、IEは非対応とのことです。下記はFirefoxでのキャプチャです。 全体のキャプチャ 当サイトの記事「画像の四辺のボーダーを一味違ったスタイルにするチュートリアル」が参考になったとのことで、嬉しい限りです。 昨日、紹介したIEをCSS3対応にする「CSS3 PIE」がbox-shadowもサポートしているのでやってみましたが、insetへの対応は未なのかな、残念。
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
[CSS]非対応ブラウザにも配慮したCSS3で実装するボタンのチュートリアル
ビギナーにも分かりやすくステップごとに解説された、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>
CSS3グラデーションと角丸を使ったボタンを簡単に作成できるジェネレーター
<textarea name="code" class="css" cols="60" rows="5"> element { -moz-border-radius: 20px 20px 20px 20px; -webkit-border-radius: 20px 20px 20px 20px; padding: 20px; background: -moz-linear-gradient(center top, #999999 23%,#ffffff 93%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0.23, #999999),color-stop(0.93, #ffffff)); } </textarea>
[CSS]CSS3グラデーションを使用した美しいツールバーとボタン
Experiments ツールバーもボタンもいくつかのバリエーションがあり、ノーマルタイプ、アイコンタイプ、カラーを変更したものと実用性の高いデモが公開されています。
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
HTML5とCSS3を使用した、ハイクオリティな無料のテンプレート集
[CSS]アイコンがアニメーションでズームするスタイルシート
[CSS]CSS3で何ができるの？ という時にみておきたいサイト集