CSSとJavaScriptで影付きの角丸ボックス要素を作る
2006年09月27日-
スポンサード リンク
Transparent custom corners and borders, version 2 | 456 Berea Street
It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency.
CSSとJavaScriptで影付きの角丸ボックス要素を作る。
次のような2重線と影がついたボックスのサンプルが公開されています。
HTMLは次のようにシンプルな形に出来るようです。
<div class="cbb">
<h1>Transparent custom corners and borders, version 2</h1> <p>This page demonstrates different uses of the technique described in the article <a href="http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/">Transparent custom corners and borders, version 2</a>. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!</p> <p>To create your own corners and borders, follow the instructions in <a href="http://www.456bereastreet.com/archive/200506/customising_custom_corners_and_borders/">Customising custom corners and borders</a>. For an example of how easy doing stuff like this will be once all browser vendors get with the times and update their CSS support, check out <a href="http://www.456bereastreet.com/archive/200509/custom_borders_with_advanced_css/">Custom borders with advanced CSS</a>.</p> <p>The CSS and JavaScript are free to use, but please create your own graphics. Thanks!</p>
</div>
デモページのソースを参考に、この仕組みを利用することで、CSSデザインの可能性が広がりそう。
※尚、IEでデモページを見たところ影は表示されないようです。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ