흔들리는 CSS3 검색 창 만들기
CSS3는 차세대 스타일 시트 언어입니다. 그림자, 애니메이션, 전환, 경계선 반경 등과 같은 새롭고 흥미로운 기능을 많이 소개합니다. 아직 사양이 마무리되지는 않았지만 많은 브라우저 제조업체가 이미 많은 새 기능을 지원하기 시작했습니다.
이 자습서에서는 다음과 같은 몇 가지 기능을 살펴 보겠습니다. 텍스트 그림자, 국경 - 반경, 박스 그림자 흔들어 움직이는 검색 필드를 만들기위한 전환.
이 검색 필드의 포토샵 버전은 Alvin Thong이 만들었으며 여기에서 다운로드 할 수 있습니다. 나는 순수한 CSS3를 사용하여이 검색 필드를 다시 만들려고했다. 주의해야 할 점은 모든 브라우저가 CSS3 기능을 지원하지는 않습니다. 이 튜토리얼을 실행하려면 CSS 3 기능을 지원하는 최신 브라우저 중 하나를 사용해야합니다.
준비된? 시작하자!
1. HTML5 Doctype
HTML 마크 업부터 시작하겠습니다. 그것은 매우 간단합니다. HTML5 doctype과 선언, 우리는 ID라는 이름으로 #싸개 내부 . 이 작업은 콘텐츠 상자의 너비를 정의하고 페이지의 중앙에 맞 춥니 다..
그 다음에 코드의 모양은 다음과 같습니다. 양식 주위에 큰 상자를 만들려면 여기서 중요한 코드는 설명: 여기서 inset 키워드는 그림자가 상자 안에 있는지 지정합니다. 처음 두 개의 0은 x 오프셋과 y 오프셋을 나타내고 3px는 흐림을 나타냅니다. 다음은 색상 선언입니다. 여기에 rgba 값을 사용했습니다. rgba는 빨간색 녹색 파란색과 알파 (불투명도)를 나타냅니다. 따라서 괄호 안의 4 개의 값은 빨강, 초록, 파랑 및 알파 (불투명도)의 양을 나타냅니다. 5 세트의 섀도우 선언이 함께 묶여 있음을 알 수 있습니다. 이 작업은 쉼표로 구분하여 수행 할 수 있습니다. 처음 두 개의 그림자는 흰색의 "내부 광선"효과를 정의하고 그 다음에 선언은 상자에 단색 / 덩어리 모양을 부여합니다. 이 값으로 놀아서 어떻게 작동하는지 이해하십시오.. 상자가 완성되었으므로 입력 필드의 스타일을 지정할 수 있습니다.. 입력 필드에 대해 선언 된 스타일은 큰 상자에 대해 선언 된 스타일과 매우 유사합니다. 설명: 이번에는 그림자가 날카로운 그림자를 얻기 위해 0으로 유지되고 5px의 수직 오프셋이 사용되었습니다. 연속 된 선언에서, 블러는 0px에서 유지되었지만 컬러와 y- 오프셋은 변경되었습니다. 다시 한 번 이러한 값으로 놀아서 다른 결과를 얻으십시오.. 검색 버튼의 스타일을 지정해 보겠습니다.. 색상 외에도 검색 버튼의 스타일은 바깥 상자와 거의 같습니다. 비슷한 테두리 반경과 상자 그림자가 버튼에 사용되었습니다. 도입 된 새로운 기능은 설명: 에서 버튼의 활성 상태가 조금 더 변경되었습니다. 이 예제에서는 버튼에 절대 위치와 '최상'값인 5px를 지정했습니다. 이것은 버튼이 실제로 5 픽셀만큼 아래로 밀렸다는 느낌을주기 위해보다 자연스러운 모습을주기 위해 수행되었습니다. 활성 상태의 다른 변경 사항은 배경색 및 그림자의 변경 사항입니다. 그림자의 y 오프셋을 줄여 '눌 렸을 때'보이는 것을 보았습니다. 다음은 제출 버튼의 활성 상태 코드입니다. 이것으로 검색 필드가 완성됩니다. 우리는 새로운 CSS3 기능을 많이 사용했습니다. 이 검색 필드의 전체 CSS와 HTML은 다음과 같습니다.. 희망이 자습서를 즐겼다. 이러한 기능을 시험해보고 생각을 공유하는 것을 잊지 마십시오.. 편집자 주 : 이 게시물은에 의해 작성됩니다 바라 니 M Hongkiat.com. Bharani는 인도 뉴 델리 출신의 디자이너 / 개발자입니다..#본관. 이 ID에는 입력 필드와 검색 버튼 주변의 큰 흰색 상자를 정의하는 스타일이 포함되어 있습니다. 이 그것 안에서 선언했다. 양식에 텍스트 입력 필드 그리고earch 버튼. 다음은 스타일이 적용되지 않은 모양입니다. 
CSS3 검색 필드
2. 경계 상자 만들기
#본관. 아래 표시된 코드에서 상자의 폭은 400px이고 높이는 50px입니다.. #main width : 400px; 높이 : 50px; 배경 : # f2f2f2; 패딩 : 6px 10px; 국경 : 1 픽셀 단색 # b5b5b5; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 - 삽입 상자 0 : 3px rgba (255, 255, 255, 0.8) 인서트 0 2px 2px rgba 13px 0 #dfdede; -webkit-box-shadow : inset 0 0 3px rgba (255, 255, 255, 0.8), 인서트 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; 상자 그림자 : 삽입 0 0 3px rgba (255, 255, 255, 0.8), 삽입 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
국경 - 반경 선언과 상자 그림자 선언. 둥근 모서리를 만들기 위해 CSS3 테두리 반경 선언을 사용했습니다. "-moz-"및 "-webkit-"브라우저 접두사는 게코 및 웹킷 기반 브라우저에서 작동하도록 사용되었습니다. 박스 섀도우 선언은 다소 혼란스러워 보일지 모르지만 실제로는 매우 간단합니다.. 상자 그림자 : 삽입 0 0 3px rgba (255, 255, 255, 0.8), 삽입 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
시사
3. 입력 필드의 스타일 지정하기
입력 [유형 = "텍스트"] 부동 : 왼쪽; 너비 : 230px; 패딩 : 15px 5px 5px 5px; margin-top : 5px; margin-left : 3px; 국경 : 1 픽셀 고체 # 999999; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; -moz-box-shadow : 삽입 0 5px 0 #ccc, 삽입 0 0 6px 0 # 989898, 삽입 0 13px 0 #dfdede; -webkit-box-shadow : 삽입 0 0 5px 0 #ccc, 삽입 0 0 6px 0 # 989898, 삽입 0 13px 0 #dfdede; 상자 그림자 : 삽입 0 5px 0 #ccc, 삽입 0 0 6px 0 # 989898, 삽입 0 13px 0 #dfdede;
#본관. 같은 경계 반경 (5px)을 사용했습니다. 다시 말하지만, 여러 상자 그림자가. 상자 그림자 : 삽입 0 5px 0 #ccc, 삽입 0 0 6px 0 # 989898, 삽입 0 13px 0 #dfdede;
시사
4. 제출 버튼의 스타일 지정하기
입력 [유형 = "제출"]. 고체 부동 : 왼쪽; 커서 : 포인터; 너비 : 130px; 패딩 : 8px 6px; margin-left : 20px; 배경색 : # f8b838; color : rgba (134, 79, 11, 0.8); 텍스트 변환 : 대문자; font-weight : bold; 국경 : 1 픽셀 고체 # 99631d; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; 텍스트 그림자 : 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow : inset 0 0 3px rgba (255, 255, 255, 0.6), 인서트 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit 박스 그림자 : 0 0 3px의 RGBA (255, 255, 255, 0.6), 인셋 0 1 픽셀 2 픽셀 RGBA (255, 255, 255, 0.7), 0 5px 0 #을 b8882a 0 6 픽셀 0 # 593a11 0 삽입 13px 0 #ccc; box-shadow : inset 0 0 3px rgba (255, 255, 255, 0.6), 인서트 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition : 백그라운드 0.2s 완화;
텍스트 그림자. 텍스트 그림자 : 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
텍스트 그림자 선언에서 처음 세 숫자 값은 각각 x- 오프셋, y- 오프셋 및 blur입니다. rgba 값은 그림자 색상을 나타냅니다. 다음 선언 세트 (쉼표로 구분)에서 y 오프셋에는 -1 값이 지정됩니다. 이것은 텍스트에 “내부 그림자” 효과. 제출 버튼의 마우스 오버 / 포커스 상태에는 배경색과 그림자의 값이 다릅니다.. 시사
버튼의 "활성"상태
입력 [유형 = "제출"]. 고체 : 활성 배경 : # f6a000; 위치 : 상대적; 상단 : 5px; 테두리 : 1 픽셀 단색 # 702d00; (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit 박스 그림자 : 0 0 3px의 RGBA (255, 255, 255, 0.6), 인셋 0 1 픽셀 2 픽셀 RGBA (255, 255, 255, 0.7), 0 3px의 0 #을 b8882a 0 4 픽셀 0 # 593a11 0 삽입 8px 0 #ccc; box-shadow : inset 0 0 3px rgba (255, 255, 255, 0.6), 인서트 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
전체 (CSS) 코드
#main width : 400px; 높이 : 50px; 배경 : # f2f2f2; 패딩 : 6px 10px; 국경 : 1 픽셀 단색 # b5b5b5; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 - 삽입 상자 0 : 3px rgba (255, 255, 255, 0.8) 인서트 0 2px 2px rgba 13px 0 #dfdede; -webkit-box-shadow : inset 0 0 3px rgba (255, 255, 255, 0.8), 인서트 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; 상자 그림자 : 삽입 0 0 3px rgba (255, 255, 255, 0.8), 삽입 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 입력 [유형 = "텍스트"] 부동 : 왼쪽; 너비 : 230px; 패딩 : 15px 5px 5px 5px; margin-top : 5px; margin-left : 3px; 국경 : 1 픽셀 고체 # 999999; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; -moz-box-shadow : 삽입 0 5px 0 #ccc, 삽입 0 0 6px 0 # 989898, 삽입 0 13px 0 #dfdede; -webkit-box-shadow : 삽입 0 0 5px 0 #ccc, 삽입 0 0 6px 0 # 989898, 삽입 0 13px 0 #dfdede; 상자 그림자 : 삽입 0 5px 0 #ccc, 삽입 0 0 6px 0 # 989898, 삽입 0 13px 0 #dfdede; input [type = "submit"]. 고체 부동 : 왼쪽; 커서 : 포인터; 너비 : 130px; 패딩 : 8px 6px; margin-left : 20px; 배경색 : # f8b838; color : rgba (134, 79, 11, 0.8); 텍스트 변환 : 대문자; font-weight : bold; 국경 : 1 픽셀 고체 # 99631d; -moz-border-radius : 5px; -webkit-border-radius : 5px; border-radius : 5px; 텍스트 그림자 : 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow : inset 0 0 3px rgba (255, 255, 255, 0.6), 인서트 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow : inset 0 0 3px rgba (255, 255, 255, 0.6), 인서트 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; 상자 그림자 : 인셋 0 0 3px의 RGBA (255, 255, 255, 0.6), 인셋 0 1 픽셀 2 픽셀 RGBA (255, 255, 255, 0.7), 0 5px 0 #을 b8882a 0 6 픽셀 0 # 593a11 0 13px 0 # ccc; -webkit-transition : 백그라운드 0.2s 완화; input [type = "submit"] 솔리드 : hover, input [type = "submit"] 솔리드 : 포커스 background : # ffd842; (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit 박스 그림자 : 0 0 3px의 RGBA (255, 255, 255, 0.9), 인셋 0 2 픽셀 1 픽셀 RGBA (255, 250, 76, 0.8), 0 5px # d8a031 0 0 0 6 픽셀 593a11 # 0 삽입 13px 0 #ccc; 상자 그림자 : 인셋 0 0 3px의 RGBA (255, 255, 255, 0.9), 인셋 0 2 픽셀 1 픽셀 RGBA (255, 250, 76, 0.8), 0 5px 0 # d8a031 0 6 픽셀 0 # 593a11 0 13px 0 # ccc; 입력 [유형 = "제출"]. 고체 : 활성 배경 : # f6a000; 위치 : 상대적; 상단 : 5px; 테두리 : 1 픽셀 단색 # 702d00; (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; 상자 그림자 : 인셋 0 0 3px의 RGBA (255, 255, 255, 0.6), 인셋 0 1 픽셀 2 픽셀 RGBA (255, 255, 255, 0.7), 0 3px의 0 #을 b8882a 0 4 픽셀 0 # 593a11 0 8px 0 # ccc;
