테스트 사이트 - 개발 중인 베타 버전입니다

신기한css소스


실행해보세요 ~!! 크롬에서.


<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Subtle Typography</title>

 <style>
 body {
  background: #666;
  padding: 1em;
 }

 h1 {
  position: relative;
  font-size: 200px;
  margin-top: 0;
  font-family: 'Myriad Pro', 'Myriad', helvetica, arial, sans-serif;
  text-shadow: 2px 3px 3px #292929;
  letter-spacing: -7px;
  -webkit-text-stroke: 1px white;
 
 }
 
 

 h1 a {
  text-decoration: none;
  color: #ffffff;
  position: absolute;

  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,0)), to(rgba(0,0,0,1)));
  text-shadow: 0 2px 0 #e9e9e9;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
 }
 
 h1 a:hover {
  color: #185a50;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1)));
  
 }

 h1:after {
  color: #dbdbdb;
  content : attr(data-title);
 }
 


 </style>
</head>
<body>
     <h1 data-title="Hello Readers"> <a href="#"> Hello Readers </a> </h1>
</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 6개

오~마우스 올라갔을때 그라데이션이...
html5 ~~
크롬에서는 아주 멋진 그라데이션인데 다른 익스플러에서는 추하네요 ㅋㅋㅋ
점점 html5를쓰는추세인가요
울나라는 익스사용자가 많아서.. 익스9부터는 잘 지원한다는데 나와봐야 알겠죠..
오 싱기하네요

게시판 목록

자유게시판

글쓰기

첫글

1개월 전
🐛 버그신고