CSS3를 활용해 텍스트에 효과주기
페이지 정보
작성자 서방님 댓글 0건 조회 195회 작성일 18-01-05 08:51본문
출처 : http://mcatcher3.cafe24.com/html/text/txteffect.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>테스트효과</title>
<link rel="stylesheet" type="text/css" href="css/common.css" />
</head>
<body>
<div class="mask_text01">
<svg width="450" height="100">
<defs>
<pattern id="pattern" x="0" y="0" patternUnits="userSpaceOnUse" width="300" height="200">
<image xlink:href="images/bg3.jpg" width="300" height="200" />
</pattern>
</defs>
<text x="0" y="90" font-family="Arial" font-size="80pt" font-weight="bold" fill="url(#pattern)undefinedundefined>ABCDEF</text>
</svg>
</div><!--//svg pattern이용한 마스크효과-->
<div class="shadow_text01">
<span class="txt">ABCDEF</span>
</div><!--//shadow를 이용한 3D효과01-->
<div class="shadow_text02">
<span class="txt">ABCDEF</span>
</div><!--//shadow를 이용한 3D효과02-->
<div class="shadow_text03">
<span class="txt">ABCDEF</span>
</div><!--//shadow를 이용한 3D효과03-->
<div class="shadow_text04">
<span class="txt">ABCDEF</span>
</div><!--//음각효과-->
<div class="shadow_text05">
<span class="txt">ABCDEF</span>
</div><!--//GLOW효과-->
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
