ヘッダー・コニファロゴ
ヘッダー・コニファロゴ2
コニファ・シンボルキャラクター
カテゴリー:サーバー、web、ネットワーク関連


株式会社コニファ・無料で使えるBtoB WEB受注システム・0万石 WEB受注システム(バナー用3)
無料で使えるBtoB WEB受注システム,0万石受注システム,0円,Free
無料で使えるBtoB WEB受注システム
0万石 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」を加えています。


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

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

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

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








 

|  コニファHOME  |  サイトマップ  |  会社案内  |  eメール  |
戻るボタン
Copyright© 2019 Conifer,Inc. All rights reserved.