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年08月10日

text-shadowプロパティ

スポンサード リンク

CSS3のtext-shadowは文字に1つあるいは複数の影を付けるプロパティです。これを利用すれば、テキストに様々なエフェクトをかけることが可能です。 text-shadowを使用して、文字に影だけでなく、3D,立体的表現やレタープレス、エンボス効果、 袋文字、縁取り(アウトライン)文字を生成する サンプルとコードです。 ボックス要素に影を付けるには、box-shadowプロパティを使います。

text-shadowを使用して文字を装飾。

text-shadow 構文: 水平方向の距離 垂直方向の距離 ぼかしの大きさ 影の色;

ドロップシャドウ 右下方向 / 左上方向

text-shadow
.Tshadow {
   color:blue;
   font:bold 40px Arial;
   text-shadow:3px 3px 1px #999;
	  }

text-shadow
.Tshadow {
   color:blue;
   font:bold 40px Arial;
   text-shadow:-3px -3px 3px #999;
	  }
	/* ぼかしを大きく */

影の値を2つ設定

shadow
.Tshadow {
   color: #990f0a;
   font:bold 40px Arial;
   text-shadow: 2px 2px 0px #ddd,
                3px 3px 0px #888;
	  }
shadow
.Tshadow {
   color: #990f0a;
   font:bold 40px Arial;
   text-shadow: 1px 1px 0px #fff,
                3px 3px 2px #777; 
	  }

文字を縁取り

TEXT 縁取り
.Tshadow {
    color: #fff100;
    font:bold 40px Arial;
    text-shadow:
      1px  1px 1px #000,
     -1px  1px 1px #000,
      1px -1px 1px #000,
     -1px -1px 1px #000;
	   }
	 /* 縁取り 一重 *

TEXT 縁取り
.Tshadow {
    color: #fff100;
    font:bold 40px Arial;
    text-shadow:
      1px  1px 1px #000,
     -1px  1px 1px #000,
      1px -1px 1px #000,
     -1px -1px 1px #000,
      5px  5px 5px #111;
	  }
	/* 一重 ぼかしを大きく*/
CSS TEXT
.Tshadow {
   color: tomato;
   font: bold 40px Arial;
   text-shadow:
      1px  1px #fff,
      1px -1px #fff,
     -1px  1px #fff,
     -1px -1px #fff,  
      2px  2px 1px blue,
      2px -2px 1px blue,
     -2px  2px 1px blue,
     -2px -2px 1px blue;   
          }
      /* 縁取り 二重 */



CSS TEXT
.Tshadow { 
   color: #e60012;
   background: #add8e6;
   font: bold 40px Arial;
   text-shadow:
    1px  5px #fff, 1px -5px #fff,
   -1px  5px #fff,-1px -5px #fff,
    2px  4px #fff, 2px -4px #fff,
   -2px  4px #fff,-2px -4px #fff,
    3px  3px #fff, 3px -3px #fff,
   -3px  3px #fff,-3px -3px #fff,
    4px  2px #fff, 4px -2px #fff,
   -4px  2px #fff,-4px -2px #fff,
    5px  1px #fff, 5px -1px #fff,
   -5px  1px #fff,-5px -1px #fff;
	    }
	/* 縁取り白 */

白抜き文字

白抜き文字
.Tshadow {
   color: #fff;
   background: #69a2e0;
   font : bold 40px Arial;
  text-shadow:
    0px 2px red, 0px -2px red,
    2px 0px red,-2px  0px red,
    2px 2px red, 2px -2px red,
   -2px 2px red,-2px -2px red,
    0px 3px #fff, 0px -3px #fff,
    3px 0px #fff,-3px  0px #fff,
    3px 3px #fff, 3px -3px #fff,
   -3px 3px #fff,-3px -3px #fff;
       }
          /* outline 赤 */
白抜き文字
.Tshadow {
   color: #fff;
   background: #fff;
   font:bold 40px Arial;
   letter-spacing : 5px;
  text-shadow:
    1px 3px #000, 1px -3px #000,
   -1px 3px #000,-1px -3px #000,
    2px 2px #000, 2px -2px #000,
   -2px 2px #000,-2px -2px #000,
    3px 1px #000, 3px -1px #000,
   -3px 1px #000,-3px -1px #000;
          }
	/* outline 黒 */

へこんでる / 浮き出てる

レタープレス
.Tshadow {
   color: darkseagreen;
   background:lawngreen;
   font: bold 40px Arial;
  text-shadow:
     -1px -1px 1px #000,
      1px  1px 1px #fff;
        }
エンボス
.Tshadow{
   color: green;
   background: greenyellow;
   font: bold 40px Arial;
  text-shadow:
   -1px -1px 1px #fff,
    1px  2px 1px #000;
	  }

3D表現 立体的な文字

3Dテキスト
.Tshadow {
  color:#fff; background:#ddd;
  letter-spacing: 5px;
  font: bold 40px Arial;
  text-shadow:
    0 1px #aaa, 0 2px #999,
    0 3px #888, 0 4px #777,
    0 5px #666, 0 6px #555,
    0 7px #444, 0 8px #333,
    0 9px 6px #111;
	  }
3Dテキスト
.Tshadow {
  color: #ccc; background: #fff;
  letter-spacing: 5px;
  font: bold 40px Arial;
  text-shadow: 
   -1px 1px #333, -2px 2px #444,
   -3px 3px #555, -4px 4px #666,
   -5px 5px #777, -6px 6px #888,
   -7px 7px #999, -8px 8px #aaa,
   -9px 9px 0px #ccc;
        }

ネオン、グローテキスト

CSS NEON
.Tshadow {
  color:#ffc; background:#2f4f4f;
  letter-spacing: 4px;
  padding: 20px;
  font:bold 40px 'Comic Sans MS';
  text-shadow:
     0 0 0px  #000,
     0 0 5px  #fff,
     0 0 10px #fff,
     0 0 10px #0f0,
     0 0 15px #0f0,
     0 0 20px #0f0,
     0 0 30px #0f0,
     0 0 40px #0f0;
       }
Glow
テキスト
.Tshadow {
    color:#fff; background:#333;
    letter-spacing: 4px;
    padding: 20px;
    font: bold 40px Bevan,serif;
    text-shadow:
      0 0 100px #cff,
      0 0  50px #cff,
      0 0  10px #cff;
            }

傍点を打つ、文字列を飾る

文字に傍点を打つ
          <!-- HTML -->
<div class="Tshadow">
<span>●</span>文字に傍点を打つ</div>

          /* CSS */
.Tshadow {
   color: #fff; background: #f33;
   padding: 20px 10px;
   font:bold 26px 'MS PGothic'; 
      }
.Tshadow span {
    color:#f33;
    font-size: 10px;
    text-shadow:
	100px -25px 0px #ff0,
	125px -25px 0px #ff0,
	150px -25px 0px #ff0,
	175px -25px 0px #ff0,
	200px -25px 0px #ff0;
		}
      /* 日本語で強調を表す */
文字周りを飾る
          <!-- HTML -->
<div class="Tshadow">
 <span>☆</span>文字周りを飾る</div>

          /* CSS */
.Tshadow{
    font: bold 30px Arial;
    padding: 20px 10px;
      }
.Tshadow span{
    font-size: 15px;
    color:#fff;
   text-shadow:
       5px -26px red,
      40px  16px orange,
      75px -26px violet,
     110px  16px maroon,
     145px -26px green,
     180px  16px blue,
     215px -26px indigo;
		}

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

シャドウでよく使う灰色系統のカラーコード

0123456789ABCDEF

黒 #000 から次第に淡くなって白 #fff で終わっています。カラーコードは たとえば、7 の色なら#777, C の色なら#ccc。同じ値を3ツ入れるだけ、判りやすく灰色系統の濃淡ならこれでバッチリです。

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

CSS 構文
  • 水平方向の距離 垂直方向の距離 ぼかし加減 色;複数設定する場合はコンマ区切りで定義。
プロパティの値
  • 水平方向の影のオフセット値 正の値 で文字の右、負の値 で左、にシャドウを配置。(必須)
  • 垂直方向の影のオフセット値: 正の値 で文字の下、負の値 で上、にシャドウを配置。(必須)
  • ぼかしの値:大きいほど、ぼかしは大きくなり、影は薄く広くなる。省略で 0, 0で ぼかしは無し。
  • 色の指定: カラーネーム、カラーコード、RGBa を使用。色を省略した場合は文字色と同色。
タグ:text-shadow
posted by javaScript at 16:29 | 大阪 ☁ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

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