Menggunakan alat dari CSS dan tata letak browser dapat memungkinkan visualisasi yang menakjubkan untuk konten web. Menggunakan fitur web seperti filter CSS, WebGL, video HTML5, SVG, kanvas, dan teknologi masa depan yang berkembang seperti Wilayah CSS, Bentuk CSS, dan Filter Kustom CSS menjanjikan lanskap materi iklan yang sangat diperluas. Adobe telah lama bekerja sama dengan kreator konten yang memiliki minat besar pada tata letak dan desain, sehingga telah aktif menerapkan pengetahuan ini ke web dengan kontribusi pada banyak standar web yang berkembang.
Dengan bantuan National Geographic, kami menggunakan konten dari fitur mereka yang berjudul 'Forest Giant' untuk membuat prototipe yang menunjukkan bagaimana fitur ini dapat memungkinkan tata letak web yang kaya dan teknik responsif. Artikel ini akan menunjukkan cara kami membuat beberapa karakteristik situs yang sangat menarik. Untuk ringkasan singkat, sebaiknya tonton video di bawah yang menampilkan Christian Cantrell yang menjelaskan berbagai fitur situs.
Detail Tata Letak
Tata letak yang bagus dan fitur di baliknya mungkin tidak terlihat jelas, jadi kami membuat "overlay editor" yang menyoroti fitur yang lebih penting. Untuk mengaktifkan tanda editor, klik panel di bagian bawah artikel.

Independen Tata Letak
Di web saat ini, tata letak sering kali ditentukan oleh konten kita dengan penampung yang diperbesar secara vertikal agar sesuai dengan teks. Saat membuat tata letak yang kompleks, perubahan pada teks atau konten lainnya dapat berdampak tidak diinginkan pada tata letak secara keseluruhan, sehingga Anda perlu mendesain ulang konten berdasarkan perubahan yang tidak terduga. Dengan region, kita dapat benar-benar memisahkan konten dari tata letak dengan menentukan elemen sebagai konten, lalu menentukan bagian tata letak yang kita inginkan untuk dilalui konten tersebut.
Dalam contoh 'Raksasa Hutan', kita memiliki cerita yang terdapat dalam satu elemen. Kemudian, di seluruh halaman, kita memiliki scaffolding tata letak, yang terdiri dari foto dan area teks. Dengan CSS, kita menentukan elemen yang ingin dilalui konten. Saat mencapai akhir elemen, salinan akan dilanjutkan ke elemen berikutnya dalam urutan DOM. Hal ini memungkinkan kita menjadi sangat kreatif dengan kolom, mengimbanginya, dan menyesuaikan tingginya berdasarkan desain, tanpa perlu khawatir apakah teks akan sesuai atau melebihi tinggi elemen. Hal ini juga memungkinkan kita memiliki elemen dalam tata letak, seperti gambar lebar penuh, sementara cerita terus mengalir melaluinya.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Dalam CSS di atas, kita membuat alur bernama "story". Konten alur bernama ini adalah elemen dengan ID "storyContent". Kemudian, ini akan mengalir melalui semua elemen dengan nama class "story". Region CSS adalah alat yang bagus untuk desain responsif yang memungkinkan fitur seperti multi-kolom dan kolom offset untuk tata letak yang kaya di layar besar sekaligus menyesuaikan dengan tata letak kolom tunggal di layar yang lebih kecil. Dengan region, Anda juga dapat menetapkan ukuran region dengan unit responsif seperti vw atau vh. Hal ini dapat digunakan untuk memastikan kolom tidak melebihi tinggi area pandang dalam tata letak Anda, tanpa perlu khawatir konten terpotong, karena konten akan mengalir secara alami ke elemen berikutnya dalam rantai region.
Huruf Besar Awal
Pengecualian CSS memungkinkan kita menggabungkan teks di sekitar atau dalam bentuk tidak beraturan. Hal ini dapat berguna untuk desain yang menarik seperti drop cap. Huruf besar awal adalah praktik desain umum, dengan huruf pertama cerita atau bab diperbesar, sehingga sisa teks dapat melingkari kontur karakter. Efek ini sangat mirip dengan cara konten inline menggabungkan float, tetapi dengan pengecualian, kita tidak lagi dibatasi pada kotak persegi panjang. Dengan menggunakan shape-outside pada float, kita dapat menentukan geometri yang memungkinkan konten kita dibungkus dengan erat di sekitar bentuk karakter.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Tindakan ini akan membuat elips yang memungkinkan konten melingkari bentuk lingkaran. Selain itu, karena kita menggunakan unit relatif untuk bentuk, mengubah ukuran elemen akan tercermin dalam ukuran bentuk.

Bentuk
Bersama dengan drop cap, pengecualian memberikan kemampuan untuk menggabungkan teks dalam bentuk menggunakan shape-inside. Kami menggunakan fitur ini di seluruh situs, terutama dengan teks gambar besar, yang memanfaatkan ruang negatif foto untuk membingkai teks. Hal ini juga memungkinkan kita menggabungkan teks di sepanjang kontur gambar dan grafik lain yang mengemulasi tata letak yang sebelumnya sangat sulit dicapai di web.
Bentuk juga dapat berfungsi dengan tata letak responsif menggunakan unit relatif untuk menentukan bentuk Anda. Dengan cara ini, kita dapat membuat bentuk yang meluas berdasarkan penampung atau area pandang, dan bahkan menggunakan kueri media untuk mengubah bentuk sepenuhnya atau menghapusnya karena semuanya ditentukan dalam CSS. Berikut adalah contoh salah satu bentuk poligon yang digunakan dalam situs dengan nilai yang menentukan titik:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

Teks Seimbang
Teks Seimbang adalah fitur yang melihat seluruh blok teks dalam elemen saat menggabungkan baris, bukan menggabungkan kata demi kata. Hal ini menghindari situasi saat kita memiliki satu atau dua kata dalam satu baris dengan memisahkan baris teks untuk mendapatkan baris berukuran merata dalam elemen. Tingkat kontrol ini memungkinkan kita membuat blok teks yang estetis dengan mudah, terutama untuk jangka pendek seperti kutipan atau subtitel.
Di sinilah kita menggunakan Teks Seimbang dalam artikel. Karena fitur ini adalah standar yang Diusulkan Adobe, kami menggunakan polyfill yang dibuat oleh Randy Edmunds untuk mencapai hasil yang sama. Fitur ini paling baik dilihat dalam kasus responsif. Saat mengubah ukuran browser, Anda akan melihat bahwa blok terus menyeimbangkan teks sehingga menghasilkan baris dengan lebar yang kira-kira sama. Menggunakan polyfill teks seimbang itu mudah, karena merupakan plugin jQuery, yang harus kita lakukan hanyalah menerapkan 'balanceText()' ke pemilih saat tata letak berubah dan kita akan mendapatkan teks yang seimbang dengan baik, yang terlihat seperti ini:
$('.balance').balanceText();

Memfilter Transisi
Transisi adalah cara penting untuk mengarahkan perhatian pengguna, dan menyampaikan status berbagai hal di situs Anda. Dengan opasitas -- dan baru-baru ini, Transformasi 3D -- kami telah melihatnya digunakan untuk membuat transisi dan animasi yang halus saat pengguna men-scroll atau berinteraksi dengan bagian situs Anda. Sekarang kita memiliki filter yang dapat digunakan untuk tujuan yang sama.
Di 'Forest Giant', kita menggunakan filter untuk memudar dari hitam putih menjadi warna saat beberapa gambar terlihat. Filter ini dapat digabungkan dengan opasitas, atau filter lainnya untuk membuat efek dan transisi gambar yang kompleks. Kita dapat menggunakan kecanggihan filter kustom untuk menambahkan efek yang lebih dramatis.
Filter kustom ditulis menggunakan GLSL, bahasa shading yang sama dengan WebGL. Dengannya, Anda dapat menerapkan shader ini ke elemen DOM melalui CSS, sehingga memungkinkan efek penggabungan yang kompleks dan distorsi 3D. Di bagian bawah situs, saat mengklik 'Jelajahi Hierarki Presiden', Anda akan melihat halaman ditarik ke atas untuk menampilkan bagian lain di bawahnya. Ini hanyalah salah satu contoh bagaimana filter kustom dapat memungkinkan transisi yang kaya antarkonten. Animasi dapat dilakukan menggunakan transisi CSS. Namun, jika ingin menggunakan animasi atau interaksi yang lebih andal daripada yang diizinkan transisi, Anda dapat meneruskan nilai ke shader dengan menetapkan gaya dengan JavaScript seperti yang dapat dilihat di bawah. Hal ini memungkinkan Anda memiliki kontrol yang lebih terperinci atas easing atau bahkan mengizinkan metode input pengguna untuk memanipulasi shader.
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)");
}
Filter kami merasterisasi konten sebagai tekstur di GPU untuk menerapkan efek. Oleh karena itu, kita harus memastikan untuk menghapusnya setelah selesai. Jika tidak, konten kita mungkin akan tampak buram.
$("#map").css("webkitFilter", "none");
Filter kustom CSS memungkinkan efek menarik seperti penggabungan halaman yang terlihat seperti halaman yang dibalik di buku sungguhan. API ini memungkinkan developer web memprogram efek kompleks dalam bahasa yang disebut GLSL dan menerapkannya ke konten web. Untuk informasi selengkapnya tentang detail filter kustom, semua parameter tersebut, dan cara menggunakannya, lihat tutorial yang bagus ini.

Pra-Rendering Tekstur di WebGL
Permata artikel ini adalah gambar lengkap pertama dari 'The President', yang diyakini sebagai pohon terbesar kedua di dunia berdasarkan volume. Gambar ini dibuat dengan menggabungkan ratusan foto pohon untuk membuat gambar lengkap. Kita ingin menyimulasikan proses ini dengan memecah gambar menjadi sekumpulan foto kecil yang terbang ke tempatnya untuk membuat gambar lengkap. Hal ini dicapai menggunakan WebGL, khususnya dengan library Three.js, yang merupakan wrapper API tingkat lebih tinggi di sekitar WebGL.

Merender tekstur dalam jumlah besar dapat dengan cepat menyebabkan masalah performa setiap kali tekstur baru mencoba menggambar di layar, belum lagi permintaan jaringan tambahan. Untuk menguranginya, kami membuat tekstur sebesar mungkin dan mengimbanginya untuk setiap kartu. Teknik ini sering disebut sebagai pemetaan sprite, dan umum digunakan dalam pengembangan game. Hal ini menghasilkan tiga tekstur besar untuk seluruh pohon. Untuk menghilangkan penurunan performa setiap kali salah satu tekstur pertama kali terlihat di layar, kita merender kotak 1 piksel dengan setiap tekstur sebelum animasi dimulai, sehingga memindahkan penurunan performa ke awal. Hal ini memungkinkan kita untuk melihat dan menganimasikan seluruh tinggi hierarki dengan lancar, bahkan di tablet.
Untuk mengimbangi tekstur, kita mengubah UV yang memetakan tekstur ke geometri. Di Three.js, tampilannya akan terlihat seperti ini:
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)
];
Di sini Anda dapat melihat bahwa kita menggunakan variabel untuk offset x dan y tekstur. Efek yang sama dapat dicapai dengan material shader GLSL kustom yang mengimbangi koordinat yang digambar pada geometri.
Fitur Eksperimental
Karena beberapa fitur yang digunakan demo masih bersifat eksperimental, artikel ini harus dilihat di Chrome Canary dan mengaktifkan semua flag yang disebutkan untuk Chrome Canary di situs ini.
Setelah menginstal Chrome Canary dan mengonfigurasinya dengan benar, lihat demo. (Perhatikan bahwa seluruh project bersifat open source dan tersedia di GitHub.)
Kesimpulan
Kami juga telah mempelajari cara fitur ini dapat digunakan dalam konteks aplikasi seluler, lebih mirip dengan e-book. Anda dapat melihat prototipe ini dalam proses dan cara kami memanfaatkan berbagai paradigma interaksi dan sentuh untuk menampilkan fitur ini di tablet.
Dengan tata letak browser web yang terus berkembang, kami melihat keinginan untuk melanjutkan nilai produksi dan kualitas tata letak yang telah kita biasakan sebelumnya dengan konten bacaan lama. Dengan fitur seperti Wilayah CSS, Pengecualian, teks seimbang, filter kustom, dan WebGL, kreator konten tidak perlu lagi memilih antara jangkauan dan kualitas desain. 'Forest Giant' adalah tanda yang jelas bahwa web masa depan akan memungkinkan keduanya.