カテゴリー:サーバー、web、ネットワーク関連






使える無料のwebサービス3 webページ・角丸ボックススタイル作成

CORNERSHOPhttp://wigflip.com/cornershop/
ボックスの角丸スタイルをジェネレートしてくれるwebツールサービスです。
tableやjavascriptを使わず、画像とcssだけで角丸を表示します。

  1. ボックスのバックの色
  2. そのボックスが乗るページのバックの色
  3. 角丸の半径のpxサイズ
  4. 角丸の外側部分の透明度

以上を総て入力、
の「Create Graphics」ボタンを押すだけで、4角のgif画像、css、htmlを瞬時に作成してくれます。

それらをコピーペースとして使用します。
なお、css部分の画像のパスは、htmlと同じ階層か「css」の階層に指定して記述されます。この辺は都合によって書き換えます。

Corner Shopを使って作成したボックスの テストページ
css 部分の「.box 」に「width:300px」を加えています。


  ●入力画面原寸サイズ

Spiffy Cornershttp://www.spiffycorners.com/sc.php
ボックスの角丸スタイルをジェネレートしてくれるwebツールサービスです。
上との比較でいうと、画像も使いません。cssだけを使用しています。
コーナーのRのサイズは指定できませんが、アンチエィリアスがかかるそうです。


上図の入力部分(原寸サイズ)
  1. class名を指定
  2. 後景の色を指定
  3. 前景の色を指定
  4. 「Show Me the Cod」ボタンを押します。
    (左図の右部分)

すると、左図の左部分に見た目のサンプルが出ます。同時にサンプルの下の方にcssとhtmlが動的に作成、表示されます。
Spiffy Comersを使って作成したボックスの テストページ

親のdivを作って、横サイズを指定し、オリジナルのままでは横方向画面いっぱいになってしまうのを押さえています。









Copyright © 2008 Conifer,Inc. All rights reserved.