Css cho form
|
Trong hướng dẫn này, chúng ta sẽ khám phá cách trang trí một biểu mẫu tìm kiếm đơn giản. Chúng ta sẽ không làm bất cứ điều gì cao siêu cả, thay vào đó khám phá những điều kỳ diệu khác nhau để có thể trang trí hộp tìm kiếm với sự trợ giúp của CSS Transitions Show
Bạn đã có một Hộp tìm kiếm Cơ bảnĐể bắt đầu, trong tệp HTML, bạn cần phải tạo đầu vào để tìm kiếm. Nếu bạn xem qua đoạn mã ở bên dưới, bạn sẽ thấy bốn thứ khác nhau. một div 9, một divbody{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}0, một body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}1 và bản thân đầu vào tìm kiếmTất cả các ví dụ sẽ có một hộp tìm kiếm — tất nhiên rồi — cũng như một lớp cho biểu tượng tìm kiếm. Mỗi ví dụ sẽ được đặt trong một thùng chứa (phần tử chứa) để chúng ta có thể xử lý đầu vào tìm kiếm một cách độc lập. Cuối cùng, hộp chứa div chịu trách nhiệm cố định ở giữa Thêm Phông chữ Tuyệt vờiPhông chữ Tuyệt vời là một thư viện chứa các biểu tượng. Bạn có thể tìm hiểu thêm về dự án trên trang web của Font Awesome Đoạn mã ở trên là một ví dụ về cách bạn có thể bao gồm (bao gồm) các biểu tượng bên trong phần đánh dấu của bạn. Tuy nhiên, để các biểu tượng được hiển thị, bạn cũng cần phải bao gồm một liên kết đến thư viện Phông chữ Tuyệt vời, như minh hoạ như dưới đây. Hãy bao gồm các liên kết này trong phần đầu của tài liệu Phong cách cơ bảnBây giờ, chúng ta sẽ thêm một số cách trong một biểu định kiểu riêng (bạn cũng cần đến nó để liên kết đến từ bên trong phần đầu của tài liệu) body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}Trong đoạn mã CSS ở trên chúng ta thêm một số cách cơ bản vào trang. Kiểu dáng của hộp tìm kiếm sẽ có màu xanh đậm vì da nền của phần thân không nên có màu trắng hoàn toàn. Hộp lớp cũng được canh giữa trên trang minh hoạ của hướng dẫn Trang trí Hộp Tìm kiếmHướng dẫn này xoay quanh công việc học cách trang trí các hộp tìm kiếm. Trong ví dụ đầu tiên này, tôi sẽ giải thích chi tiết hơn những gì đang xảy ra; . Trong ba ví dụ còn lại, tôi đơn giản chỉ là cho bạn cách đạt được các hiệu ứng chuyển tiếp khác nhau #1. Nền Mờ dầnVí dụ đầu tiên chúng ta sẽ giải quyết là thay đổi hình nền của đầu vào tìm kiếm khi di chuột (di chuyển chuột bên trên). Chúng ta cũng sẽ thêm một hiệu ứng chuyển tiếp để việc thay đổi không quá đột ngột HTMLYou have found HTML for markup basic. Đoạn mã này sẽ tương tự như vậy cho tất cả các ví dụ CSSĐể bắt đầu định vị, chúng ta cần phải định nghĩa cách CSS của hộp tìm kiếm. Hãy bổ sung tất cả các thuộc tính CSS khác nhau từng cái một để bạn có thể biết chính xác những gì đang xảy ra Trước tiên, chúng ta muốn trang trí lớp container. Thuộc tính được xem là quan trọng nhất. body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}2. Điều này được thiết lập theo một cách đặc biệt để biểu tượng có thể được đặt ở bên trên đầu vào như bạn sẽ thấy sau đâybody{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}0Đầu vàoTiếp theo chúng ta cần trang trí đầu vào sự thật. Tất cả mọi thứ ở trên đẹp một cách tự nhiên vì bán kính đường viền hoặc màu nền không ảnh hưởng đến cách hoạt động đầu vào. Please save the thuộc tính padding-left. Nó ở đó để tạo khoảng trắng cho biểu tượng để nó không đè lên chữ bên trong đầu vào Dưới đây chúng ta có bốn thuộc tính khác nhau tô màu cho văn bản giữ chỗ (hay còn gọi là giữ chỗ), trong ví dụ của chúng ta là Tìm kiếm. Thật không thể là các thuộc tính cần phải được tách biệt với các tiền tố nhà cung cấp (tiền tố nhà cung cấp) và không thể hợp nhất thành một thuộc tính viết tắt. Có một chút khó chịu và bạn sẽ thấy điều này lặp đi lặp lại trong mỗi ví dụ body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}1Icon iconCuối cùng, chúng ta sẽ trang trí cho biểu tượng. Quan trọng nhất, chúng ta đang thiết lập vị trí của nó để được đặt bên trên đầu vào bằng cách thiết lập body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}3. Lề giúp xác định vị trí của biểu tượng bên cạnh thiết lập trên cùng là body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}4body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}4Add Effect khi HoverThuộc tính tiếp theo mà chúng ta phải tạo là những gì xảy ra với hộp tìm kiếm khi di chuột. Trong ví dụ này, chúng tôi chỉ muốn thay đổi màu nền. Để loại bỏ viền nổi màu vàng hoặc xanh xung quanh đầu vào (đôi khi trình duyệt bổ sung vào) thiết lập body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}5body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}6Như bạn đã thấy trong đoạn mã ở trên, chúng ta đã bổ sung thêm hai trạng thái - body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}6 và body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}7. Bằng cách này, hiệu ứng không biến mất khi bạn dừng di chuột lên trên đầu vào. Quan trọng hơn, hiệu ứng cũng nổi bật khi đầu vào đang được sử dụngCreate Effect Move NextĐể làm cho hiệu ứng chuyển tiếp xảy ra, chúng ta cần thêm một vài dòng mã. Quay trở lại tất cả các thuộc tính nơi chúng ta định nghĩa phong cách của đầu vào - body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}0 body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}9. Trước dấu đóng dấu thêm đoạn mã sau đây0 Chúng ta đang sử dụng cách viết tắt thuộc tính chuyển tiếp, nhưng thay vào đó chúng ta có thể xác định ba tham số riêng. Đầu tiên, chúng ta đang nói rằng hiệu ứng chuyển tiếp chỉ nên có tác dụng đối với nền thuộc tính. Tiếp theo, chúng ta đang nói rằng hiệu ứng chuyển tiếp sẽ cần hơn phân nửa giây. Cuối cùng, chúng ta định nghĩa hiệu ứng chuyển tiếp sẽ dễ dàng. 0 không phải là hiệu ứng duy nhất có thể hoạt động ở đây, ví dụ chúng ta còn có thể sử dụng 1 hoặc 2. Nó chỉ trông hơi khác nhau một chút. Hãy tự mình thử cái nào mà bạn thích Style for input time same as code outside 1 CSS Transitions Activity Như thế nào?Nếu bạn không biết chút gì về CSS Transitions, hãy để tôi mô tả ngắn gọn cho bạn. Thứ nhất, để hiệu ứng chuyển tiếp hoạt động, thuộc tính cần được định nghĩa trên trạng thái mặc định chứ không phải trên trạng thái hover, hoặc active hoặc focus Chuyển đổi CSS cho phép chuyển đổi hiệu ứng tăng dần và bạn có thể xác định các tham số công cụ có thể để kiểm tra, giả sử như thuộc tính sẽ được tạo hiệu ứng, thời gian chuyển tiếp và kiểu chuyển tiếp. Bạn có thể có nhiều hiệu ứng chuyển tiếp được thiết lập cho một phần tử. Nhưng, quan trọng hơn hết là bạn nên luôn bao gồm tiền tố nhà cung cấp (tiền tố nhà cung cấp) để tương thích với các trình duyệt khác nhau, vì sự hỗ trợ cho thuộc tính này vẫn chưa phổ biến Để tìm hiểu thêm hãy xem bài viết. CSS3 Transitions và Transforms Từ đầu #2. Mở rộng đầu vào khi di chuộtTrong ví dụ này, ô tìm kiếm sẽ bắt đầu dưới dạng một biểu tượng kính lúp. Khi bạn di chuột lên biểu tượng, ô tìm kiếm sẽ mở rộng, sau đó bạn có thể vào truy vấn của mình. Phần mã lớn trong ví dụ này sẽ rất giống với ví dụ trước đó HTML2 CSS3 Style input đối với hiệu ứng chuyển tiếp này thì khác. Đầu vào nhỏ hơn đáng kể nhờ đó biểu tượng có thể xuất hiện phía sau một hình vuông. Tất cả các thuộc tính còn lại, chẳng hạn như màu nền hoặc màu chữ, giống nhau vì chúng ta không muốn thay đổi hoàn toàn kiểu dáng của hộp tìm kiếm 4 Như bạn cũng có thể thấy tôi đã định nghĩa lại thuộc tính chuyển đổi để chỉ có tác dụng đối với chiều rộng. Tôi giữ nguyên thời gian vì nó đủ nhanh để không gây khó chịu cho người dùng, nhưng vẫn đủ lâu để tạo ra một hiệu ứng đẹp Dưới đây là đoạn mã để áp dụng lại màu cho văn bản giữ nguyên vị trí 5 Và một lần nữa chúng ta vào trang biểu tượng biểu tượng bằng CSS. Nó nên giống với trong ví dụ trước 6 Add Hiệu Ứng Di chuộtĐiều cuối cùng chúng ta cần làm là xác định hộp tìm kiếm sẽ trông giống như thế nào khi nó được di chuột qua. Trong đoạn mã dưới đây, thuộc tính đầu tiên chắc chắn rằng form không có hiệu ứng phát sáng của trình duyệt và khi bạn đang sử dụng đầu vào — khi đang nhập vào nó — hộp tìm kiếm vẫn được mở rộng. Thuộc tính nằm giữa đầu vào mở rộng chỉ để có đủ chiều rộng khi di chuột 7 Điều cuối cùng xảy ra trong mã ở trên là khi di chuột, biểu tượng sẽ thay đổi màu sắc của nó. Đây chỉ là một chi tiết nhỏ để nhanh chóng hiển thị cho người dùng biết hộp tìm kiếm đang hoạt động chứ không phải là một đầu vào tĩnh. Sự thay đổi không được cài đặt bằng một hiệu ứng chuyển tiếp #3. Tăng Kích thước Biểu tượng khi Di chuộtTrong tất cả các ví dụ, thì ví dụ này là tinh tế nhất, cả về mã và hiệu ứng trực quan. Trong trường hợp này, biểu tượng kính lúp sẽ bật lên một chút và tăng kích thước HTMLMột lần nữa đánh dấu HTML của biểu tượng và hộp tìm kiếm giống như trong hai ví dụ trước đó. Ngoại trừ, tất nhiên là 3 8 CSSCSS cho ví dụ này không có gì đặc biệt. Phần lớn nó bắt đầu rất giống với ví dụ đầu tiên, nơi trạng thái mặc định không có gì khác nhau cả. Bên dưới là code cho container và input. Lưu ý rằng không có hiệu ứng chuyển tiếp trên đầu vào trong lúc này 9 Một lần nữa, chúng ta có các thuộc tính giữ chỗ 0Bây giờ, hãy nhìn vào nó, ta sẽ thấy biểu tượng cho ví dụ này cũng tương tự. Nó giống như về màu sắc, vị trí và vân vân. Tuy nhiên, tôi đã thêm hiệu ứng chuyển tiếp vào nó. Những hiệu ứng chuyển tiếp này được áp dụng trên tất cả các thuộc tính, nó là một cách viết ngắn gọn hơn thay vì phải viết ra từng thuộc tính riêng 1Thêm Hiệu ứng Hover2Có một số điều xảy ra trong đoạn mã trên. Thứ nhất, chúng ta đang thay đổi màu sắc của biểu tượng khi di chuột và chuyển nó cao hơn một chút để nó canh giữa theo chiều dọc khi nó lớn hơn. Thứ hai, chúng ta thêm một biến đổi vào biểu tượng khi di chuột để nó lớn hơn 1,5 lần so với kích thước ban đầu của nó. Bởi vì hiệu ứng chuyển tiếp được xác định nghĩa là tác động đến tất cả các thuộc tính, do đó nó xuất hiện nếu biểu tượng này lớn lên khi di chuột Một lần nữa, hãy xem qua Hiệu ứng Chuyển tiếp và Chuyển đổi trong CSS3 để tìm hiểu thêm về các thuộc tính biến đổi #4. Khi Hover ButtonKhông giống như ba ví dụ trước, ví dụ này sẽ phức tạp hơn. Khi di chuột, một nút sẽ trượt lên phía trên đầu vào để cho phép bạn tiếp tục — giống như Gửi hoặc Đi. Nút sẽ có biểu tượng ống kính lúp bên trong nó HTML3Ở đây HTML có một chút khác biệt. Tất nhiên đầu vào vẫn còn ở đó, nhưng biểu tượng bây giờ đang ở bên trong một nút phần tử xuất hiện phía sau đầu vào. Điều quan trọng là nút ở phía sau đầu vào vì nó liên quan đến cách hiệu ứng di chuột sẽ được tạo ra trong CSS CSSCSS trong ví dụ này thì khác, vì vậy hãy chú ý. Dưới đây là đoạn mã để trang trí cho vùng chứa. Thứ nhất, body{
background: #343d46;
}
.box{
margin: 100px auto;
width: 300px;
height: 50px;
}2 biến mất, nó không còn quan trọng vì biểu tượng không còn dựa vào nó để được đặt bên trên đầu vào. Tuy nhiên, chúng ta có 5. Điều này sẽ giúp nút thoát khỏi hiển thị khi nó không được di chuột. Về mặt kỹ thuật, nút xuất hiện ở bên phải đầu vào, nhưng nhờ vào 5 mà nó không hiển thị khi nó rơi ra ngoài chiều rộng của vùng chứa — vùng chứa và đầu vào có cùng chiều rộng4 Bên dưới đầu vào không có hiệu ứng chuyển tiếp vì nó không phải là phần tử được áp dụng hiệu ứng 5Tiếp theo là mã đoạn để áp dụng lại màu cho trình giữ chỗ 6Dưới đây là đoạn mã để nút vị trí xuất hiện khi di chuột. Mánh khoé để làm cho nó trượt từ cạnh bên vào là đặt nó ngay sau đầu vào và ẩn nó trừ khi di chuột. Nút là phần tử thay đổi — nó di chuyển — do đó nó là phần tử nơi mà hiệu ứng chuyển tiếp được định nghĩa. Để đơn giản hơn, tôi đã định nghĩa hiệu ứng chuyển tiếp để áp dụng lên tất cả các thuộc tính 7Add Hiệu ứng Di chuộtĐể nút hiện tiến, nó cần được chuyển lên trên đầu vào. Điều đó được thực hiện thông qua lề âm thanh. Trước đó, chúng tôi đã thiết lập mức độ trong suốt (độ mờ) của nút là 7 vì vậy chúng tôi phải đặt lại nó thành 8 để nút có thể hiển thị Cuối cùng thuộc tính chỉ thay đổi hình nền của nút nếu bạn di chuột lên nút. Thật tốt khi cho phép người dùng biết rằng nút đang hoạt động và bạn có thể nhấp vào nó để gửi thông tin tìm kiếm; 8Tóm tắtVâng, điều đó đưa chúng ta đến phần kết thúc của các thử nghiệm CSS của chúng ta. Chúng ta đã lấy một biểu mẫu tìm kiếm cơ bản và sử dụng một số hiệu ứng để thay đổi hành vi của nó. Bạn có xuất hiện bất cứ điều gì trong công việc thay đổi đầu vào tìm kiếm như thế này không? |
