<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:hover 활용</title>
<style>
div {
width : 100px;
height : 140px;
background-image : url("../media/back.png");
background-size : 100px 140px;
}
div#img:hover {
background-image : url("../media/spade-7.png");
}
</style>
</head>
<body>
<h3>:hover 활용</h3>
<hr>
<table>
<tr><td>마우스를 올리면 카드의 앞면이 보인다.</td>
<td><div id="img"></div></td></tr></table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
padding : 5px;
border : 15px solid grey;
border-image : url("../media/checkpattern.png") 30 round;
}
</style>
</head>
<body>
<h3>이미지 테두리 만들기</h3>
<hr>
<img src="../media/sunset.png" width="150" height="100">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>text-shadow와 box-shadow</title>
<style>
h2:active {
text-align : center;
color : yellow;
text-shadow : 2px 2px 3px blue;
}
img:hover {
box-shadow : 0px 0px 5px blue;
}
</style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table>
<tr>
<td><a href="http://www.naver.com">
<img src="../media/naver.png" width="120" height="100">
</a></td>
<td><a href="http://www.chosun.com">
<img src="../media/chosun.png" width="120" height="100">
</a></td>
<td><a href="http://www.amazon.com">
<img src="../media/amazon.png" width="120" height="100">
</a>
</td>
</tr>
</table>
</body>
</html>
'IT > Css' 카테고리의 다른 글
| css3 - 레이아웃 배치, 자바스크립트 submit 제한걸기, radio, checkbox, select, textarea (0) | 2018.08.29 |
|---|---|
| css3 - 레이아웃 배치 header, nav, section, footer, float (0) | 2018.08.28 |
| css3 - float 배치, 변환(transform rotate), 전환(transition), 리스트로 수직 메뉴 만들기, list float 응용, 애니메이션 응용 keyframes (0) | 2018.08.22 |
| css3 - 배치, 리스트 꾸미기, 표 꾸미기, 폼 꾸미기 (0) | 2018.08.20 |
| css3로 웹 페이지 꾸미기 (0) | 2018.08.17 |