2016年08月24日

borderにグラデーションをかける

スポンサード リンク

CSSでborderにグラデーションをかけるには! borderプロパティではグラデーションを施すことはできないので、:before擬似要素 / :after擬似要素でブロック要素を生成し、その背景にCSS3の線形グラデーション(linear-gradient)を使って、グラデーションをかけボーダーのように見せてます。

CSS でグラデーションのかかったボーダーを描画

マルチドメイン、マルチデータベース、共有 SSL など多彩な機能と 256GBの大容量なサーバー環境が 月額1,000円(税抜)〜! ホームページつくるならレンタルサーバー 『ヘテムル』

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>borderにグラデーションをかける</title>
<style>
#Wrap{ width:560px; }
label{ cursor: pointer; }

   /*各クラス共通コード */
 /* 四辺にボーダー。ボーダーを太く。右,下を太く。左,下にボーダー */
.gradBdr, .bdrBold, .bdrBoldRU, .gradBdrLU{
     position: relative;  /* 相対配置(相対位置)*/
     cursor: pointer; font:bold 16px Arial;
     width:85%; background:#ffe;
     margin: 30px auto;
     padding: 15px;
         }

   /*各クラス 擬似要素 */
 .gradBdr:before, .bdrBold:before,
 .bdrBoldRU:before, .gradBdrLU:before{ /* CSS疑似要素 :before / :after */
      content: ""; display:block; /* displayプロパティ */
      position: absolute;/* 絶対配置 */
      z-index: -20; /* 重なりの順序 元の要素の背面に */
      background:linear-gradient(160deg,red,lime, blue); 
         }

.gradBdr:before{ /* 四辺にボーダー */
      top: -3px; /* 親要素からの距離 top,left,bottom,right プロパティ*/
      right: -3px;
      bottom: -3px;
      left: -3px;
   	 }

      /* 配置を変えて様々な見え方を  */
 .bdrBold:before{ /* ボーダーを太く */
      top: -13px; 
      right: -13px;
      bottom: -13px;
      left: -13px;
   	 }
 .bdrBoldRU:before{ /* 右,下を太く */
      top: -3px;
      right: -13px;
      bottom: -15px;
      left: -3px;
   	 }
 .gradBdrLU:before{ /* 左,下にボーダー */
      top: 0px;
      right: 0px;
      bottom: -13px;
      left: -8px;
   	 }

</style>
</head>
<body>
 <div id="Wrap">
    <div id="hoge" class="gradBdr">
 四方の枠線に見える箇所は 擬似要素で作成した要素の背景に、
斜めに RedからLime、Blueに変わる線形グラデーションをかけ、
 本体の背面に四辺が見えるように位置を調節して配置します.....
  </div>
 <form style="margin:auto ; width: 90%">
  <fieldset>
   <legend>配置の値を変更</legend>
   <label><input type="radio" name="raj" onclick="fnc33()" />
     ボーダーを太くする。</label>
   <label><input type="radio" name="raj" onclick="fnc44()" />
     右,下ボーダーを太く</label>
   <label><input type="radio" name="raj" onclick="fnc55()" />
     左,下にボーダー</label><br />
   <label><input type="radio" name="raj" onclick="fnc66()" checked="checked" />
     初期値</label>
  <p style="color : #dc143c;"> 配置の値: <code id="gradVal">
     top: -3px;right: -3px; bottom: -3px;left: -3px;</code></p>
  </fieldset>
</form>

<script type="text/javascript">
var gradBox = document.getElementById("hoge");
var gradIti = document.getElementById("gradVal");

function fnc00(){//マウスカーソルが乗った時
   gradBox.style.zIndex = "10";
     }

function fnc11(){//マウスカーソルが外れた時
    gradBox.style.zIndex = "";
    gradBox.style.borderRadius= "0";
     }

function fnc22(){ //角丸
    gradBox.style.zIndex = "";
    gradBox.style.borderRadius= "20%"; // 角丸 border-radiusプロパティ
     }

function fnc33(){ // 太く
    gradBox.className = "bdrBold"; // クラス名 設定,変更
    gradIti.innerHTML ="top:-13px; right:-13px; bottom:-13px; left:-13px;";
     }

function fnc44(){ //右,下を太く
    gradBox.className = "bdrBoldRU";
    gradIti.innerHTML ="top:-3px; right:-13px; bottom:-15px;left:-3px;";
     }

function fnc55(){ //左,下にボーダー
    gradBox.className = "gradBdrLU";
    gradIti.innerHTML = "top:0px; right:0px; bottom:-13px; left:-8px;";
     }

function fnc66(){ //初期値
    gradBox.className = "gradBdr";
    gradIti.innerHTML = "top:-3px; right:-3px; bottom:-3px; left:-3px;";
     }

       //イベントに関数を指定
    gradBox.onmouseover = fnc00;
    gradBox.onmouseout  = fnc11;
    gradBox.onclick  = fnc22;
</script>

 </div>
</body>
</html>

グラデーションボーダー 上下、左右 、左下 個別に設定

上下のボーダーにグラデーションがかかったようにする。

左右のボーダーにグラデーションがかかったようにする。

左と下のボーダーにグラデーション、見出し用。

  /*----- HTML -----*/
<p class="bdrGrad-yoko">
上下のボーダーにグラデーションがかかったようにする。</p>

<div class="bdrGrad-tate">
左右のボーダーにグラデーションがかかったようにする。</div>

<h3  class="bdrGrad-midasi">
左と下のボーダーにグラデーション、見出し用。</h3>

 /*----- CSS -----*/
  .bdrGrad-yoko{  /* 上下のボーダー */
	position: relative;
	margin:auto; margin-top:2em;
	padding:20px 0;
	width: 90%; height:100%;
	text-align: center;
	font:bold 16px Arial;
	border-left: 2px solid fuchsia;
	border-right:2px solid blue;
	  }

.bdrGrad-yoko:before, .bdrGrad-yoko:after{
	position:absolute;
	content:""; display:block;
	height:7px; width: 100%;
     background:
     linear-gradient(to right,fuchsia,green,orange,green,blue);
	  }
.bdrGrad-yoko:before{ /* 上 枠線 */
	top:0;left:0;
	  }
.bdrGrad-yoko:after{ /* 下 枠線 */
	bottom:0;left:0;
	  }

.bdrGrad-tate{  /* 左右のボーダー */
	position: relative;
	margin:auto;margin-top:2em;
	padding:15px 0;
	width: 90%; height: 100%;
	text-align: center;
	font:bold 16px Arial;
	border-top:2px solid navy;
	border-bottom:2px solid green;
	  }
.bdrGrad-tate:before, .bdrGrad-tate:after{
	position: absolute;
	content: ""; display: block;
	width: 10px;  height: 100%;
	background:
         linear-gradient(to bottom,navy,orange,green);  
	  }
.bdrGrad-tate:before{ /* 左 枠線 */
	top: 0; left:0;
	 }
.bdrGrad-tate:after{ /* 右 枠線 */
	top:0 ; right: 0;
	 }

.bdrGrad-midasi{  /* 見出し用 */
	position: relative;
	font:bold 16px Arial;
	margin:auto; margin-top:2em;
	padding: 5px 25px;
	width: 85%; height: 100%;
	  }
.bdrGrad-midasi:before, .bdrGrad-midasi:after{
	position: absolute;
	content:""; display: block;
	  }
.bdrGrad-midasi:before{ /* 左 枠線 */
	top: 0; left: 0px;
	height: 100%; width:15px;
	background:
         linear-gradient(to bottom,blue,yellow,blue);
	  }
.bdrGrad-midasi:after{ /* 下 枠線 */
	bottom: 0;left: 0;
	height: 2px; width: 100%;
	background:
         linear-gradient(to right, blue 50%, #fff 100%);
	  }
posted by javaScript at 01:00 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする

2015年07月03日

CSS 五輪マーク

スポンサード リンク

DIV 要素にborderプロパティ border-radiusプロパティを設定してリングを生成し、 :before擬似要素 / :after擬似要素で五輪マークの輪の外周,内周を白で縁取っています。

オリンピックマーク(五輪マーク)をCSSで描いてみました。

マルチドメイン、マルチデータベース、共有 SSL など多彩な機能と 256GBの大容量なサーバー環境が 月額1,000円(税抜)〜! ホームページつくるならレンタルサーバー 『ヘテムル』

サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで描くオリンピックマーク(五輪マーク)</title>
<style>
.gorinWrap{
	position: relative;  /* 相対配置(相対位置)*/
	height: 240px;width:500px;
	border: 1px solid #000;
	  }

	/* --- 全ての輪の基本,設定 ---*/
.gorinBox{
	margin-top:5px;	margin-left:45px;
	position: absolute; /* 絶対配置 */
	height:100px; width:100px;
	border:15px solid transparent;
	border-radius:50%;
	  }

	/* ----- 青の輪 ----- */
.blueWa{
	z-index: 0;/* 要素の重なり順序 */
	top:20px;  left:0px;/* 親要素からの距離 top,left,bottom,right プロパティ*/
	border-color: blue;
	  }
.blueCover{
	 /* 青の輪 右側,を橙の上に */
	z-index: 40;/* 要素の重なり順序 橙は z-index: 30;*/
	top:20px; left:0px;
	border-right-color: blue;
	  }
	/*----- 橙の輪 黒い輪の上へ -----*/
.orangeWa, .orangeCover{
	z-index: 30;
	top:80px;  left:70px;
	border-color: orange;
	  }
.orangeCover{ /* 橙の輪 上側 */
	border-top-color: orange;
	}
	/*----- 黒の輪 -----*/
.blackWa{
	z-index: 20;
	top:20px;  left:140px;
	border-color: black;
	  }
.blackCover{ /* 黒の輪 下側,を橙の上に */
	z-index: 40;
	top:20px;  left:140px;
	border-bottom-color: black;
	border-right-color: black;
	  }
	/*----- 緑の輪 -----*/
.greenWa{
	z-index: 20;
	top:80px;  left:210px;
	border-color: green;
	  }
.greenCover{ /* 緑の輪 左側を黒の上に */
	z-index: 50;
	top:80px;  left:210px;
	border-left-color: green;
	  }
	/*----- 赤の輪 緑の下へ -----*/
.redWa{
	z-index: 10;
    	top:20px; left:280px;
	border-color: red;
	  }
.redCover{ /*赤の輪,下側を緑の上に*/
	z-index: 20;
	top:20px;  left:280px;
	border-bottom-color: red;
	  }

     /*--- 全ての輪の 縁取り(外周,内周) 共通コード ---*/
.gorinBox:before, .gorinBox:after{/* :before擬似要素 / :after擬似要素 */
	content: "";
	position: absolute;
	border:3px solid transparent;
	border-radius:50%;
	  }
.gorinBox:before{
	 /* 全ての輪の外周 */
	top:-18px;  left:-18px;
	height:130px; width:130px;
	  }
.gorinBox:after{
	 /* 全ての輪の内周 */
	top:0px;  left:0px;
	height:94px; width:94px;
	  }
.blueCover:before, .blueCover:after{
	 /* 青の輪 縁取り,右側 */
	border-right:3px solid #fff;
	  }
.orangeCover:before, .orangeCover:after{
	 /* 橙の輪 縁取り */
	border:3px solid #fff;
	  }
.blackCover:before, .blackCover:after{
	 /* 黒の輪 縁取り,下側 右側*/
	border-bottom:3px solid #fff;
	border-right:3px solid #fff;
	  }
.blackCover:after{
	 /* 黒の輪 縁取り,内周左側を透過 */
	border-left:3px solid transparent;
	 }
.greenWa:before, .greenWa:after{
	 /* 緑の輪 縁取り,上側 */
	border-top:3px solid #fff;
	  }
.greenCover:before, .greenCover:after{
	 /* 緑の輪 縁取り,左側 */
	border-left:3px solid #fff;
	  }
.redCover:before, .redCover:after{
	 /*赤の輪 縁取り,下側*/
	border-bottom:3px solid #fff;
	  }
</style>
</head>
<body>
<div class="gorinWrap">
  <div class="gorinBox blueWa"></div>
  <div class="gorinBox blueCover"></div>
  <div class="gorinBox orangeWa"></div>
  <div class="gorinBox orangeCover"></div>
  <div class="gorinBox blackWa"></div>
  <div class="gorinBox blackCover"></div>
  <div class="gorinBox greenWa"></div>
  <div class="gorinBox greenCover"></div>
  <div class="gorinBox redWa"></div>
  <div class="gorinBox redCover"></div>
</div>
</body>
</html>

リングとリングの重なり,絡み合いの表現方法

  DIV要素で作った円に位置を指定して重ねると上のように青の上に橙、その上に黒と、順に重なり、後になるほど前面に表示されます。 でも五輪マークは輪を五個、並べて重ねるだけではなく、輪が全て絡み合うように 作成しなければなりません。 たとえば青色のリングでは右側のボーダーを上書きして(.blueCover)、橙の上に持ってくることで橙が下を潜っているように見せています。 他も同様にクラス名 .***Cover で重なり、絡みを表現しています。

輪が太く,色を少し淡くした五輪マーク

  /*----- HTML -----*/
    <div class="gorin20">
      <span></span>
    </div>

 /*----- CSS -----*/
  .gorin20{ /* 基点になる輪 blue */
	  margin:10px;
	  position : relative;
	  height:20px;  width:20px;
	  border-radius:50%;
	  border:20px solid #09c;
	    }

 .gorin20:before, .gorin20:after,
 .gorin20 span:before, .gorin20 span:after{
	  /* 共用コード */
	 content: "";
	 position: absolute;
	 display:block;
	 height:20px;  width:20px;
	 border-radius:50%;
	   }
.gorin20:before{ /* 橙 */
	top:8px;  left:9px;
	border:20px solid #fc0;
	  }
.gorin20:after{ /* 黒 */
	top:-20px;	left:38px;
	border:20px solid #000;
	  }
.gorin20 span:before{ /* 緑 */
	top:8px;  left:66px; z-index:1;
	border:20px solid #093;
	  }
.gorin20 span:after{ /* 赤 */
     	top:-20px;  left:94px; z-index:1;
	border:20px solid #f03;
	  }

五輪マーク 輪の配置

  blue の輪position: relative;を、残り4つの輪に position: absolute; を設定します。   これで blue の輪を基点にして配置する事ができます。 配置位置の指定は top,left,bottom,rightプロパティで行います。

:before擬似要素 :after擬似要素

:before及び:after擬似要素は 対象要素内の先頭 / 末尾にコンテンツを追加します。  これを<div>,<span>要素に指定して4ツの輪を追加しています。 CSS疑似要素 :before / :after
posted by javaScript at 21:37 | 大阪 ☁ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする
×

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