Việc sử dụng các công cụ của CSS và bố cục trình duyệt có thể giúp nội dung trên web trở nên trực quan hơn. 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ệ đang phát triển trong tương lai như Khu vực CSS, Hình dạng CSS và Bộ lọc tùy chỉnh CSS hứa hẹn một bối cảnh sáng tạo vô cùng lớn mạnh. Adobe đã có một lịch sử lâu dài trong việc hợp tác với những nhà sáng tạo nội dung đam mê bố cục và thiết kế, và vì vậy đã tích cực áp dụng kiến thức này vào web bằng cách đóng góp vào nhiều tiêu chuẩn web phát triển.
Với sự trợ giúp của Cơ quan Địa lý Quốc gia, chúng tôi đã sử dụng nội dung trong tính năng có tiêu đề "Forest Giant" (Người khổng lồ rừng) để xây dựng một nguyên mẫu thể hiện cách những tính năng này có thể kích hoạt bố cục web phong phú và kỹ thuật phản hồi nhanh. Bài viết này sẽ chỉ cho 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. Để có cái nhìn tổng quan ngắn gọn, bạn nên xem video dưới đây trong đó Christian Cantrell hướng dẫn bạn về các tính năng của trang web.
Những chi tiết nhỏ của bố cục
Những gì tạo nên bố cục tuyệt vời và các đặc điểm đằng sau bố cục đó có thể rất tinh tế, vì vậy chúng tôi đã tạo "lớp phủ của trình chỉnh sửa" để làm nổi bật những tính năng đáng chú ý hơn. Để bật 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
Trên web ngày nay, bố cục thường được quyết định bởi nội dung, trong đó các vùng chứa 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 bản sao hoặc nội dung khác có thể có tác động không mong muốn đến bố cục tổng thể, khiến người dùng cần phải thiết kế lại nội dung khi có những thay đổi không mong muốn. Theo khu vực, chúng ta thực sự có thể tách riêng 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 đó truyền qua.
Trong ví dụ về ‘Forest Giant’, câu chuyện được chứa trong một yếu tố duy nhất. Sau đó, trên toàn bộ trang, chúng ta sắp xếp bố cục, bao gồm ảnh và vùng 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 truyền qua. Khi bản sao đến cuối một phần tử, phần tử đó sẽ tiếp tục đến phần tử tiếp theo trong thứ tự DOM. Điều này cho phép chúng ta thực sự sáng tạo với các cột, bù trừ và điều chỉnh chiều cao của các cột dựa trên thiết kế mà không cần quan tâm đến việc liệu văn bản sẽ vừa với hay vượt quá chiều cao của phần tử. Nhờ đó, chúng ta cũng có thể sắp xếp các thành phần trong bố cục, chẳng hạn như hình ảnh có chiều rộng đầy đủ, để câu chuyện tiếp tục diễn ra trong bố cục đó.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Trong CSS ở trên, chúng ta sẽ tạo một luồng có tên là "story". Nội dung của flow có tên này là phần tử có mã "storyContent". Sau đó, luồng này chuyển qua tất cả các phần tử có tên lớp "story". Khu vực CSS là một công cụ tuyệt vời để thiết kế thích ứng, cho phép các tính năng như nhiều cột và cột bù trừ để có bố cục phong phú trên màn hình lớn trong khi điều chỉnh thành bố cục một cột trên màn hình nhỏ hơn. Đối với các khu vực, bạn cũng có thể đặt quy mô cho khu vực bằng các đơn vị thích ứng như vw hoặc vh. Bạn có thể dùng tính năng này để đảm bảo các cột không vượt quá chiều cao khung nhìn trong bố cục của bạn mà không lo nội dung bị cắt bớt, vì nội dung sẽ tự động chuyển vào thành phần tiếp theo trong chuỗi khu vực.
Mũi sản phẩm
Loại trừ CSS cho phép chúng tôi bao bọc văn bản xung quanh hoặc trong các hình dạng không đều. Điều này có thể hữu ích cho những điểm nhấn trong thiết kế như mũ thả. Mũi tên xuống là một phương pháp thiết kế phổ biến, trong đó chữ cái đầu tiên của câu chuyện hoặc chương sẽ được phóng to để phần còn lại của văn bản bao quanh đường viền của nhân vật. Hiệu ứng này rất giống với cách nội dung cùng dòng bao bọc xung quanh dấu phẩy động. Tuy nhiên, với các trường hợp loại trừ, chúng tôi không còn bị hạn chế ở hộp hình chữ nhật nữa. Bằng cách sử dụng hình dạng bên ngoài trên một số thực có độ chính xác đơn, chúng ta có thể xác định hình dạng cho phép nội dung 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 bọc xung 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, 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ữ hoa thả, tính năng loại trừ cho phép gói văn bản bên trong hình dạng bằng cách sử dụng hình dạng bên trong. Chúng tôi sử dụng tính năng này trên toàn trang web, đặc biệt 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. API này cũng cho phép chúng ta bao bọc văn bản dọc theo đường viền của các hình ảnh khác cũng như các bố cục mô phỏng đồ hoạ mà trước đây rất khó đạt được trên web.
Hình dạng cũng có thể dùng được trên 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 của bạn. 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 và thậm chí sử dụng các truy vấn phương tiện để thay đổi hoàn toàn hoặc xóa hình dạng do tất cả được xác định trong CSS. Dưới đây là ví dụ về một trong các hình đa giác đang đượ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 thành phần khi xuống dòng thay vì xuống dòng từng từ. Điều này giúp tránh trường hợp chúng ta có một hoặc hai từ trên một dòng bằng cách ngắt các 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 tôi dễ dàng tạo các khối văn bản đẹp mắt, đặc biệt là đối với những đoạn văn ngắn như câu trích dẫn hoặc phụ đề.
Đây chính xác là nơi chúng tôi 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 sẽ sử dụng một đoạn mã polyfill do Randy Edmunds tạo ra để đạt được các kết quả tương tự. Tính năng này hoạt động hiệu quả nhất trong các trường hợp thích ứng. Khi đổi kích thước trình duyệt, bạn sẽ nhận thấy khối tiếp tục cân bằng văn bản để tạo ra các dòng có cùng chiều rộng. Sử dụng polyfill văn bản được 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 bộ chọn khi bố cục thay đổi và chúng ta sẽ có được văn bản được cân bằng độc đáo, như sau:
$('.balance').balanceText();
Chuyển đổi bộ lọc
Chuyển đổi là một cách quan trọng để thu hút sự chú ý của người dùng và truyền đạt trạng thái của mọi thứ trong trang web của bạn. Với độ mờ – và gần đây hơn là Biến đổi 3D – chúng ta đã thấy chúng được dùng để tạo các hiệu ứng chuyển đổi và ảnh động đẹp mắt 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. Chúng ta hiện có các bộ lọc có thể sử dụng cho cùng một mục đích.
Trong "Forest Giant", chúng tôi sử dụng các bộ lọc để chuyển dầ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 và hiệu ứng chuyển đổi hình ảnh phức tạp. Chúng ta có thể sử dụng sức mạnh của các bộ lọc tuỳ chỉnh để thêm nhiều 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ữ tô bóng như WebGL. Chúng cho phép bạn áp dụng các chương trình đổ bóng này vào các phần tử DOM thông qua CSS, tạo ra các hiệu ứng pha trộn phức tạp và hiện tượng méo hình 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 mục khác ở bên dưới. Đây chỉ là một ví dụ về cách các bộ lọc tuỳ chỉnh có thể cho phép chuyển đổi đa dạng thức giữa các nội dung. Bạn có thể tạo ảnh động bằng cách sử dụng hiệu ứng chuyển đổi CSS. Tuy nhiên, nếu muốn sử dụng hoạt ảnh hoặc tương tác mạnh mẽ hơn so với hiệu ứng chuyển tiếp cho phép, bạn có thể chuyển các giá trị đến chương trình đổ bóng bằng cách đặt kiểu bằng javascript như bạn có thể thấy bên dưới. Điều này cho phép bạn kiểm soát chi tiết hơn việc gia tốc hoặc thậm chí cho phép các phương thức nhập của người dùng điều khiển 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 tạo điểm ảnh cho nội dung dưới dạng hoạ tiết trên GPU để áp dụng hiệu ứng. Do đó, chúng tôi cần nhớ xoá nội dung đó sau khi hoàn thành, nếu không nội dung 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ư tự động xuống dòng trông giống như một trang đang được lật trong một cuốn sách thực. Chúng 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ữ gọi là GLSL rồi áp dụng ngôn ngữ đó vào 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 thông số đó và cách sử dụng chúng, hãy xem hướng dẫn hay này.
Trước khi kết xuất kết cấu trong WebGL
Điểm quý giá của bài viết này là hình ảnh hoàn chỉnh đầu tiên về "Tổng thống", được cho là cây lớn thứ hai trên thế giới tính theo số lượng. 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 hình ảnh đầy đủ. Chúng tôi muốn mô phỏng quá trình này bằng cách chia nhỏ hình ảnh thành một nhóm các bức ảnh nhỏ xuất hiện tại vị trí để tạo ra bức ảnh đầy đủ. Điều này có được bằng cách sử dụng WebGL, cụ thể là với thư viện Three.js, một trình bao bọc API cấp cao hơn xung quanh WebGL.
Việc kết xuất một số lượng lớn hoạ tiết có thể nhanh chóng gây ra 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 bổ sung về mạng. Để giảm tình trạng này, chúng ta đã làm cho hoạ tiết càng lớn càng tốt và bù trừ chúng cho mỗi thẻ thông tin. 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. Kết quả là tạo ra 3 hoạ tiết lớn cho toàn bộ cây. Để loại bỏ hiệu suất mỗi khi một trong các hoạ tiết xuất hiện đầu tiên trên màn hình, chúng ta hiển thị các hình vuông 1px với từng hoạ tiết trước khi ảnh động bắt đầu, di chuyển lượt truy cập hiệu suất lên đầu. Điều này cho phép chúng ta bay qua và tạo hiệu ứng động cho toàn bộ chiều cao của cây, ngay cả trên máy tính bảng.
Để bù đắp cho hoạ tiết, chúng ta đang thay đổi tia UV ánh xạ hoạ tiết đến hình học. Trong Three.js, giao diện 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)
];
Ở đây, bạn có thể thấy chúng ta đang sử dụng một biến cho độ lệch x và y của hoạ tiết. Bạn có thể đạt được hiệu quả tương tự với vật liệu chương trình đổ bóng GLSL tuỳ chỉnh bù trừ các toạ độ đã 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ờ được đề cập cho Chrome Canary tại trang web này.
Sau khi cài đặt Chrome Canary và định cấu hình đúng cách, hãy xem bản minh hoạ. (Xin lưu ý rằng toàn bộ dự án 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 những tính năng này có thể được sử dụng trong ngữ cảnh ứng dụng di động, cũng như trong sách điện tử. Bạn có thể xem nguyên mẫu này đang được triển khai và cách chúng tôi sử dụng các mô hình tương tác và chạm khác nhau để giới thiệu các tính năng này trên máy tính bảng.
Với bố cục trình duyệt web liên tục phát triển, chúng tôi thấy rằng mong muốn tiếp tục giá trị sản xuất và chất lượng bố cục mà chúng ta đã quen thuộc trong quá khứ bằng 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 lựa chọn giữa phạm vi tiếp cận và chất lượng thiết kế nữa. "Forest Giant" là dấu hiệu rõ ràng cho thấy môi trường web trong tương lai sẽ cho phép cả hai.