지난 시간 사용했던 소스를 그대로 사용하겠습니다.
일단 7th.html 파일을 만들어서 아래 코드를 넣으세요.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Dougy's HTML5 </title>
<link rel="stylesheet" href="main04.css">
</head>
<body>
<div id="box">
<p id="text"> Text Test. </p>
</div>
</body>
</html>
그리고 main04.css 파일을 아래와 같이 만드세요.
body{
text-align:center;
}
#box{
display:block;
width:500px;
margin:50px auto;
padding:15px;
text-align:center;
border:1px solid blue;
background:orange;
-webkit-border-radius:25px;
-webkit-box-shadow:rgb(110,110,110) 10px 10px 10px;
}
#text{
font:bold 30px Century Gothic;
text-shadow:rgb(110,110,110) 3px 3px 5px;
}
어제하고 조금 다를거예요. 아래 부분이 추가 됐거든요.
text-shadow:rgb(110,110,110) 3px 3px 5px;
어제는 box에 그림자 효과를 준 것인데 오늘은 텍스트에 그림자 효과를 줬습니다.
이제부터 할 일은 박스에 그라디언트를 줄 겁니다.
background:orange; 이 부분을 아래처럼 바꿔보세요.
background:-webkit-radial-gradient(center,circle,red 0%,orange 50%);
red 0%는 빨강색이 시작하자마자 그라디언트가 시작된다는 거구요 오렌지 50%는 50%는 그리디언트가 아니라 완전히 오렌지색이 표시 되도록 하라는 의미입니다.
background:-webkit-linear-gradient(top,black,white)
위 코드도 한번 시도해 보세요. (직접 확인해 보세요. 설명은 생략할께요.)
박스나 텍스트 색을 만들 때 rgb를 사용했습니다. 여기에 투명도까지 조절하고 싶으시면 rgba 를 사용하시면 됩니다.
-webkit-box-shadow:rgba(110,110,110,.6) 10px 10px 10px;
이 코드를 사용하면 박스의 그림자가 60% 투명해 져서 좀 더 연하게 나올 겁니다.
이제 조금 다른 효과를 볼께요.
우선 html과 css 파일을 새로운걸로 바꾸겠습니다.
html은 8th.html로 해 주시고 7th.html에서 css를 main05.css로 바꿔주세요.
body{
text-align:center;
}
#box{
display:block;
width:500px;
margin:50px auto;
padding:15px;
text-align:center;
border:7px solid blue;
background:yellow;
outline:7px solid red;
}
#text{
font:bold 30px Century Gothic;
text-shadow:rgb(110,110,110) 3px 3px 5px;
}
새로운 코드는 outline 입니다. 보시면 border랑 똑 같은데 제목이 outline 으로 합니다.
그러면 border 바깥쪽으로 outline이 그려집니다.
다음은 transform 에 대해 알아 보겠는데요.
-webkit-transform:scale(1.5)
-webkit-transform:scale(1,3)
-webkit-transform:scale(-1.1)
이 3개를 하나하나씩 한번 대입해 보세요.
첫번재는 전체 box 크기가 커질것이고 두번째는 아래위 로만 3배 커질 겁니다. 그리고 3번째는 박스가 오른쪽 왼쪽이 바뀌어질 겁니다. 거울에 비치듯이요. 그러면 글자도 그렇게 나오겠죠?
직접 한번 확인해 보세요.
그리고 아래 코드를 한번 넣어 보세요.
-webkit-transform:skew(30deg);
박스가 옆으로 눕네요. 우리의 bucky (thenewboston.com)는 이 기능은 하등의 쓸모가 없다고 쓰지 말라고 하네요.
다음은 translate에 대해서 알아보겠습니다.
-webkit-transform:translate(150px, 300px); 의 의미는 x방향으로 150픽셀 y방향으로 300 픽셀 움직이라는 의미입니다.
그러면 아래처럼 한번 해 보세요.
-webkit-transform:translate(100px,100px)rotate(30deg) scale(.8);
이 의미는 뭘까요?
x방향으로 100픽셀, y 방향으로 100픽셀 움직이고 30도 회전시키고 크기는 80%로 줄이라는 의미입니다.
위 조건이 모두 적용된 화면입니다.
CSS에서 이런 기능까지 적용이 된다면 간단한 애니매이션 기능도 구현할 수 있지 않겠어요?
웬만한 플래쉬 효과는 줄 수 있을 것 같습니다.
다음 글에서는 애니메이션 효과를 한번 공부해 보도록 할께요.
아주 훌륭한 기능이 여러분들을 기다리고 있습니다. ^^
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript (2) | 2011.12.18 |
|---|---|
| HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS (0) | 2011.12.17 |
| HTML5로 비디오 보여주기 Video Tag (0) | 2011.12.17 |
| JavaScript 맛보기 (0) | 2011.12.16 |
| HTML5 CSS Animation 효과 (5) | 2011.12.15 |
| CSS3 Rounded Corner, 그림자 효과 사용하기 (0) | 2011.12.12 |
| webkit-box 좀 더 알아보기 (Flexible Box Model) (6) | 2011.12.10 |
| HTML5 화면 Layout 잡기 -2 (Flexible Box Model) (2) | 2011.12.09 |
| HTML5 화면 Layout 잡기 -1 (6) | 2011.12.09 |
| HTML5 CSS 이해하기 (0) | 2011.12.08 |