2015年06月21日

borderプロパティで円形、楕円形、半円、etc

スポンサード リンク

要素の周囲に枠線(ボーダー)を付ける際に使用する borderプロパティを利用して三角形を作成し
border-radiusプロパティで四辺を丸め、円形を作ります。ボーダーの太さで、いろいろ.....できます。.
レンタルサーバーheteml

border,border-radiusプロパティで円形を作成

  ※下記 サンプルコード:HTML
           <div class="***"></div>   *** に下記コードのクラス名を入れてください。 

ボーダーで三角形を作り そのブロック要素を円形に

.bdrSikaku{ /* border で三角形 */
	width: 0; height: 0;
	border-top: 50px solid #05f;
	border-right: 50px solid #0f0;
	border-bottom: 50px solid #f0b;
	border-left: 50px solid #777;
	  }
.bdrEn{
	width: 0; height: 0;
	border-top: 50px solid #05f;
	border-right: 50px solid #0f0;
	border-bottom: 50px solid #f0b;
	border-left: 50px solid #777;
	border-radius: 50%;
	  }

 ブロック要素の高さ、幅を無しにしてボーダー幅 (ここでは50px) を設定します。
見易くする為、色を変えてます。各ボーダーが三角形になりました。
これに border-radius: 50%; を設定すると正円形になります。
そして各ボーダーの設定値を変更することでさまざまな円形を描写することができます。。
ボーダーの色は transparent で透明になり、親要素の背景色が透過します。

円形 描画コード

半円形 右上

.bdrEn-MigiUe{
	width: 0; height: 0;
	border: 50px solid transparent;
	border-top: 50px solid #05f;
	border-right: 50px solid #0f0;
	border-radius: 50%;
	  }

半円形 左下

.bdrEn-HidariSita{
	width: 0; height: 0;
	border: 50px solid transparent;
	border-bottom: 50px solid #f0b;
	border-left: 50px solid #777;
	border-radius: 50%;
	  }

1/4円形 右

.bdrEn-qtrMigi{
	width: 0; height: 0;
	border: 50px solid transparent;
	border-right: 50px solid #0f0;
	border-radius: 50%;
	  }

1/4円形 上

.bdrEn-qtrUe{
	width: 0; height: 0;
	border: 50px solid transparent;
	border-top: 50px solid #05f;
	border-radius: 50%;
	  }

扇形、 1/4円形に高さ、幅を設定して

.bdrEn-Oogi{
	width: 60px; height: 60px;
	border: 50px solid transparent;
	border-top: 50px solid #05f;
	border-radius: 50%;
	  }

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

パックマン 左向き

.bdrEn-Pacman{
	width: 0; height: 0;
	border: 50px solid green;
	border-left: 50px solid transparent;
	border-radius: 50%;
	  }

パックマン 餌を食べてます。

.pacMan-Esa {
	position: relative;
	width: 0px; height: 0px;
	border-radius: 50%;
	border: 50px solid #f0f;
	border-right-color: transparent;
	  }
.pacMan-Esa:after { /* CSS疑似要素 :before / :after */
	left: 15px; top: -10px;
	position: absolute; content: "";
	background-color: blue;
	height: 20px; width: 20px;
	border-radius: 50%;
	box-shadow: 30px 0px 1px 1px black,65px -3px 1px 2px teal;
	  }

円の外側に ぼかし をいれる。box-shadowプロパティ

.bdrEn-Bokasi{
	width: 0; height: 0;
	border: 50px solid yellow;
	border-radius: 50%;
	box-shadow: 0 0 17px 5px #fd6515;
	  } /* 横方向 縦方向 ぼかし 広がり 影の色; */

ボーダー(擬似的)を付ける。すでにborderを使っているので box-shadow

.bdrEn-Bdr{
	width: 0; height: 0;
	border: 50px solid yellow;
	border-radius: 50%;
	box-shadow: 0 0 0 5px #fd6515;
	  }

楕円形

.Daen{
	width: 0; height: 0;
	border-top: 100px solid #05f;
	border-right: 50px solid #0f0;
	border-bottom: 100px solid #f0b;
	border-left: 50px solid #f63;
	border-radius: 50%;
	  }

横向き 楕円形

.DaenYoko{
	width: 380px; height: 30px;
	border-top: 20px solid #118aff;
	border-right: 80px solid #66ff66;
	border-bottom: 20px solid #ff6ca3;
	border-left: 80px solid #fe9900;
	border-radius: 50%;
	  }

楕円形 'つ'の字ボーダー

.daEnBdr{
	height:100px;
	width:200px;
	border-radius: 50%;
	border-top:10px solid red;
	border-right:10px solid red;
	  }
posted by javaScript at 19:49 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする

2015年06月16日

box-shadow

スポンサード リンク

CSS3 の box-shadow はボックスに1つあるいは複数の影(ドロップシャドウ効果)を付加する
プロパティです。これを使うことによって、立体的な要素の表現が可能に可能になりました。
他の要素の配置に影響を与えないので重なることがあります。

box-shadowプロパティでボックスに影を表示

※下記 サンプルコード:高さ,幅,ボーダーなどのコードは省略してます。各自で設定してください。

シャドウ 外側 右方向、下方向

box-shadow構文: 水平方向 垂直方向 ぼかし 広がり 色 向き(内向きにする場合insetを付加);

.shadow {
box-shadow:6px 0px 0px 0px blue;
     } /* 水平方向 右へ 6px */
.shadow {
box-shadow:6px 7px 0px 0px blue;
     } /* 垂直方向 下へ 7px */
.shadow {
box-shadow:6px 7px 8px 0px blue; 
     } /* ぼかしを入れる 8px */
.shadow {
box-shadow:6px 7px 8px 5px blue; 
     }/* 広がりを入れる 5px */

外側 左方向、上方向

.shadow {
box-shadow:-6px -7px 0px 0px blue;
     } /* 値を'-’にすると左上に */
.shadow {
box-shadow:-6px -7px 8px 0px blue; 
     } /* ぼかしを入れる 8px */

シャドウ 内向き 左、上 // 影を内向きに付ける場合は値に(inset)を追加。

.shadow { box-shadow:
   6px 0px 0px 0px gray inset;
     } /* 水平方向 左内側へ 6px */
.shadow { box-shadow:
   6px 7px 0px 0px gray inset;
     } /* 垂直方向 上内側へ 7px */
.shadow { box-shadow:
  6px 7px 8px 0px gray inset; 
     } /* ぼかしを入れる 8px */
.shadow { box-shadow:
  6px 7px 8px 5px gray inset; 
     }/* 広がりを入れる 5px */

内向き 右、下

.shadow { box-shadow:
  -6px -7px 0px 0px gray inset;
     } /* 値を'-’にすると右下に */
.shadow { box-shadow:
  -6px -7px 8px 0px gray inset; 
     } /* ぼかしを入れる 8px */

シャドウ 外側、内側 両方に // 複数の影を指定する場合にはコンマ(,)区切りで設定。

.shadow { box-shadow:
   6px 6px 8px 0px maroon,
   6px 6px 8px 0px maroon inset;
     } /* コンマ(,)区切り */
.shadow { box-shadow:
   6px -6px 8px 0px maroon,
   6px -6px 8px 0px maroon inset;
     } /* 外側,内側 */
.shadow { box-shadow:
   -6px 6px 8px 0px maroon,
   -6px 6px 8px 0px maroon inset;
     }
.shadow { box-shadow:
   -6px -6px 8px 0px maroon,
   -6px -6px 8px 0px maroon inset;
     }

ぼかし のみを指定 // 全方向、均等に ぼかしが架かります。

.shadow { box-shadow:
   0 0 15px 0 navy;
     } /* 外向きに四方向 */
.shadow { box-shadow:
   0 0 15px 0 navy inset;
     } /* 内向きに四方向 */

広がり のみを指定 // ぼかし がないので、色がそのまま鮮明に。擬似ボーダー

.shadow { box-shadow:
   0 0 0 8px olive;
     } /* 外向きに四方向 */
.shadow { box-shadow:
   0 0 0 8px olive inset;
     } /* 内向きに四方向 */

box-shadowで擬似ボーダー

.shadow-Box {
border:7px solid green;
box-shadow:0 0 0 7px red;
 }/*本来のボーダーの外にもう一重*/
.shadow-Box {
 box-shadow:
 0 0 0 10px purple,
 0 0 0 20px aqua,
 0 0 0 30px yellow,
 0 0 0 40px fuchsia;
  }/*擬似ボーダーを4本*/

box-shadowと border-radiusで二重丸、多重円

二重丸
七重円
.shadow-Box {
   width : 80px;
   height : 80px;
   margin : 60px;
   padding : 20px;
   background : maroon;
   border:12px solid #fff;
   border-radius : 50%;
   box-shadow : 0 0 0 12px maroon;
	 }
       /* テキスト関係は省略 */


.shadow-Box {
   width : 50px; height : 50px;
   margin : 60px ; padding : 20px;
   border-radius : 50%;
   box-shadow : 
	0 0 0 5px #a757a8,
	0 0 0 10px #165e83,
	0 0 0 15px #0067C0,
	0 0 0 20px #008000,
	0 0 0 25px #ffd400,
	0 0 0 30px #f39800,
	0 0 0 35px #ed1a3d;
	 }

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

box-shadowプロパティ: まとめ

CSS 構文
  • 水平方向 垂直方向 ぼかし 広がり 色 向き; 複数設定する場合はコンマ(,)区切りで定義。
プロパティの値
  • 水平方向の影のオフセット値 正の値 で右方向、負の値 で左方向、に延びます。(必須)
  • 垂直方向の影のオフセット値: 正の値 で下方向、負の値 で上方向、に延びます。(必須)
  • ぼかしの値: 値が大きいほど、ぼかしが強くなります。0で ぼかしは無し。負の値は不可。
  • 影の広がり: 値が大きくなるほど影の範囲を全方向に拡げます。負の値で縮小。
  • 色の指定: カラーネーム、カラーコード、RGBa を使用。
  • 影の向き: 規定値では設定なし,で影は外向きです。キーワードinset を指定すると内向きに。
タグ:box-shadow
posted by javaScript at 18:47 | 大阪 ☔ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。