Việc sử dụng các công cụ từ CSS và bố cục trình duyệt có thể tạo ra hình ảnh trực quan tuyệt đẹp cho nội dung web. Việc sử dụng các tính năng web như bộ lọc CSS, WebGL, video HTML5, SVG, canvas và công nghệ tương lai đang phát triển như Vùng CSS, Hình dạng CSS và Bộ lọc tuỳ chỉnh CSS hứa hẹn sẽ mở rộng đáng kể bối cảnh sáng tạo. Adobe đã có nhiều năm làm việc với những nhà sáng tạo nội dung đam mê bố cục và thiết kế. Vì vậy, Adobe đã tích cực áp dụng kiến thức này cho web bằng cách đóng góp cho nhiều tiêu chuẩn web đang phát triển.
Với sự trợ giúp của National Geographic, chúng tôi đã sử dụng nội dung trong chương trình có tên "Forest Giant" (Người khổng lồ trong rừng) để tạo một nguyên mẫu cho thấy cách các tính năng này có thể hỗ trợ bố cục web phong phú và các kỹ thuật thích ứng. Bài viết này sẽ cho bạn biết cách chúng tôi xây dựng một số đặc điểm đặc biệt thú vị của trang web. Để nắm được thông tin tổng quan ngắn gọn, bạn nên xem video bên dưới. Trong video này, Christian Cantrell sẽ hướng dẫn bạn về các tính năng của trang web.
Các chi tiết tinh tế của bố cục
Có thể bạn không nhận ra những yếu tố tạo nên một bố cục tuyệt vời và các tính năng đằng sau bố cục đó. Vì vậy, chúng tôi đã tạo một "lớp phủ của trình chỉnh sửa" để làm nổi bật các tính năng đáng chú ý hơn. Để bật các dấu của người chỉnh sửa, hãy nhấp vào thanh ở cuối bài viết.

Bố cục độc lập
Ngày nay, trên web, bố cục thường do nội dung của chúng ta quyết định, trong đó các vùng chứa sẽ mở rộng theo chiều dọc để vừa với văn bản. Khi tạo bố cục phức tạp, những thay đổi đối với văn bản hoặc nội dung khác có thể ảnh hưởng không mong muốn đến bố cục tổng thể, khiến bạn phải thiết kế lại nội dung dựa trên những thay đổi ngoài dự kiến. Với các vùng, chúng ta có thể thực sự tách nội dung khỏi bố cục bằng cách xác định một phần tử làm nội dung, sau đó chỉ định các phần của bố cục mà chúng ta muốn nội dung đó chảy qua.
Trong ví dụ về "Forest Giant", câu chuyện được chứa trong một phần tử duy nhất. Sau đó, trên toàn bộ trang, chúng ta có một giàn đỡ bố cục, bao gồm các khu vực ảnh và văn bản. Với CSS, chúng ta xác định các phần tử mà chúng ta muốn nội dung chảy qua. Khi bản sao đến cuối một phần tử, bản sao sẽ tiếp tục đến phần tử tiếp theo theo thứ tự DOM. Điều này cho phép chúng ta sáng tạo với các cột, bù trừ và điều chỉnh chiều cao của cột dựa trên thiết kế, mà không cần lo lắng về việc văn bản có vừa với chiều cao của phần tử hay không. Điều này cũng cho phép chúng ta có các phần tử trong bố cục, chẳng hạn như hình ảnh toàn chiều rộng, trong khi câu chuyện vẫn tiếp tục diễn ra.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Trong CSS ở trên, chúng ta đang tạo một flow có tên là "story". Nội dung của luồng được đặt tên này là phần tử có mã nhận dạng là "storyContent". Sau đó, thuộc tính này sẽ được truyền qua tất cả các phần tử có tên lớp "story". Vùng CSS là một công cụ tuyệt vời cho thiết kế thích ứng, cho phép các tính năng như nhiều cột và cột bù cho bố cục phong phú trên màn hình lớn, đồng thời điều chỉnh bố cục một cột trên màn hình nhỏ hơn. Với các vùng, bạn cũng có thể đặt kích thước của vùng bằng các đơn vị thích ứng như vw hoặc vh. Bạn có thể sử dụng thuộc tính này để đảm bảo các cột không vượt quá chiều cao khung nhìn trong bố cục mà không lo nội dung bị cắt bớt, vì nội dung sẽ tự nhiên chuyển sang phần tử tiếp theo trong chuỗi vùng.
Chữ cái đầu dòng in hoa
CSS Exclusions cho phép chúng ta gói văn bản xung quanh hoặc trong các hình dạng bất thường. Điều này có thể hữu ích cho các thiết kế trang trí như chữ cái đầu tiên. Chữ cái đầu dòng là một phương pháp thiết kế phổ biến, trong đó chữ cái đầu tiên của một câu chuyện hoặc chương được phóng to, cho phép phần văn bản còn lại bao quanh đường viền của chữ cái đó. Hiệu ứng này rất giống với cách nội dung nội tuyến bao quanh các phần tử nổi, tuy nhiên với các phần tử loại trừ, chúng ta không còn bị giới hạn ở các hộp hình chữ nhật. Bằng cách sử dụng shape-outside trên một float, chúng ta có thể xác định hình học cho phép nội dung của chúng ta bao bọc chặt chẽ hình dạng của nhân vật.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Thao tác này sẽ tạo một hình elip cho phép nội dung bao quanh hình tròn. Ngoài ra, vì chúng ta đang sử dụng đơn vị tương đối cho hình dạng, nên việc thay đổi kích thước của phần tử sẽ được phản ánh trong kích thước của hình dạng.

Hình dạng
Cùng với chữ cái đầu tiên, các tiêu chí loại trừ giúp bạn có thể gói văn bản trong các hình dạng bằng cách sử dụng shape-inside. Chúng tôi sử dụng tính năng này trên toàn trang web, đặc biệt là với chú thích hình ảnh lớn, tận dụng không gian âm của ảnh để tạo khung cho văn bản. Công cụ này cũng cho phép chúng ta gói văn bản dọc theo đường viền của các hình ảnh và đồ hoạ khác, mô phỏng các bố cục trước đây rất khó đạt được trên web.
Các hình dạng cũng có thể hoạt động với bố cục thích ứng bằng cách sử dụng các đơn vị tương đối để xác định hình dạng. Bằng cách này, chúng ta có thể tạo các hình dạng kéo giãn dựa trên vùng chứa hoặc khung nhìn, thậm chí sử dụng truy vấn nội dung đa phương tiện để thay đổi hoàn toàn hình dạng hoặc xoá hình dạng đó vì tất cả đều được xác định trong CSS. Dưới đây là ví dụ về một trong các hình đa giác được sử dụng trong trang web với các giá trị xác định các điểm:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

Văn bản cân bằng
Văn bản cân bằng là một tính năng xem xét toàn bộ khối văn bản trong một phần tử khi xuống dòng, thay vì xuống dòng từng từ. Điều này giúp tránh tình huống một hoặc hai từ nằm trên một dòng bằng cách ngắt dòng văn bản để đạt được các dòng có kích thước đồng đều trong một phần tử. Mức độ kiểm soát này cho phép chúng ta dễ dàng tạo các khối văn bản bắt mắt, đặc biệt là đối với các đoạn văn bản ngắn như trích dẫn hoặc phụ đề.
Đây chính là nơi chúng ta sử dụng Văn bản cân bằng trong bài viết. Vì tính năng này là một tiêu chuẩn mà Adobe đang đề xuất, nên chúng tôi đang sử dụng polyfill do Randy Edmunds tạo ra để đạt được kết quả tương tự. Bạn nên sử dụng tính năng này trong các trường hợp thích ứng. Khi thay đổi kích thước trình duyệt, bạn sẽ nhận thấy rằng khối này tiếp tục cân bằng văn bản để các dòng có chiều rộng gần như giống nhau. Việc sử dụng polyfill văn bản cân bằng rất dễ dàng vì đây là một trình bổ trợ jQuery, tất cả những gì chúng ta phải làm là áp dụng "balanceText()" cho một bộ chọn khi bố cục thay đổi và chúng ta sẽ có văn bản cân bằng rất đẹp, như sau:
$('.balance').balanceText();

Lọc hiệu ứng chuyển cảnh
Hiệu ứng chuyển đổi là một cách quan trọng để hướng sự chú ý của người dùng và thông báo trạng thái của các thành phần trong trang web. Với độ mờ và gần đây là Hiệu ứng biến đổi 3D, chúng tôi nhận thấy các hiệu ứng này được dùng để tạo hiệu ứng chuyển đổi và ảnh động mượt mà khi người dùng cuộn hoặc tương tác với các phần trên trang web của bạn. Giờ đây, chúng ta có các bộ lọc có thể dùng cho cùng một mục đích.
Trong "Forest Giant" (Người khổng lồ trong rừng), chúng tôi sử dụng bộ lọc để chuyển từ thang màu xám sang màu khi một số hình ảnh xuất hiện. Bạn có thể kết hợp các bộ lọc này với độ mờ hoặc các bộ lọc khác để tạo hiệu ứng hình ảnh và hiệu ứng chuyển đổi phức tạp. Chúng ta có thể tận dụng sức mạnh của bộ lọc tuỳ chỉnh để thêm các hiệu ứng ấn tượng hơn nữa.
Bộ lọc tuỳ chỉnh được viết bằng GLSL, cùng một ngôn ngữ đổ bóng với WebGL. Các lớp này cho phép bạn áp dụng chương trình đổ bóng này cho các phần tử DOM thông qua CSS, cho phép các hiệu ứng kết hợp phức tạp và độ méo 3D. Ở cuối trang web, khi nhấp vào "Khám phá cây Tổng thống", bạn sẽ thấy trang cuộn lên để hiển thị một phần khác bên dưới. Đây chỉ là một ví dụ về cách bộ lọc tuỳ chỉnh có thể cho phép chuyển đổi đa dạng giữa các nội dung. Bạn có thể tạo ảnh động bằng hiệu ứng chuyển đổi CSS. Tuy nhiên, nếu muốn sử dụng ảnh động hoặc tương tác mạnh mẽ hơn so với hiệu ứng chuyển đổi cho phép, bạn có thể truyền giá trị đến chương trình đổ bóng bằng cách đặt kiểu bằng javascript như minh hoạ bên dưới. Điều này có thể cho phép bạn kiểm soát chi tiết hơn đối với hiệu ứng làm dịu hoặc thậm chí cho phép các phương thức nhập của người dùng thao tác với chương trình đổ bóng.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
Bộ lọc của chúng ta đang quét nội dung dưới dạng hoạ tiết trên GPU để áp dụng hiệu ứng. Do đó, chúng ta cần nhớ xoá lớp phủ khi quá trình này hoàn tất, nếu không nội dung của chúng ta có thể bị mờ.
$("#map").css("webkitFilter", "none");
Bộ lọc tuỳ chỉnh CSS cho phép các hiệu ứng thú vị như cuộn trang trông giống như một trang đang được lật trong một cuốn sách thực. Các trình bổ trợ này cho phép nhà phát triển web lập trình các hiệu ứng phức tạp bằng một ngôn ngữ có tên là GLSL và áp dụng hiệu ứng đó cho nội dung web. Để biết thêm thông tin chi tiết về bộ lọc tuỳ chỉnh, tất cả các tham số đó và cách sử dụng các tham số đó, hãy xem hướng dẫn tuyệt vời này.

Kết cấu kết xuất trước trong WebGL
Điểm nhấn của bài viết này là hình ảnh hoàn chỉnh đầu tiên của "Cây Tổng thống", được cho là cây lớn thứ hai trên thế giới theo thể tích. Hình ảnh này được tạo bằng cách ghép hàng trăm bức ảnh về cây để tạo thành một bức ảnh toàn cảnh. Chúng tôi muốn mô phỏng quá trình này bằng cách chia hình ảnh thành một loạt ảnh nhỏ bay vào vị trí để tạo thành bức ảnh đầy đủ. Điều này đã đạt được bằng cách sử dụng WebGL, cụ thể là thư viện Three.js, đây là một trình bao bọc API cấp cao hơn xung quanh WebGL.

Việc kết xuất một lượng lớn hoạ tiết có thể nhanh chóng gây ra các vấn đề về hiệu suất mỗi khi một hoạ tiết mới cố gắng vẽ trên màn hình, chưa kể đến các yêu cầu mạng bổ sung. Để giảm thiểu điều này, chúng tôi đã tạo hoạ tiết lớn nhất có thể và bù cho từng ô. Kỹ thuật này thường được gọi là ánh xạ sprite và phổ biến trong quá trình phát triển trò chơi. Điều này dẫn đến việc tạo ra 3 hoạ tiết lớn cho toàn bộ cây. Để loại bỏ sự sụt giảm hiệu suất mỗi khi một trong các hoạ tiết xuất hiện lần đầu trên màn hình, chúng ta kết xuất các hình vuông 1px với từng hoạ tiết trước khi ảnh động bắt đầu, chuyển sự sụt giảm hiệu suất về đầu. Điều này cho phép chúng ta bay qua và tạo ảnh động cho toàn bộ chiều cao của cây một cách mượt mà, ngay cả trên máy tính bảng.
Để bù hoạ tiết, chúng ta sẽ thay đổi UV ánh xạ hoạ tiết đến hình học. Trong Three.js, mã sẽ có dạng như sau:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
Tại đây, bạn có thể thấy chúng ta đang sử dụng một biến cho độ dời x và y của hoạ tiết. Bạn có thể đạt được hiệu ứng tương tự bằng một chất liệu chương trình đổ bóng GLSL tuỳ chỉnh giúp bù trừ các toạ độ được vẽ trên hình học.
Tính năng thử nghiệm
Vì một số tính năng mà bản minh hoạ sử dụng vẫn đang trong giai đoạn thử nghiệm, nên bạn cần xem bài viết này trong Chrome Canary và bật tất cả cờ được đề cập cho Chrome Canary tại trang web này.
Sau khi cài đặt và định cấu hình Chrome Canary đúng cách, hãy xem bản minh hoạ. (Xin lưu ý rằng toàn bộ dự án này là nguồn mở và có trên GitHub.)
Kết luận
Chúng tôi cũng đang tìm hiểu cách sử dụng các tính năng này trong ngữ cảnh ứng dụng di động, tương tự như sách điện tử. Bạn có thể xem nguyên mẫu này đang trong quá trình phát triển và cách chúng tôi sử dụng các mô hình tương tác và cảm ứng khác nhau để giới thiệu các tính năng này trên máy tính bảng.
Bố cục trình duyệt web không ngừng phát triển, chúng tôi nhận thấy nhu cầu tiếp tục duy trì giá trị sản xuất và chất lượng bố cục mà chúng ta đã quen thuộc trong quá khứ với nội dung đọc cũ. Với các tính năng như Khu vực CSS, Loại trừ, văn bản cân bằng, bộ lọc tuỳ chỉnh và WebGL, nhà sáng tạo nội dung sẽ không còn phải chọn giữa phạm vi tiếp cận và chất lượng thiết kế nữa. "Forest Giant" là một dấu hiệu rõ ràng cho thấy web của tương lai sẽ cho phép cả hai.