HTML5+CSS3でサイトを作ってみる。

■ MaskとFilter

画像にフィルターをかける(Chrome, Safariのみ)

画像やエレメントをぼかしたり、白黒にしたり、などの画像効果をつけられる。

サンプルhtml

--[ html ]-----------------------

<ul id="filter">
	<li class="blur"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="grayscale"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="sepia"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="saturate"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="hue-rotate"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="invert"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="opacity"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="brightness"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="contrast"><img src="img/backgroundLeaves.jpg"></dli>
	<li class="drop-shadow"><img src="img/backgroundLeaves.jpg"></dli>
</ul>

--[ CSS ]------------------------

.blur		{-webkit-filter:blur(30px);}
.grayscale	{-webkit-filter:grayscale(100%)}
.sepia		{-webkit-filter:sepia(100%);}
.saturate	{-webkit-filter:saturate(30%);}
.hue-rotate	{-webkit-filter:hue-rotate(50deg);}
.invert		{-webkit-filter:invert(100%);}
.opacity 	{-webkit-filter:opacity(30%);}
.brightness	{-webkit-filter:brightness(30%);}
.contrast	{-webkit-filter:contrast(30%);}
.drop-shadow{ -webkit-filter:drop-shadow(0px 0px 10px #000);}

CSSでマスクをかける(Chrome, Safariのみ)

hongkiat.comさんより

サンプルhtml

--[ html ]-----------------------

<div class="frame">
  <div class="mask-rect"> </div>
</div>

<div class="frame">
  <div class="mask-circle"> </div> 
</div>

--[ CSS ]------------------------

.frame{ /* これはサンプルをわかりやすくするための枠。必須ではない。 */
	width:150px;
	height:150px;
	border:1px solid;
	position:relative;
	display:inline-block;
}
.mask-rect {  
    position: absolute;  
    top:10px;
    left: 10px;  
    width: 200px;  
    height: 200px;  
    clip: rect(0px,100px,100px,0px);  
    background: url(../img/backgroundLeaves.jpg) repeat;
}  

.mask-circle {  
    position: absolute;  
    left: 0;  
    top:0;
    width: 200px;  
    height: 200px;  
    border-radius: 100px;  
    background: #666;  
    clip: rect(15px,100px,80px,20px);  
}  

CSSでマスクをかける2 テキストにマスク(Chrome, Safariのみ)

hongkiat.comさんより

サンプルhtml

--[ html ]-----------------------

<div id="textMask">Text Mask</div> 

--[ CSS ]------------------------

#textMask{
    font-size: 5em;  
    background: url(../img/backgroundLeaves.jpg) repeat;  
    -webkit-background-clip: text;  
    background-clip: text;  
    color: rgba(0,0,0,0);  
}