04.그레디언트
· 그레디언트
background : linear-gradient ( to bottom, #rgb n%, #rgb n%, #rgb n%);
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그레디언트</title>
<style>
.btn {
width: 200; height:100px;
font-size: 24px; color: #FFF;
text-align: center; /*글자를 수평으로 중앙에 배치 */
line-height: 100px; /* 글자를 수직으로 중앙에 배치 */
text-transform: uppercase; /* 글자를 대문자로 변경 */
text-shadow: 1px 1px 2px #000;
background:linear-gradient(to right, #ebf1f6 0%, #89c3eb 100%);
/* to : ~로 (ex. to left : 왼쩍으로*/
/*linear-gradient() 리니어-그레디언트 함수로 (~로,시작생상 0%, 진행 색상50%, 종료 식상(100%*/
box-shadow: 5px 5px 10px #000;
}
</style>
</head>
<body>
<div class="btn">버튼</div>
</body>
</html>· gradient + div 를 활용한 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그레디언트 예제</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap'); /* font-family: 'Bungee Spice', cursive; */
.btn {
width: 400px; height:50px; margin-left:100px; margin-top: 50px;
font-size: 30px; color: #FFF; text-align: center; line-height: 50px;
font-family: 'Bungee Spice', cursive;
background : lightblue;
text-shadow: 3px 3px 3px rgb(255, 255, 255);
box-shadow: 0 0 30px #3CF; border-radius: 25px;
background:linear-gradient(to bottom, #ebf1f6 20%, #89c3eb 50%, #ebf1f6 100%);
}
/*★스타일 작성 시 유의점 : 스타일 속성과 스타일 값을 작성하면 바로 웹 브라우저에서 확인★*/
.box {
width: 300px; height:199px; margin-top: 100px; margin-left: 100px;
font-size: 10px;
background: url(imgs/halla.jpg);
}
.box h2 { /* 빈칸은 후손(자식+손자) 선택자이다. */
height: 66.6px; /*박스의 높이를 지정*/
color : #fff; /*텍스의 색상을 지정*/
text-align: center; line-height: 80px; /*텍스트를 수평/수직 중앙정렬*/
text-shadow: 1px 1px 1px #000; /*가로그림자크기,세로그림자크기,번짐크기,그림자색상*/
text-transform: capitalize; /* 영문자의 첫글자만 대문자 */
background: rgba(125,15,15,0.6); /* 색상에 투명도 60% 적용*/
}
</style>
</head>
<body>
<div class="btn">This is CSS3 Buttons</div>
<div class="box">
<h2>Background image color test</h2>
</div>
</body>
</html>'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 스타일시트 기본 문법 (0) | 2022.09.26 |
|---|---|
| [HTML+CSS3] 회원가입 화면 만들기 (0) | 2022.09.23 |
| [HTML+CSS3] 박스그림자 (0) | 2022.09.23 |
| [HTML+CSS3] 입력 양식 태그 (1) | 2022.09.23 |
| [HTML+CSS3] 테이블 태그, 공간분할 태그 (HTML) (0) | 2022.09.23 |