누적 용지 효과 로그인 양식 작성

이 기사는 "HTML5 / CSS3 자습서 시리즈" - 당신을 더 나은 디자이너 및 / 또는 개발자로 만드는 데 전념하는. 여기를 클릭하십시오. 같은 시리즈의 기사 더보기.

로그인 양식은 모든 동적 웹 사이트의 필수 부분입니다. 웹 사이트 사용자가 제한된 콘텐츠에 액세스 할 수있는 메커니즘을 제공합니다. 이 튜토리얼에서는 텍스트 섀도우, 박스 섀도우, 선형 그라디언트 및 전환과 같은 CSS3 기능을 사용하여 누적 형 모양으로 간단하고 우아한 로그인 양식을 만들 것입니다..

위의 이미지는 우리가 구축 할 로그인 양식의 미리보기를 보여줍니다. 안으로 잠수 할 준비가 되었습니까? 시작하자!

1. 기본 HTML 마크 업

우리가 사용하는 HTML 마크 업은 HTML5 Doctype 선언 다음에 매우 간단합니다. 과 </code> 태그. 내 <code><body></code> 태그에 <code><section></code> '스택 된'클래스의 태그 이 <code><section></code> 태그는 내용 상자의 너비를 정의하고 페이지 중앙에 맞 춥니 다. 또한이 태그의 클래스 이름을 사용하여 CSS를 사용하여이 태그를 타겟팅합니다. 에이 <code><form></code> 태그가 뒤 따름 <code><section></code> 꼬리표. form 태그는 'action'속성에 유효한 값을 가지고 있지 않습니다. 데모 목적으로 만 사용되기 때문입니다. 양식 필드에는 이메일 및 비밀번호 레이블 및 입력 필드에 대한 선언문과 제출 버튼이 있습니다. 중요한 점은 '전자 메일'유형의 입력 필드를 사용한다는 것입니다. 이것은 HTML5 선언에 의해 제공되며 구식 브라우저의 일반 텍스트 입력 필드로 정상적으로 저하됩니다.</p> <p>다음은 전체 HTML 마크 업입니다.</p> <pre name="code"> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>간단한 로그인 양식

  로그인
   이메일  
   암호

     지금까지 작성한 내용을 미리 보도록하겠습니다.
  
 2. 기본 스타일 추가하기
 새 css 파일 만들기 master.css 이 파일에 대한 링크를 기본 HTML 파일에 추가하십시오. 여러 브라우저에서 일관성을 얻기 위해 빠른 재설정을 통해 CSS 파일을 시작할 것입니다. 우리의 페이지에 멋진 배경 이미지를 추가하겠습니다. 내가 사용한 이미지가에서 가져온 것입니다. 미묘한 부분. 사이트를 탐색하여 자신의 취향에 맞는 배경 이미지를 찾으십시오. 다음 선언문을 사용하여 배경 이미지를 추가 할 수 있습니다. 나는 또한 Open Sans 본문 텍스트 용 Google Web 글꼴의 글꼴.
  / * -------- 기본 스타일 --------- * / body, html margin : 0; 패딩 : 0;  body background : url ( "https://assets.hongkiat.com/uploads/stack-paper-login-form/bg.png") left top repeat; 글꼴 : 16px / 1.5 "Open Sans", Helvetica, Arial, sans-serif;  div.wrap width : 400px; 여백 : 80px 자동; 
 3. 누적 된 종이 효과
 기본 레이아웃을 만들고 실행 했으므로 이제 폼 디자인을 시작할 수 있습니다. 누적 용지 효과를 얻으려면 :후 과 :전에 의사 요소. 이러한 의사 요소는 주로 선택기에 시각 효과를 추가하는 데 사용됩니다. 
 그만큼 :전에 의사 요소는 선택기의 내용 앞에 내용을 추가하는 데 사용됩니다. :후 선택자의 내용 뒤에있는 의사 요소. 
 먼저 '스택 된'클래스로 400px 너비와 300px 높이의 섹션을 제공합니다. 또한이 상자에 # f6f6f6 배경색과 #bbb 색상으로 1 픽셀 두께의 경계선을 지정합니다. 여기서 주목해야 할 주요 사항은 border-radius 선언과 box-shadow 선언입니다. 여기에서 "-moz-"및 "-webkit-"브라우저 접두어는 게코 및 웹킷 기반 브라우저에서 작동하도록 보장하기 위해 사용되었습니다. 
 테두리 반경 선언은 매우 간단하며 곡률을 나타내는 3px로 둥근 모서리를 만드는 데 사용됩니다. 박스 섀도우 선언의 구문은 복잡해 보일 수 있지만 더 잘 이해하기 위해 더 작은 덩어리로 분해 해 보겠습니다.. 
  / * -------- 테두리 반경 --------- * / -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; / * -------- 상자 그림자 --------- * / -webkit-box-shadow : 0 0 3px rgba (0,0,0, .2); -moz-box-shadow : 0 0 3px rgba (0,0,0, .2); box-shadow : 0 0 3px rgba (0,0,0, .2);
 처음 두 개의 0은 x 오프셋과 y 오프셋을 나타내고 3px는 흐림을 나타냅니다. 다음은 색상 선언입니다. 여기에 rgba 값을 사용했습니다. rgba는 빨간색 녹색 파란색과 알파 (불투명도)를 나타냅니다. 따라서 괄호 안의 4 개의 값은 빨강, 초록, 파랑 및 알파 (불투명도)의 양을 나타냅니다..
  .누적 된 배경 : # f6f6f6; 테두리 : 1 픽셀 단색 #bbb; 높이 : 300px; 여백 : 50px 자동; 위치 : 상대적; 너비 : 400px; -webkit-box-shadow : 0 0 3px rgba (0,0,0, .2); -moz-box-shadow : 0 0 3px rgba (0,0,0, .2); box-shadow : 0 0 3px rgba (0,0,0, .2); -webkit-border-radius : 3px; -moz-border-radius : 3px; border-radius : 3px; 
 이제 양식의 기본 테두리 상자를 만들었으므로 이제는 :후 과 :전에 의사 요소. 
  .stacked : after, .stacked : before (배경 : # f6f6f6; 국경 : 1 픽셀 단색 #aaa; 하단 : -8px; 내용 : "; 높이 : 250 픽셀, 왼쪽 : 2 픽셀, 위치 : 절대, 폭 : 394 픽셀, Z- 인덱스 : -10, moz-box-shadow : 0 0 3px rgba (0,0,0, .2), box-shadow : 0 0 3px rgba (0,0,0, .2); -webkit-border-radius : 3px; border-radius : 3px; border-radius : 3px; .stacked : before (하단 : -14px, 왼쪽 : 5px, 폭 : 388px, -webkit-border-radius : 3px, -moz-border-radius : 3px ; 테두리 반경 : 3px; -webkit-box-shadow : 0 0 15px rgba (0,0,0,0.5); -moz-box-shadow : 0 0 15px rgba (0,0,0,0.5); 상자 -shadow : 0 0 15px rgba (0,0,0,0.5);
 after와 : before 의사 요소의 코드는 위에서 설명한 바운딩 박스의 코드와 거의 비슷합니다. 여기에서 유의해야 할 유일한 사실은이 의사 요소가 경계 상자와 관련하여 절대적으로 배치된다는 것입니다. 각 의사 요소는 몇 픽셀 씩 점진적으로 낮아져서 누적 형 모양을 갖습니다..
 4. 입력란
 HTML 마크 업에서 이메일 입력란과 비밀번호 입력란에 'text-input'클래스를 추가하여 CSS 선언으로 이러한 요소를 쉽게 타겟팅 할 수있게되었습니다. 다음은 두 입력 필드 모두에 적용되는 CSS 선언입니다..
  양식 input.text-input outline : 0; 디스플레이 : 블록; 너비 : 330px; 패딩 : 8px 15px; 테두리 : 1px 단색 회색; 글꼴 크기 : 16px; 글꼴 - 무게 : 400; -webkit-border-radius : 25px; -moz-border-radius : 25px; border-radius : 25px; box-shadow : 인셋 0 2px 8px rgba (0,0,0,0.3); 
 여기서 다시 경계 반경 및 상자 그림자 선언을 사용했습니다. 텍스트 필드의 경우 더 큰 곡률을 보장하기 위해 border-radius에 더 높은 값이 지정됩니다. box-shadow 선언의 경우 inset 키워드는 그림자가 텍스트 필드 안에 있음을 지정하는 데 사용됩니다. 여기에서 그림자의 수직 오프셋은 2 픽셀이고 블러는 8 픽셀이며 rgba 형식을 사용하여 색상이 선언됩니다..
 입력 필드에 몇 가지 상호 작용 기능을 추가하기 위해 'hover'상태에서 입력 필드의 상자 그림자 속성을 변경합니다. 새로운 상자 그림자 선언은 x와 y 오프셋이 없지만 rgba 형식으로 선언 된 색상의 5px 흐림 효과가 있습니다..
 5. 제출 버튼
 이 양식의 마지막 부분은 제출 버튼입니다. 입력 필드와 마찬가지로 border-radius 속성을 사용하여 제출 버튼의 반경을 25px로 지정합니다. y-offset이 1px 인 상자 그림자 속성도 버튼에 추가되었습니다. “내부 그림자” 효과.
  양식 입력 [type = 'submit'] float : right; 패딩 : 10px 20px; 디스플레이 : 블록; 커서 : 포인터; 글꼴 크기 : 16px; 글꼴 - 무게 : 700; color : #fff; 텍스트 그림자 : 0 1px 0 # 000; 배경색 : # 0074CC; 국경 : 1 픽셀 고체 # 05C; -webkit-border-radius : 25px; -moz-border-radius : 25px; border-radius : 25px; background-image : -moz-linear-gradient (맨 위, # 08C, # 05C); background-image : -ms-linear-gradient (맨 위, # 08C, # 05C); background-image : -webkit-linear-gradient (상단, # 08C, # 05C); 배경 이미지 : 선형 그래디언트 (위쪽, # 08C, # 05C); -webkit-box-shadow : 인세 트 0 1px 0px rgba (255, 255, 255, 0.5); -moz-box-shadow : 인세 트 0 1px 0px rgba (255, 255, 255, 0.5); box-shadow : 인셋 0 1px 0px rgba (255, 255, 255, 0.5); 
 여기서 중요한 점은이 버튼에 그라디언트를 추가한다는 것입니다. CSS3 그래디언트는 상당히 큰 주제이며 표면 만 긁어 모을 것입니다. 이 제출 버튼의 경우 # 08C에서 # 05C로가는 선형 그래디언트를 추가합니다. 지금까지 사용한 다른 모든 CSS3 속성과 마찬가지로 그라디언트가 다른 브라우저에서 작동하도록 "-moz", "-webkit"및 "-ms"공급 업체 접두사를 추가합니다.
 6. 데모 및 다운로드
 이제 로그인 양식이 완성되었습니다. 완료된 양식이 어떻게 보이는지 확인하려면 데모를 확인하십시오. 어떤 시점에서 길을 잃었거나 튜토리얼을 따라갈 수 없다면 파일을 바탕 화면에 다운로드하고 기존 CSS 코드로 땜장이를 사용하여 작동 원리를 이해하십시오..
 희망이 자습서를 즐겼다. 이러한 기능을 시험해보고 생각을 공유하는 것을 잊지 마십시오..
 데모
 파일 다운로드
 
편집자 주 : 이 게시물은에 의해 작성됩니다 바라 니 M Hongkiat.com. Bharani는 인도 뉴 델리 출신의 디자이너 / 개발자입니다. 그는 현재 Resumonk.com에서 일하고 있습니다. Resumonk.com은 전문적이고 아름다운 이력서 작성을 도와주는 온라인 이력 작성자입니다. 또한 자신의 사이드 프로젝트 - Quotescube.com - 매일 인용문을 확인하십시오..