Daily coding
CSS : Gradient 만들기 (linear-gradient) 본문
background: linear-gradient ( to bottom, #ddeeff, #aabbdd);
* to-top : 아래에서 위로 그러데이션 생성
to-left : 오른쪽에서 왼쪽으로 그라데이션 생성
to-right : 왼쪽에서 오른쪽으로 그라데이션 생성
to-bottom : 위에서 아래로 그라데이션 생성 (기본)
** 그라데이션 조합을 만들어주는 사이트
http://www.colinkeany.com/blend/
Blend—Create and customize beautiful CSS3 gradients.
Blend—Create and customize beautiful CSS3 gradients.
www.colinkeany.com
https://uigradients.com/#TalkingToMiceElf
uiGradients - Beautiful colored gradients
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.
uigradients.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box{
background-color: #CEE3F6;
border-color: 1px solid #666666;
background: linear-gradient(to bottom, #ddeeff, #aabbdd);
margin: 1em;
padding: 1em;
width: 500px;
height: 50px;
padding-left: 50px;
padding-top: 30px;
border-radius: 10px;
box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="box">
CSS로 그라데이션 만들기
</div>
</body>
</html>'Front-end > Client' 카테고리의 다른 글
| CSS : include 사용해보기 (0) | 2020.01.10 |
|---|---|
| CSS : 배경이미지 반복 (0) | 2020.01.10 |
| CSS : header 헤더 / main 메인 / footer 푸터 태그 (0) | 2020.01.10 |
| CSS : 화면분할과 정렬(float) (0) | 2020.01.10 |
| CSS : 테이블 스타일 (0) | 2020.01.10 |
'Front-end/Client' Related Articles
more
