인터넷 기술의 지속적인 발전과 함께 웹 디자인도 많은 변화와 업데이트를 받아왔습니다. 텍스트 상자는 웹 디자인에서 가장 일반적으로 사용되는 요소 중 하나입니다. 그 설정은 웹 사이트의 외관에 영향을 미칠 뿐만 아니라 웹 사이트의 사용자 경험과 유용성에도 영향을 미칩니다. 이 글에서는 텍스트 상자의 기본 스타일, 배경색, 둥근 테두리, 그림자, 투명도, 애니메이션 효과 등 CSS 텍스트 상자를 설정하는 방법을 소개합니다.
1. 텍스트 상자의 기본 스타일
텍스트 상자는 검색 상자, 메시지 상자, 댓글 상자 등 다양한 정보를 입력할 수 있는 웹 디자인 요소 중 하나입니다. CSS에서는 다음 코드를 사용하여 텍스트 상자의 기본 스타일을 정의할 수 있습니다.
input[type=text], textarea { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; background-color: #f8f8f8; font-size: 16px; resize: none; }
위 CSS 코드에서는 input[type=text] 선택기와 텍스트 영역 선택기를 사용하여 텍스트 상자의 기본 스타일을 정의합니다. . 특정 스타일에는 너비, 패딩, 여백, 테두리, 테두리 색상, 테두리 둥근 모서리, 배경색, 글꼴 크기 및 텍스트 상자 크기 조정이 포함됩니다.
2. 텍스트 상자의 배경색
텍스트 상자의 배경색은 CSS의 background-color 속성을 통해 설정할 수 있습니다. 다양한 디자인 요구 사항에 맞게 텍스트 상자의 배경색을 사용자 정의할 수 있습니다. 다음은 어두운 회색을 텍스트 상자의 배경색으로 사용한 예입니다.
input[type=text], textarea { background-color: #333; }
3. 텍스트 상자의 둥근 테두리
둥근 테두리는 일반적으로 사용되는 텍스트 상자 디자인 스타일로 페이지를 더 따뜻하게 보이게 할 수 있습니다. 그리고 친절해요. CSS에서는 border-radius 속성을 사용하여 텍스트 상자 테두리의 둥근 크기를 설정할 수 있습니다. 다음은 예입니다.
input[type=text], textarea { border-radius: 10px; }
4. 텍스트 상자의 그림자
그림자는 페이지 요소를 더욱 입체적이고 실제처럼 보이게 할 수 있습니다. box-shadow 속성을 사용하여 텍스트 상자의 그림자 효과를 설정할 수 있습니다. 다음은 예입니다.
input[type=text], textarea { box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); }
첫 번째 매개변수는 그림자의 수평 오프셋을 나타내고, 두 번째 매개변수는 수직 오프셋을 나타내고, 세 번째 매개변수는 흐림 반경을 나타내고, 네 번째 매개변수는 그림자의 색상과 투명도를 나타냅니다.
5. 텍스트 상자의 투명도
투명도는 요소의 불투명도를 의미하며, 텍스트 상자의 투명도를 사용하기 위해 opacity 속성을 사용할 수 있습니다. 다음은 그 예입니다:
input[type=text], textarea { opacity: 0.7; }
6. 텍스트 상자의 애니메이션 효과
애니메이션 효과는 웹 페이지 요소를 더욱 눈길을 끌고 사용자 경험을 향상시킬 수 있습니다. CSS 전환 속성을 사용하여 텍스트 상자에 애니메이션을 적용할 수 있습니다. 예를 들면 다음과 같습니다.
input[type=text], textarea { transition: all 0.3s ease-in-out; } input[type=text]:hover, textarea:hover { transform: scale(1.05); }
위 코드는 마우스 오버 시 텍스트 상자에 확대 효과를 추가합니다. 코드의 첫 번째 줄은 모든 속성에 대한 전환 효과를 설정하고, 코드의 두 번째 줄은 확대 효과를 추가합니다.
요약:
텍스트 상자는 웹 디자인에서 일반적으로 사용되는 요소입니다. CSS를 사용하여 텍스트 상자의 스타일을 지정하면 텍스트 상자를 더 아름답게 만들고 사용자 경험과 웹 사이트 유용성을 향상시킬 수 있습니다. 여기에 제공된 샘플 코드는 독자를 위한 참조로 사용할 수 있으며 다양한 디자인 요구 사항을 충족하도록 개인화할 수도 있습니다.
위 내용은 CSS 텍스트 상자 설정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!