[CSS] 텍스트에 그림자와 그라데이션 함께 넣는 코딩
본문
샘플1.
<style>
h1 {
font-size: 72px;
background-image: -webkit-linear-gradient(blue, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position:relative;
}
h1:after {
background: none;
content: attr(data-text);
left: 0;
position: absolute;
/*text-shadow: 1px 1px 2px #000;*/
/*text-shadow: 0 0 2px #f00; -moz-text-shadow: 0 0 2px #f00; -webkit-text-shadow: 0 0 2px #f00; */
text-shadow: -2px 0 2px #f00, 0 2px 2px #f00, 2px 0 2px #f00, 0 -2px 2px #f00;
-moz-text-shadow: -2px 0 2px #f00, 0 2px 2px #f00, 2px 0 2px #f00, 0 -2px 2px #f00;
-webkit-text-shadow: -2px 0 2px #f00, 0 2px 2px #f00, 2px 0 2px #f00, 0 -2px 2px #f00;
top: 0;
z-index: -1;
}
</style>
<h1 data-text="hello">hello</h1>
샘플2.
코드 미리 보기 : http://jsfiddle.net/2GgqR/2/
텍스트에 그림자 효과와 그라데이션 효과를 함께 넣고 싶을 때가 있다.
물론 정식으로 코드를 제공하진 않지만 많은 사용자들이 이 효과를 위해 여러가지 방법을 동원한다.
그 중에서 가장 효율적인 방법은 아래와 같다.
위 처럼 css를 하고 아래 처럼 html을 넣으면 된다.
다만 위 코드들은 data-속성, :after과 content : 코드를 지원하는 브라우저면 텍스트에 그림자와 그라데이션 효과를 넣을 수 있다.
출처 : http://stackoverflow.com/questions/15077547/gradient-text-in-css-with-text-shadow
댓글목록 0