HTML/CSS

[CSS] 텍스트에 그림자와 그라데이션 함께 넣는 코딩

최고관리자
2018.02.27 09:09 2,792 0

본문

샘플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

등록된 댓글이 없습니다.