2020. 4. 18.

[HTML] 필터 강의 정리



filter:glow() 번짐효과
filter:blur() 블러효과
filter:fliph() 글자 좌우 거꾸로
filter:flipv() 글자 상하 거꾸로
filter:shadow() 짧은 그림자
filter:dropshadow() 그림자효과
filter:wave(strength=3)" 물결로
style="filter:alpha(opacity=100,style=1,finishopacity=0 필터효과 그라이데이션
onmouseover 마우스가 올라오면
onmouseout 마우스가 밖으로 나가면
style="filter:alpha(opacity=50)" 투명색 50%



일단 안된다. 버전문제 같다.

<html>
<head>
<title>필터효과</title>
<style type="text/css">
<!--
h2{width:100%;}
-->
</style>
</head>
<body>
<h2 style="filter:glow()">오늘은 텍스트 필터효과 배우는 날~</h2>
<h2 style="filter:blur()">오늘은 텍스트 필터효과 배우는 날~</h2>
<h2 style="filter:fliph()">오늘은 텍스트 필터효과 배우는 날~</h2>
<h2 style="filter:flipv()">오늘은 텍스트 필터효과 배우는 날~</h2>
<h2 style="filter:shadow()">오늘은 텍스트 필터효과 배우는 날~</h2>
<h2 style="filter:dropshadow()">오늘은 텍스트 필터효과 배우는 날~</h2>
<h2 style="filter:wave(strength=3)">오늘은 텍스트 필터효과 배우는 날~</h2>
</body>
</html>



이것도 안된다. 필터 안되는듯...
<html>
<head>
<title>필터효과</title>

</head>
<body>
<img src="img/100.jpg">
<img src="img/100.jpg" style="filter:alpha(opacity=100,style=1,finishopacity=0">
<img src="img/100.jpg" style="filter:alpha(opacity=100,style=2,finishopacity=0">
<img src="img/100.jpg" style="filter:alpha(opacity=100,style=3,finishopacity=0"><br>
<img src="img/100.jpg">
</body>
</html>


역시 안된다.

<html>
<head>
<title>필터효과</title>

</head>
<body>
<a href="#">
<img src="img/100.jpg" onmouseout="this.style.filter='filtername'" onmouseover="this.style.filter='gray'" border="0"></a>
<img src="img/100.jpg" onmouseout="this.style.filter='filtername'" onmouseover="this.style.filter='invert'" border="0"></a>
<img src="img/100.jpg" onmouseout="this.style.filter='filtername'" onmouseover="this.style.filter='xray'" border="0"></a>
<img src="img/100.jpg" onmouseout="this.style.filter='filtername'" onmouseover="this.style.filter='fliph'" border="0"></a>
<img src="img/100.jpg" onmouseout="this.style.filter='filtername'" onmouseover="this.style.filter='flipv'" border="0"></a>
</body>
</html>


필터가 들어가면 그부분이 실행이 안됨

<html>
<head>
<title>필터효과</title>

</head>
<body background="img/100.jpg">
<table width="300" height="300" bgcolor="ffffff" style="filter:alpha(opacity=50)">
<tr><Td height="80">안녕하세요</td></tr>
<tr><Td height="80">안녕하세요</td></tr>
</table>
</body>
</html>


역시..안된다..
<html>
<head>
<title>새창열기</title>
<script language="JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<a href="#" onmousedown="MM_openBrWindow('250.html','','width=250,height=250')" >
<img src="img/100.jpg"></a>
</body>
</html>



댓글 없음:

댓글 쓰기