10 thủ thuật CSS đáng kinh ngạc để biến đổi bố cục web của bạn
Bất kỳ ai có kinh nghiệm về thiết kế web, cho dù bạn đã sử dụng trình tạo trang web DIY hay tạo trang web từ đầu, đều có thể đã nghe nói về CSS trước đây. Công cụ cực kỳ mạnh mẽ này có thể được sử dụng để biến đổi bố cục web của bạn, mang lại cho bạn sức mạnh để kiểm soát trang web và đạt được tầm nhìn sáng tạo của mình. Nhưng làm thế nào bạn có thể sử dụng các biểu định kiểu xếp tầng để mở khóa tiềm năng của trang web tiếp theo của bạn?
Hướng dẫn này sẽ chỉ trình bày chi tiết một loạt các thuộc tính CSS đã được sử dụng để tạo tiêu đề mà bạn có thể thấy trong hình trên. Bạn có thể tìm thấy dự án này tại đây trên CodePen, giúp bạn có cơ hội thử sức với chính mình.
Mục Lục
Thao tác hình ảnh CSS
Bước đầu tiên chúng ta cần thực hiện để xây dựng phần tiêu đề là thêm hình ảnh vào trang. Bạn có thể sử dụng một loạt các phương pháp để đạt được mục tiêu này, vì vậy chúng tôi đã đề cập đến các phương pháp phổ biến nhất, cùng với một số thủ thuật để giúp bạn chỉnh sửa hình ảnh của mình.
1. Hình ảnh nền CSS
Chúng tôi muốn có hình nền toàn màn hình cho tiêu đề của mình và thuộc tính CSS hình nền là lý tưởng. Đầu tiên, chúng ta cần tạo một vùng chứa cho hình ảnh của mình (và phần còn lại của các phần tử trong tiêu đề).
Chúng tôi đã bắt đầu bằng cách thêm thẻ div với “tiêu đề” làm lớp của nó, tiếp theo là đặt chiều cao đến 100vh và nó chiều rộng đến 100vw; điều này cho chúng ta một hộp có cùng kích thước với khung nhìn. Chúng tôi cũng đã thêm quy tắc CSS cho phần nội dung của trang, với tràn được đặt thành ẩn và nó lề được đặt thành 0px.
Với vùng chứa tại chỗ, chúng ta có thể thêm hình nền và có ba quy tắc CSS khác nhau mà chúng ta cần để đạt được mục tiêu này. Hình ảnh nền đầu tiên cần có URL để hoạt động như nguồn của hình ảnh nền và chúng tôi đã sử dụng danh mục Unsplash hữu ích cho việc này. Chúng tôi cũng cần đặt kích thước nền để bao gồm và background-position đến bottomnhưng bạn có thể muốn thử nghiệm với những thứ này để có kết quả tốt nhất.
2. CSS Background-Blend-Mode
Các chế độ hòa trộn CSS giúp bạn có thể hòa trộn hình ảnh và văn bản, giống như tính năng hòa trộn trong phần mềm như Adobe Photoshop. Để làm cho các chế độ hòa trộn hoạt động với hình nền của chúng tôi, chúng tôi đặt màu nền đến màu trắng nửa trong suốt trước khi thêm chế độ hòa trộn mà chúng tôi muốn sử dụng.
Sau đây, background-blend-mode đã được đặt thành soft-lightcho phép chúng tôi làm mềm hình ảnh.
3. Đường dẫn Clip CSS
Đối với thủ thuật tiếp theo của chúng tôi, chúng tôi sẽ sử dụng một quy tắc có tên là clip-path. Khi sử dụng thẻ img HTML, bạn có thể đặt một đường dẫn sẽ ẩn các phần của hình ảnh mà bạn đang làm việc với. Bạn có thể chọn sử dụng các hình dạng chung cho việc này, nhưng bạn cũng có thể sử dụng ứng dụng tạo SVG để tạo ra một thiết kế phức tạp hơn.
Chúng tôi đã thêm thẻ div với “flex_image_box” để hoạt động như một vùng chứa cho ba hình ảnh, sử dụng thuộc tính CSS display để biến nó thành một flexbox (chúng ta sẽ nói về vấn đề này sau). Ba thẻ img đã được thêm vào bên trong thẻ div, với các ID được đặt là “img1”, “img2” và “img3”. Đặt chiều rộng của mỗi hình ảnh đến 600pxchúng ta có thể để trống thuộc tính chiều cao mà không thay đổi tỷ lệ khung hình của hình ảnh; bây giờ là lúc để thêm clip-path của chúng tôi!
Để tạo ba hình tam giác, chúng tôi đã sử dụng cùng một đường dẫn clip-đa giác cho img1 và img3, với một phiên bản đảo ngược dành cho img2. Chúng tôi cũng phải chơi với việc định vị vùng chứa hộp linh hoạt của mình để đảm bảo rằng hình ảnh nằm ở đúng vị trí trên màn hình. Các quy tắc về đường dẫn clip của chúng tôi có thể được xem bên dưới.
4. Độ mờ của CSS
Độ mờ đặt mức độ trong suốt của bất kỳ phần tử HTML nào. Chúng tôi đặt độ mờ của hình ảnh của chúng tôi đến 90%làm cho chúng hơi mờ đục để chúng kết hợp hài hòa với nền.
Văn bản & hình ảnh đáp ứng CSS
Trước đây, chúng tôi đã khám phá nghệ thuật tạo các trang web đáp ứng tuyệt đẹp bằng HTML, CSS và JavaScript, nhưng chúng tôi có thể xây dựng dựa trên các nguyên tắc mà bạn đã hiểu, cung cấp cái nhìn sâu sắc hơn về các kỹ năng bạn cần để nắm vững bố cục trang web của mình.
1. Các đơn vị tương đối / phản hồi CSS
Các đơn vị CSS như px, pt và cm là các đơn vị tuyệt đối và điều này có nghĩa là trình duyệt web sẽ hiển thị chúng ở cùng một kích thước bất kể chiều rộng và chiều cao của cửa sổ mà chúng chiếm. Các đơn vị tương đối khác nhau, tạo ra chiều cao và độ dài tương đối với các phép đo khác, như cửa sổ trình duyệt hoặc phần tử mẹ. Các đơn vị tương đối dưới đây thường được sử dụng và cần thiết cho thiết kế web đáp ứng.
- em: Đơn vị này thường được sử dụng với văn bản. Nó tương đối với kích thước phông chữ của phần tử hiện tại, lớn gấp 4 lần kích thước phông chữ được đặt.
- rem: Giống như em, rem có liên quan đến kích thước phông chữ của một phần tử; phần tử gốc trong hệ thống phân cấp được sử dụng để xác định kích thước đầu ra.
- vw / vh: Xác định chiều rộng và chiều cao dựa trên kích thước của chế độ xem, 2vw bằng 2% chiều rộng của trình duyệt trong khi 2vh bằng 2% chiều cao của trình duyệt.
- %: Đơn vị% tính toán kích thước dựa trên kích thước của phần tử gốc.
- vmin / vmax: Các đơn vị này tạo ra kích thước tương ứng với 1% kích thước nhỏ nhất hoặc lớn nhất của chế độ xem, cung cấp cho các phần tử phương tiện để phản hồi trực tiếp với kích thước của cửa sổ trình duyệt.
2. Kích thước phông chữ CSS
Thuộc tính này có thể được đặt bằng cách sử dụng các giá trị mặc định được xác định trước bởi biểu định kiểu chính của trang web hoặc trình duyệt web của người dùng. Các giá trị này bao gồm trung bình, xx-nhỏ, x-nhỏ, nhỏ, lớn, x-lớn và xx-lớn, với trung bình được đặt làm mặc định cho bất kỳ văn bản nào thiếu thẻ CSS kích thước phông chữ. Ngoài ra, các giá trị tương đối có thể được sử dụng khi sử dụng thuộc tính CSS kích thước phông chữ và đây là phương pháp chúng tôi đã sử dụng để đảm bảo rằng văn bản trong phần tiêu đề của chúng tôi có kích thước thích hợp cho bất kỳ chế độ xem nào.
Chúng tôi đã thêm hai thẻ tiêu đề vào HTML của mình, cho phép chúng tôi thêm văn bản vào dự án. Một là tiêu đề lớn chính, trong khi tiêu đề kia là tiêu đề phụ và cả hai đều sử dụng đơn vị tương đối.
3. Chiều rộng & chiều cao CSS
Tất cả các phần tử HTML đều có kích thước chiều cao và chiều rộng, cho dù chúng là div, img, a hay bất kỳ loại thẻ nào khác. Các kích thước này có thể được tự động đặt thành các giá trị mặc định, nhưng chúng cũng có thể được các nhà thiết kế web ra lệnh bằng cách sử dụng các quy tắc chính xác; chúng tôi đã sử dụng cả hai phương pháp này cho tiêu đề này.
Đơn vị đáp ứng đã được sử dụng cho hình nền, với chiều cao được đặt thành 100vh và chiều rộng được đặt thành 100vw, nhưng chúng tôi cũng đã sử dụng đơn vị tuyệt đối cho ba hình ảnh của mình. Thật đáng để khám phá và thử nghiệm với các đơn vị chiều rộng và chiều cao CSS, với các tùy chọn như “inherit” cung cấp phương tiện để áp dụng các kích thước của phần tử mẹ và có vô số thủ thuật khác như thế này mà bạn có thể sử dụng.
4. CSS Mix-Blend-Mode
Chế độ hòa trộn CSS rất giống với chế độ hòa trộn nền, chỉ có điều nó có thể được áp dụng cho bất kỳ phần tử nào, thay vì chỉ dành riêng cho nền. Chúng tôi đã sử dụng thuộc tính này trên tiêu đề H1 của mình để thêm kết cấu và làm cho dự án thú vị hơn. Chúng tôi bắt đầu bằng cách thiết lập màu văn bản thành màu đentiếp theo là thiết lập mix-Blend-mode để overlay.
Rất đáng để khám phá các tùy chọn pha trộn khác nhau mà bạn có khi xử lý văn bản, vì nền có cấu hình màu độc đáo sẽ phản ứng khác nhau với các cài đặt bạn sử dụng.
5. Chuyển đổi văn bản CSS
Chuyển đổi văn bản CSS là một thuộc tính thông minh cho phép các nhà thiết kế thay đổi trường hợp của văn bản trên trang web của họ mà không ảnh hưởng đến cách mà các công cụ tìm kiếm đọc nó. Ví dụ, chúng tôi có đặt biến đổi văn bản thành chữ hoa trên tiêu đề H1 của chúng tôi, viết hoa mỗi chữ cái bất kể chúng tôi nhập nó như thế nào trong HTML của mình.
Thuộc tính tràn CSS
HTML thường có vẻ giống như một khuôn khổ cứng nhắc đặt ra các ranh giới nghiêm ngặt cho nội dung trên trang web của bạn, nhưng điều này không xảy ra khi các thuộc tính tràn được sử dụng.
CSS Overflow & Text-Overflow
Overflow và text-tràn là các thuộc tính CSS rất giống nhau. Overflow có thể được áp dụng cho bất kỳ phần tử nào, cho phép bạn kiểm soát nội dung có thể thoát khỏi ranh giới của nó. Tràn văn bản cũng tương tự, mặc dù nó chỉ áp dụng cho văn bản và cung cấp cho bạn khả năng thêm các tham số bổ sung vào quy tắc của mình. Chúng tôi chỉ sử dụng tràn văn bản cho dự án này (chúng tôi đã sử dụng nó để hạn chế kích thước của nội dung trang của chúng tôi), nhưng bạn có thể đọc về tràn văn bản trên trang web W3Schools.
Sử dụng CSS cho bố cục web của bạn
CSS là một công cụ cực kỳ mạnh mẽ, cho phép các nhà thiết kế và phát triển web tạo ra các trang web tuyệt đẹp bằng cách sử dụng mã. Chúng tôi khuyến khích bạn xem qua CodePen mà chúng tôi đã cung cấp ở đầu bài viết, vì điều này sẽ cung cấp cho bạn cái nhìn sâu sắc hơn về cách tất cả các công cụ này hoạt động. Ngoài ra, bạn có thể chơi với cú đánh đầu mà chúng tôi đã thực hiện để thêm những cú dứt điểm của riêng bạn.
Đọc tiếp
Thông tin về các Tác giả
