Javascriptで指定のHTML要素を動的に角丸デザインにする方法
2006年03月15日-
スポンサード リンク
Nifty Corners
This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005.
Javascriptで指定のHTML要素を動的に角丸デザインにする方法。
NiftyCornerを使えば、単一のDIV要素を角丸デザインにすることが可能です。
例えば、次のような単一DIV要素も簡単に角丸にできます。
<div id="nifty"><p>test</p></div>
<script type="text/javascript">
Rounded("div#nifty","#377CB1","#9BD1FA"); // この1行だけで要素を角丸にすることが出来ます。
</script>
たったこれだけで、あの面倒だった角丸が実現できてしまいます。
使い方: Rounded(要素名, 背景色, 前景色);
h1,h2等の指定タグを一括して角丸にすることも可能
角丸のためには画像も一切使っておらず、色指定も可能なので便利ですね。
何よりHTMLがスッキリするのが一番のメリットでしょうか。
関連の記事検索:JavaScript, HTML
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ