opacity,text-shadow,box-shadow - 備忘録 python,統計,読書etc..

オパシテイ｜要素名{opacity:"o"}

"O"=透明度。1を100％（不透明）とし、小数点第一位から透明の割合を出す。

html

<div id="wrapper">
	<p class="opacity100">透明度100%</p>
	<p class="opacity70">透明度60%</p>
	<p class="opacity30">透明度30</p>
</div>

css

 #wrapper{
   background:#000;
   width:200px;
   height:200px;
   }

.opacity100{
  opacity:1;
  background:#FF0;
  height:30px;
  }

.opacity70{
  opacity:0.7;
  background:#FF0;
  height:30px;
  }
  
 .opacity30{
  opacity:0.3;
  background:#FF0;
  height:30px;
  }

出力結果

透明度100%

透明度60%

透明度30%

テキストシャドウ|text-shadow(x,y,z rgba(r,g,b,o))

X=水平方向に伸びるシャドウの距離
y=垂直方向に伸びるシャドウの距離
z=省略可能。指定した場合シャドウのぼかし具合
r=赤(red)
g=緑(green)
b=青(blue)
o=透明度(opacity)

html

<p class="ts01">Text-shadow</p>
<p class="ts02">Text-shadow</p>
<p class="ts03">Text-shadow</p>
<p class="ts04">Text-shadow</p>
<p class="ts05">Text-shadow</p>
<p class="ts06">Text-shadow</p>
<p class="ts07">Text-shadow</p>

css

.ts01{
  background: rgb(130, 45, 63);
  color: white;
  text-shadow: 2px 4px 0 rgba(0,0,0,0.3);
  }
.ts02{
  background: #222;
  color: rgba(0,0,0,0.6);
  text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
  }
.ts03{
   background: rgb(32,160,160);
  color: transparent;
  text-shadow:   0 0 0 rgba(0,0,0,0.9),
                .25em 0 0 rgba(0,0,0,0.5),
               -.25em 0 0 rgba(0,0,0,0.5);
  }
.ts04{
  font-family: Lato;
  font-weight: 100;
  background: silver;
  color: white;
  text-shadow: -3px 0 0 white;
  }
  
.ts05{
  background: sienna;
  color: lighten(sienna, 10%);
  text-shadow: 0 0 1em rgba(0,0,0,0.9);
  }
  
.ts06{
  background: lightyellow;
  color: transparent;
  text-shadow: 0 0 8px rgba(0,0,0,0.8),
               0 0 1em rgba(0,0,0,0.9);
  }
  
.ts07{
 background: rgb(30,233,66);
  color: #f1f1f1;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
               0px 8px 13px rgba(0,0,0,0.1),
               0px 18px 23px rgba(0,0,0,0.1);
  }

出力結果

Text-shadow