CSS: input에 자연스러운 공간 및 그림자 효과 주기

230423

input에 자연스러운 공간 및 그림자 효과 주기

우연히 부트스트랩 템플릿들을 둘러보다가 발견한건데
input에 자연스러운 공간 그림자 효과를 줄 수 있다.

.inputStyle{
background-color: #fafafa;
box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.08);
}

 

코드는 위에 적었지만, 현재 부트스트랩 템플릿을 사용 중이므로 .form-control에서 수정했다.

.form-control {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
/* 	background-color: #fff; */
	background-color: #fafafa;
    box-shadow: inset 0 1px 3px 0 rgba(0,0,0,.08);
	background-clip: padding-box;
	border: none;
/* 	border: 1px solid #ced4da; */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0.375rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

 

결과) 현재 팀 프로젝트 중에 만든 페이지들인데 input 안의 그림자 효과와 공간이 자연스럽다.

그림자 효과 참고: https://colorlib.com/wp/template/colorlib-regform-4/

부트스트랩 전체 로그인 템플릿이다.

---