HTML5 및 CSS3 봉투 피드백 양식. HTML5의 순수 CSS 피드백 양식에 이미지가 없는 아름다운 피드백 양식
이 기사에서는 창 크기가 변경되면 보기에 맞게 조정되는 동적 피드백 양식에 대해 설명합니다. 즉, 피드백 양식은 개인용 컴퓨터, 노트북, 스마트폰, 태블릿 등 모든 유형의 장치에서 볼 수 있습니다.
피드백 양식은 이름, 이메일 주소, 편지 내용 등 3개의 데이터 입력 필드로 구성됩니다. 모든 항목은 필수이며, 빈 이메일을 보낼 수 없습니다. 이메일 주소 입력 필드는 입력의 정확성을 위해 추가로 검증됩니다. 데이터는 HTML 코드로 표시되며 피드백 양식 디자인 스타일은 별도의 CSS 파일에 작성됩니다. 이 스크립트의 원리에 따라 비유적으로 더 많거나 더 적은 수의 입력 필드를 생성하는 것이 가능합니다.
이 양식을 사용하면 페이지를 다시 로드하지 않고도 사이트를 지속적으로 운영하고 양식에서 데이터를 동적으로 제출할 수 있다는 이점이 있습니다. 모바일 기기에서도 쉽게 볼 수 있다는 점도 참고하세요.
send.php 파일에서 다음 줄을 편집합니다: $to = " [이메일 보호됨]"; $subject= "site.ru에서 보낸 메시지"; $header="보낸 사람: site.ru";;
편지 쓰기
* 모든 분야가 요구됩니다
보내다
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body( 높이: 100%; 패딩: 0; 여백: 0; ) body( 배경: #d3dce1; 글꼴 계열: "Roboto", sans-serif; 글꼴 크기: 14px; ) .outer( 디스플레이: 테이블 ; 너비: 100%; 높이: 100%; 텍스트 정렬: 센터; .middle( 디스플레이: 테이블 셀; 수직 정렬: 중간; ) .inner( 텍스트 정렬: 센터; 너비: 자동; 패딩: 0 15px ; ) .login-wr ( 위치: 상대; 여백: 0 자동; 배경: #fff; 최대 너비: 550px; 상자 그림자: 3px 3px 24px #999; 패딩: 15px 15px 15px 15px; ) h2 ( 텍스트 정렬 : 왼쪽; 글꼴 크기: 1.6em; 테두리 하단: 1px 솔리드 #474747; 텍스트 정렬: 왼쪽; 40px; 개요: 0; -moz-outline-style: 없음; ) 버튼( 높이: 40px; 개요: 0; -moz-outline-style: 없음; ) 입력( 배경: url("img/user.png") 반복 없음 왼쪽 10px 중심; ) 입력 ( background: url("img/email.png") 반복 없음 왼쪽 10px 중심; ) 텍스트 영역( 배경: url("img/pencil.png") 반복 없음 왼쪽 10px 상단 10px; ) 텍스트 영역( 너비: calc(100% - 55px); 높이: 120px; 테두리: 1px 단색 #bbb; 패딩: 10px 10px 10px 45px; 글꼴 크기: 14px; ) 입력, 입력( 너비: 계산(100% - 45px); 최대 너비: 250px; 테두리: 1px 솔리드 #bbb; 패딩: 0 0 0 45px; 글꼴 크기: 14px ; ) 입력:초점, 입력:초점 ( 테두리: 1px 솔리드 #2196f3; ) p ( 패딩 하단: 10px; ) 버튼 ( 너비: 100%; 최대 너비: 150px; 배경: #e6ebee; 테두리: 없음; 테두리 -하단: 5px 솔리드 #d3dce1; 글꼴 크기: 14px; 글꼴 무게: 200; 상자 그림자 .4s 용이성$(function() ( $("#loader").hide(); $("form").submit(function(e) ( var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var data = "name=" + 이름 + "&email=" + 이메일 + "&message=" + 메시지 ; if(data) ( $.ajax(( 유형: "POST", url: "./send.php", data: data, beforeSend: function(html) ( $("#loader").show(); $("#submit").hide(); ), 성공: function(html)( $("#loader").hide(); $("#result").html(html); ) )); ) 거짓을 반환 ));
이 기사에서는 피드백을 예로 들어 양식을 레이아웃하고 의미론적 마크업을 사용하는 방법을 배우고, 몇 가지 미묘함과 뉘앙스를 살펴보고, 양식이 IE6까지 다양한 브라우저에서 최대한 동일하게 표시되도록 노력할 것입니다.
이 문서는 2013년 8월 27일에 마지막으로 업데이트되었습니다.
빠른 시작양식을 생성하려면 양식을 처리하는 스크립트의 주소가 포함된 필수 작업 속성이 있는 태그를 사용하세요. GET(기본값) 또는 POST 메서드를 사용하여 양식을 처리하기 위해 여기에서 method 속성을 설정할 수도 있으며, 나중에 JS/PHP를 통해 양식에 액세스하는 데 사용되는 name 속성도 설정할 수 있습니다. 따라서 최소한의 마크업은 다음과 같습니다.
...
사용자 이름, 이메일 및 양식 제출 버튼을 입력하기 위한 필드를 추가해 보겠습니다.
당신의 이름 이메일
태그는 더 복잡한 형태로 선을 만드는 데 가장 자주 사용되며 스타일을 지정하기 위해 태그에 클래스가 첨부됩니다.
당신의 이름 이메일
정의 목록, 번호가 없는 목록 또는 테이블과 함께 옵션을 사용할 수 있으며 이는 의미상으로도 매우 정확합니다.
- 당신의 이름
| 당신의 이름 |
또한 나중에 스크립트를 사용하여 액세스할 수 있도록 모든 필드에 대해 이름 속성을 설정했습니다. name은 고유해야 하며 id와 동일한 값을 할당하는 것이 좋습니다. 또한 브라우저의 오류로부터 보호하기 위해 명시적으로 값을 비어 있도록 설정했습니다.
현재 CSS 스타일을 사용하지 않고 현재 가지고 있는 내용은 다음과 같습니다.
피드백 폼이제 우리의 양식은 매우 단순하고 지루해 보입니다. 양식을 복잡하게 만들고 추가 필드를 추가하고 다음과 같이 디자인해 보겠습니다.
형태 디자인 보시다시피 여기에 태그를 사용하여 목록에서 옵션을 선택하는 기능과 사용자 메시지를 입력하는 기능을 추가했습니다. 두 개의 열을 생성하기 위해 래핑이 포함된 추가 태그를 사용하며 이제 마크업은 다음과 같습니다.
피드백 귀하의 이름* 이메일* 옵션을 선택하세요 옵션 1 옵션 2 옵션 3 메시지
코드는 이메일 필드 유형, 자리 표시자 및 필수 속성(JS 양식 유효성 검사 없이 수행 가능)과 같은 HTML5 기능이 사용된다는 것을 보여줍니다. 이에 대해서는 잠시 후에 살펴보겠습니다. 이전 브라우저의 경우 부분적인 점진적 성능 저하를 허용합니다. 예를 들어 필드에서 텍스트 힌트를 생략하고(JQuery 및 플러그인을 사용하여 구현할 수 있음) JS 및 PHP를 사용하여 입력된 데이터의 유효성을 검사합니다. CSS3 속성 버전 9 이하의 IE를 지원하기 위해 PIE 스크립트를 연결해 보겠습니다.
HTML5의 양식 유효성 검사양식에 유효성 검사를 추가해 보겠습니다. HTML5를 사용하면 구현하기가 매우 쉽기 때문에 이 옵션을 고려해 보겠습니다.
예를 들어 필드를 필수로 설정해 보겠습니다.
보시다시피 필수 속성이 하나만 추가되었습니다. 이제 빈 필드가 있는 양식을 제출하려고 하면 알림이 표시됩니다.
메시지의 모양은 브라우저마다 다르며 안타깝게도 변경되지 않습니다.
이메일 입력 필드에 이메일 유형을 지정할 수도 있습니다.
즉, 이 필드는 이메일 주소를 의미하며 요소는 적절한 유효성 검사를 받게 됩니다. 스크린샷에 명확하게 나와 있습니다.
상황은 url , date 및 number 필드와 유사합니다.
JS/PHP 스크립트 없이 모든 것이 매우 쉽습니다.
HTML5의 유효성 검사는 기본적으로 작동하지만 요소에 novalidate 속성을 추가하여 비활성화할 수 있습니다.
...
텍스트 영역 양식 요소 레이아웃의 특징웹킷 엔진 기반 브라우저에서는 크기를 변경할 수 있어 매우 편리합니다. 그러나 이 속성은 디자인을 손상시키는 경우가 많으므로 크기 조정을 방지하려면 resize: none 속성을 사용해야 합니다. 필드가 수평 또는 수직으로만 늘어나도록 허용하는 것도 가능합니다.
(사파리와 크롬의 경우)
IE는 스크롤바를 추가합니다. 이를 제거하려면 Overflow: auto 를 설정해야 합니다.
Chrome, Safari 브라우저에서 필드 강조 표시Chrome 및 Safari 브라우저에서 필드에 초점을 맞추면 해당 필드가 강조 표시되기 시작합니다. 이 강조 표시를 제거하려면 다음 CSS 코드를 작성해야 합니다.
입력, 텍스트 영역(개요: 없음; )
Firefox의 점선 테두리FF는 일부 필드에 초점을 맞출 때 점선 프레임으로 강조 표시하는데, 항상 아름답게 보이지는 않습니다. 이를 제거하기 위해 다음 스타일을 작성합니다.
버튼::-moz-focus-inner, input::-moz-focus-inner, input::-moz-focus-inner, input::-moz-focus-inner ( 테두리: 없음; )
물론 사용자의 편의를 위해 점선 프레임이 없는 부분을 다른 프레임으로 대체하는 것이 좋습니다.
IE10에서 일반 텍스트 및 비밀번호 표시 버튼 제거IE10은 기본적으로 텍스트 필드에 일반 텍스트 버튼을 추가하고 비밀번호 필드에 비밀번호 표시 버튼을 추가합니다. 이 두 기능 모두 매우 유용하지만 때로는 디자이너의 의도를 망칠 수도 있습니다. 다행히도 이를 제거하는 것은 매우 쉽습니다. 이 작은 조각을 사용하면 다음 브라우저 기능을 사용할 수 없습니다.
::-ms-clear(표시: 없음; )
비표준 양식 요소양식 요소 스타일 지정은 별도의 문서에서 설명합니다.
피드백 양식은 최종적으로 다음과 같습니다.
이 양식에서 사용할 수 있는 모든 필드를 즉시 살펴보겠습니다.
피드백 양식 필드의 구조- 보낸 사람 이름
- 우편 주소
- 전화
- 보내는 회사
- 보낸 사람의 웹사이트
- 제품(방향)
- 필수 서비스 목록
- 추가 정보
- 스팸방지/로봇 보호
- 필요한 조건이 충족될 때까지 "보내기" 버튼을 차단합니다.
- 로봇 확인 및 보호를 위한 간단한 선택기
- 추가 버튼 "모든 필드 지우기"
- HTML 마크업(레이아웃 생성)
- CSS/SCSS를 사용하여 양식 필드 스타일 지정
- jQuery + js
- PHP 핸들러
이제 양식 마크업을 살펴보겠습니다.
자기소개를 해주세요: * 이메일 기재: * 전화번호 기재: * 출신 회사 기재: 웹사이트 기재: 제품: 서비스 선택: 선택한 서비스 없음 Service_ Service_ Service_ Service_ Service_ Service_ Service_ Service_ 추가. 정보: 나는 로봇입니다. 나는 인간입니다. 별표 *로 표시된 지우기 필드가 필요합니다.
모든 양식 필드는 CSS flexbox(Flexible Box Layout Module)를 사용하여 스타일이 지정되고 추가 클래스가 있는 그룹으로 나뉩니다. 물론 자신만의 스타일을 만들 수도 있습니다. CSS를 알고 있다면 문제 없이 모든 양식 요소의 디자인을 설정할 수 있습니다. 제 도움도 필요하지 않습니다.
양식( 입력, 입력, 입력, 텍스트 영역, 선택( 표시: 블록; 패딩: 12px 15px; 줄 높이: 1.5; 너비: 100%; 글꼴 크기: 16px; 테두리: 1px 솔리드 #ced4da; 테두리 반경: . 25rem; 배경 클립: 패딩 상자; 배경 색상: #fff; 상자 그림자: 0 1px 0 0 rgba(255, 255, 255, .05), 삽입 0 1px 2px 0 rgba(0, 0, 0, .05); &:focus ( 개요: 없음; ) .form-row ( 디스플레이: flex; flex-wrap: 랩; justify-content: space-between; .form-group:nth-child(1) ( 입력 ( 너비: 95%; ) ) .col-6 ( 위치: 상대; 플렉스: 0 0 50%; 최대 너비: 50%; ) .pt-3 ( 패딩 상단: 1rem; ) .form-group ( 여백- 하단: 1rem; 라벨( 줄 높이: 1.7; 문자 간격: .3px; 텍스트 변환: 대문자; 글꼴 크기: 14px; 글꼴 무게: 900; ) 텍스트 영역( 최소 높이: 110px; 크기 조정: 수직; ) ) )
PHP 코드 설정이제 선택한 선택기인 Bot/Human에 따라 모든 작업이 시작되는 양식 처리기로 이동해 보겠습니다.
거기 무엇이 있나요?
- header("새로고침: 5; URL=https://www.site.ru"); — 봇이 양식을 작성한 후 이를 알림 페이지로 보내고 5초 후에 필드에 지정된 페이지로 돌아갑니다.
- 메일, 이름, 전화번호, ... - HTML 필드 일치를 설정합니다. 여기서 피드백 양식에 관련된 모든 이름=""을 제공해야 합니다. 따라서 서비스 필드에서는 html 마크업과 정확히 동일한 옵션 순서를 지정해야 합니다.
- $mess는 편지로 도착할 메시지의 본문입니다. 이를 교환하거나, 이름을 변경하거나, 필요하지 않은 항목을 삭제/주석 처리할 수 있습니다.
- $headers는 문자의 인코딩을 나타내는 필수 라인입니다. 실수로 charset=utf-8을 지우거나 변경하면 모든 단어가 상형 문자로 변경됩니다.
- 헤더 - 버튼을 성공적으로 클릭하면 방문자가 알림 페이지로 이동하고 5초 후에 지정된 페이지로 리디렉션됩니다. 그렇지 않으면(오류 알림을 받게 됩니다.
이전에는 세 가지 필수 필드에 대해 추가된 ID와 기능을 본 HTML 양식 템플릿을 살펴보았습니다. 이제 왜 추가되었는지 알아낼 시간입니다.
js 코드를 살펴보세요. 이는 비활성화되면 필요한 필드가 채워지기 전에 방문자가 클릭하는 것을 방지하는 버튼 차단기입니다.
function checkParams() ( var name = $("#name").val(); var email = $("#email").val(); varphone = $("#phone").val(); if (name.length != 0 && email.length >= 6 &&phone.length >= 10) ( $("#submit").removeAttr("disabled"); ) else ( $("#submit"). attr("비활성화됨", "비활성화됨");
이 스크립트에 바인딩하기 위해 필수 필드에 ID를 삽입하고 버튼을 비활성화했습니다. 필요한 var 줄을 추가/제거하여 이름과 수량을 변경할 수 있습니다. 그러나 추가하거나 제거하는 경우 if (name.length != 0 && email.length >= 6 &&phone.length >= 10) ( .
이 라인은 어떻게 작동하나요?모든 것은 지정된 필드의 문자 수에 따라 달라집니다. 길이 길이.
- if (name.length != 0 - 필드가 비어 있으면 안 됨을 나타냅니다. 다음과 같이 읽습니다. - "필드의 문자 수가 0이 아닌 경우 ..."
- && - 조건 (and) 결합
- email.length >= 6 — 문자 수는 6보다 크거나 같아야 합니다. 왜 6인가요? 최소 우편 주소가 6자이기 때문에 이 번호를 표시했습니다. 확인해볼까요? @bk.ru - 6자.
- phone.length >= 10 - 10자 이상입니다. 왜 11이 아니고 10인가요? 이 필드를 작성할 때 방문자는 자신의 전화번호를 +7 또는 8로 표시할 수 있습니다. 따라서 10을 표시하는 것이 좋습니다.
그게 다야. 양식을 연결하고 테스트하여 사용하세요.
궁금한 점이 있으면 댓글을 작성하고 기사 평가에 인색하지 마세요. 미리 감사드립니다 :)
그래서 우리는 플랫 디자인을 사용하여 처음부터 웹 사이트를 만드는 방법에 대한 일련의 강의를 완료하고 있습니다. 우리가 사이트 헤더를 디자인했음을 상기시켜 드리겠습니다. 켜기 - 전체 화면에 그림이 있는 섹션입니다. 포트폴리오 작품이 전시된 갤러리입니다. 켜짐 - 3열 레이아웃. 그리고 마지막 단계로 오늘은 피드백 양식과 바닥글의 레이아웃을 수행하고 있습니다.
이것이 우리가 얻어야 할 것입니다.
여기에 모든 코드를 표시하지는 않겠습니다. 코드가 너무 길기 때문입니다. jsfiddle에서 전체 코드와 완성된 결과를 볼 수 있습니다.
내 임무는 레이아웃의 원칙, 즉 레이아웃을 볼 때 레이아웃 디자이너가 어떻게 생각하는지에 대한 논리를 보여주는 것입니다. 첫째, 그는 정신적으로 전체 레이아웃을 큰 섹션으로 나눕니다. 그런 다음 내부의 각 섹션은 작은 블록으로 나뉩니다. 아래 스크린샷을 참조하세요.
피드백 양식 자체는 part_2_of_3 클래스가 있는 div 태그에 배치되며 상위 양식 너비의 2/3를 차지합니다.
그런 다음 part_1_of_3 클래스가 있는 div 태그의 두 번째 블록이 옵니다. 차지하는 너비는 이에 따라 상위 블록의 1/3입니다.
CSS 스타일:
범죄자(
디스플레이: 블록;
왼쪽으로 뜨다;
마진: 3% 0 3% 1.5%;
}
.con:첫 번째 자식(
여백-왼쪽:0; /* 폼이 있는 블록을 왼쪽 가장자리로 누르기 */
}
.part_2_of_3(
너비: 66%; /* 형식의 블록 너비 */
}
.part_1_of_3(
너비: 32%; /* 정보 블록의 너비 */
}
.cont-form(
패딩 하단: 25px; /* 블록 모양에서 아래쪽 들여쓰기 */
}
.cont-form div(
패딩: 5px 0 15px;
}
.cont-form 입력, .cont-form 입력, .cont-form 텍스트 영역(
너비: 42%; /* 텍스트 및 이메일 입력 필드 너비 */
패딩: 15px;
디스플레이: 블록;
개요: 없음;
배경색: #fff; /* 양식 셀의 색상 */
색상: #888282; /* 폼 텍스트 입력 색상 */
글꼴 크기: 0.8em; /* 양식 텍스트 입력의 글꼴 크기 */
왼쪽으로 뜨다;
여백 오른쪽: 2em; /* 오른쪽 들여쓰기 */
글꼴 스타일: 기울임체; /* 이탤릭체로 텍스트를 입력하세요 */
테두리: 2px 단색 #cacaca; /* 양식 셀의 테두리 */
}
.cont-form 입력(
여백 오른쪽: 0em; /* 오른쪽 들여쓰기 */
}
.cont-form textarea( /* 양식 텍스트 영역의 값 */
패딩: 18px; /* 텍스트 영역의 모든 필드 */
디스플레이: 블록;
너비: 93%; /* 텍스트 영역 모양의 너비 */
높이:180px; /* 텍스트 영역 모양의 높이 */
배경색: #fff; /* 텍스트 영역 배경의 wdtn */
개요: 없음;
색상: #888282; /* 텍스트 영역에 입력된 텍스트 색상 */
글꼴 크기: 0.8em; /* 텍스트 영역의 글꼴 크기 */
글꼴 스타일: 기울임체; /* 양식 텍스트 영역의 기울임체 */
테두리:2px 솔리드 #cacaca;
여백-하단: 2em;
}
.cont-form 입력(
글꼴 모음: Verdana, sans-serif;
글꼴 크기: 1em;
색상:#fff;
패딩: 0.7em 1.4em;
오른쪽 여백: 2%;
배경색: #a97b7b;
테두리:없음;
디스플레이: 블록;
커서: 포인터;
개요: 없음;
텍스트 변환: 대문자; /* 대문자로 변환 */
플로트: 오른쪽;
}
.comp_addp(
글꼴 크기:0.8em;
색상:#525252;
줄 높이: 1.8em;
여백-하단: 2%;
}
.comp_추가(
글꼴 크기:1.1em;
색상:#525252;
줄 높이: 1.8em;
여백-하단: 2%;
}
.list2 리 img(
여백 상단: 4px;
왼쪽으로 뜨다;
}
.list2 리 .icon(
왼쪽으로 뜨다;
왼쪽 패딩: 1em;
}
지하실의 레이아웃으로 상황이 훨씬 간단해졌습니다. 바닥글 태그 안에는 저작권과 링크가 포함된 div 블록이 있습니다.
이 짧은 게시물에서는 이미지를 사용하지 않고 순수한 CSS를 사용하여 아름다운 문의 양식을 만드는 방법을 단계별로 보여 드리겠습니다. 양식에는 이름, 이메일, URL, 제목, 메시지 본문 등의 정보가 포함된 필드가 있습니다. 브라우저 간 호환성을 위해 공급업체 접두사를 사용하지만 코드를 단축하기 위해 여기서는 공급업체 접두사가 없는 레이아웃을 고려합니다. .
HTML로 양식 만들기 피드백 양식은 다음과 같습니다.먼저, 양식에 대한 간단한 설명입니다.
- 입력 유형 = 이메일은 사용자가 이메일 주소를 입력할 수 있는 필드를 나타내는 데 사용됩니다. 이 필드 유형을 지원하는 브라우저는 사용자가 유효한 이메일 주소를 입력했는지 여부를 확인할 수 있습니다.
- 입력 유형 = url은 유효한 URL이 입력되었는지 확인하는 데 사용됩니다.
- Require = 필수는 필수에 따라 양식 요소의 상태를 지정합니다. 이 속성을 지원하는 브라우저는 모든 필수 필드가 완료될 때까지 양식이 제출되지 않도록 차단합니다.
- 자리 표시자 이 속성은 사용자가 데이터를 입력할 내용과 형식을 알 수 있도록 힌트를 제공합니다. 필드를 클릭하면 자리 표시자가 사라집니다.
이름 *
이메일 주소 *
웹사이트
주제
메시지 *
*가 있는 모든 필드는 필수입니다.
줄무늬 배경 만들기봉투 효과를 만들려면 줄무늬 그라데이션으로 배경을 채우는 것부터 시작하세요.
#content( position:relative; margin:50px auto; width:400px; min-height:200px; z-index:100; padding:30px; border:1px solid #383838; background: #D1D1D1; /* 제거된 배경 * / 배경: 반복-선형-그라디언트(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); 6픽셀 #3F3F3F )
Repeating-linear-gradient 속성을 사용하면 무한히 반복 가능한 선형 그래디언트를 만들 수 있습니다. 먼저 줄무늬를 45도 각도로 기울인 다음 줄무늬에 순차적으로 색상을 지정하고 너비를 픽셀 단위로 지정했습니다. 이제 그라데이션 배경이 생겼습니다. 남은 것은 밝은 회색 배경을 추가하는 것뿐입니다. 이후 의사 클래스를 사용해 보겠습니다.
/** 줄무늬를 가리킬 내 "가짜" 배경 **/ #content:after( background:#F9F9F9; margin:10px; position: 절대; content: " "; 하단: 0; 왼쪽: 0; 오른쪽: 0 ; 상단: 0; 테두리: 1px #E5E5E5 솔리드;
H1 헤더 만들기H1 헤더에는 Questrial 글꼴을, 연락처 양식 본문에는 Droid Sans를, 앰퍼샌드에는 Alice를 선택했습니다. 이 글꼴은 모두 Google의 글꼴 디렉토리에 있으므로 Google의 API 코드를 사용하기만 하면 됩니다.
이제 제목을 만들어 보겠습니다.
H1 ( 글꼴 계열: "Questrial", Verdana, sans-serif; text-align:center; 글꼴 크기:40px; 패딩:0; 여백:0 0 20px 0; 위치:상대; 색상:#8C8C8C; ) / ** 멋진 앰퍼샌드를 사용하세요 **/ h1:after (font-size:25px; color:#D6CFCB; content: "&"; text-align:center; display:block; width:100%;font-family: " Alice", Verdana, serif; text-shadow: 0px 1px 0px #fff; ) /** 그라데이션 하단 생성 **/ h1:before ( position:absolute; Bottom:15px; content: " "; text-align:center ; 디스플레이:블록; 높이:2px; 너비:100%; 배경: 선형 그라데이션(왼쪽, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43% ,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%);
사진을 사용하지 않고 아이콘을 추가해보자글꼴 아이콘을 사용하여 이 작업을 수행하겠습니다. 첨부 파일에 있는 아이콘 글꼴을 사용하거나 다른 글꼴을 사용해도 됩니다. 저는 flaticon.com에서 아이콘 팩을 만드는 것을 좋아합니다. 우리 상황에서 글꼴을 사용하면 얻을 수 있는 이점은 분명합니다. 아이콘의 크기, 색상은 물론 애니메이션까지 조작할 수 있습니다. 일반적인 이미지에 대해서도 마찬가지입니다. 또한 우리는 항상 레티나 디스플레이의 디스플레이 품질로부터 이익을 얻습니다.
/** 아이콘 글꼴 추가 !! */ @font-face ( 글꼴 계열: "IconicStroke"; src: url("font/iconic_Stroke-webfont.eot"); src: url("font/iconic_Stroke-webfont.eot?#iefix") 형식(" 임베디드-오픈타입"), url("글꼴/iconic_Stroke-webfont.woff") 형식("woff"), url("글꼴/iconic_Stroke-webfont.ttf") 형식("truetype"), url("글꼴/iconic_Stroke -webfont.svg#IconicStrokeRegular") 형식("svg"); 글꼴 두께: 일반; 글꼴 스타일: 일반; ) .iconic:before( 글꼴 크기:25px; 글꼴 계열: "IconicStroke"; ) .iconic .link:before( 내용: "/"; ) .iconic.quote-alt:before( 내용: """; ) .iconic.comment:before( 내용: "q"; ) .iconic.user:before( 내용 : "u"; ) .iconic.mail-alt:before ( 내용: "M"; )
이제 데이터 입력 필드를 비활성 및 활성 상태로 디자인할 수 있습니다.
/** 이미 빨간색 별표를 사용하고 있으므로 필수 필드 주변의 빨간색 광선을 제거합니다. */ input:required, textarea:required ( -moz-box-shadow:none; -webkit-box-shadow:none; -o- box-shadow:none; box-shadow:none; ) /** 입력 및 텍스트 영역**/ input:not(), textarea( 개요: 없음; 디스플레이:블록; 너비:380px; 패딩:4px 8px; 테두리:1px 점선 #DBDBDB; 글꼴 계열:"Droid Sans",Tahoma,Arial,Verdana sans-serif; 글꼴 크기:14px; 배경 0.2초 선형, 상자 그림자 0.6초 선형; , 텍스트 영역:활성, 입력:not():초점, 텍스트 영역:초점( 배경:#F7F7F7; 테두리: 점선 1px #969696; 상자 그림자:2px 2px 7px #E8E8E8 삽입 ; ) 입력:not() ( 높이: 20px ; ) textarea( min-height:150px; resize:vertical ) /* 자리 표시자 */ ::-webkit-input-placeholder ( color:#BABABA; 글꼴 스타일: 기울임꼴; ) 입력:-moz-placeholder, textarea:- moz-placeholder( color:#BABABA; 글꼴 스타일: 기울임꼴; )
"제출" 버튼 및 서명 디자인제출 버튼의 경우 필드 유형 type=submit 을 사용합니다. 불행하게도 이러한 유형의 필드를 디자인하기 위해 의사 클래스:before 및:after를 사용할 수 없습니다. 그래서 특수 문자를 HTML 코드에 직접 구현했습니다. 물론 이것이 최선의 해결책은 아니므로 간단히 제거할 수 있습니다.
/** 보내기 버튼 스타일 지정 **/ input( margin-left:235px;cursor:pointer; background:none; border:none;font-family: "Alice",serif; color:#767676;font-size:18px ; 패딩:10px 4px; 테두리:1px 솔리드 #E0E0E0; 배경: rgb(247,247,247,1) ,1) box-shadow:0px 1px 1px #FFF 삽입 0 0 0px 5px #EAEAEA; 전환: 모든 0.2s 선형; #CECECE; 배경: 선형-그라디언트(상단, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%); 0px 1px 1px #FFF 삽입, 0 0 0px 5px #E0E0E0; ) 입력:활성, 입력:초점(위치:상대; 상단:1px; 색상:#515151; 배경: 선형-그라디언트(상단, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%); box -shadow:0px -1px 1px #FFF 삽입, 0 0 0px 5px #E0E0E0 )
양식이 완전해 보이도록 캡션 위로 마우스를 가져갈 때 멋진 색상과 전환을 캡션에 추가해 보겠습니다.
Label( color:#7F7E7E; -webkit-transition: 색상 1 가벼움; -moz-transition: 색상 1 가벼움; 전환: 색상 1 가벼움; ) label:hover( color:#191919; ) label:before( color:#C1BFBD ; 전환: 색상 1s 용이성; ) label:hover:before( 색상:#969696; 전환: 색상 1s 용이성; ) p( margin-bottom:20px; ) .indication( 색상:#878787; 글꼴 크기: 12px; 글꼴 -style:italic; 텍스트 정렬:오른쪽; .required( color:#E5224C; )
결론 대신이 짧은 게시물이 HTML5와 CSS3의 기능을 더 잘 이해하는 데 도움이 되었기를 바랍니다. 이것은 단지 발전의 기초로 삼을 수 있는 공백일 뿐이라는 점을 다시 한 번 강조하겠습니다. 게시물에 첨부된 피드백 양식은 적응형입니다.
