Menggunakan alat dari CSS dan tata letak browser dapat memungkinkan visualisasi yang memukau untuk konten web. Menggunakan fitur web seperti filter CSS, WebGL, video HTML5, SVG, kanvas, dan teknologi masa depan yang terus berkembang seperti Wilayah CSS, Bentuk CSS, dan Filter Kustom CSS menjanjikan lanskap materi iklan yang sangat diperluas. Adobe telah memiliki sejarah panjang bekerja dengan kreator konten yang sangat antusias dengan tata letak dan desain, dan karenanya telah aktif menerapkan pengetahuan ini ke web melalui kontribusi pada banyak standar web yang terus berkembang.
Dengan bantuan National Geographic, kami menggunakan konten dari fitur mereka yang berjudul ‘Forest Giant’ untuk membuat prototipe yang menunjukkan bagaimana fitur-fitur ini dapat mengaktifkan tata letak web yang kaya dan teknik responsif. Artikel ini akan menunjukkan cara kami membuat beberapa karakteristik situs yang sangat menarik. Untuk ringkasan singkat, ada baiknya menonton video di bawah yang menampilkan Christian Cantrell yang memberikan berbagai fitur situs.
Detail Tata Letak
Apa yang dimaksud dengan tata letak yang bagus dan fitur di baliknya bisa saja halus, jadi kami membuat "overlay editor" yang menyoroti fitur yang lebih penting. Untuk mengaktifkan tanda editor, klik bilah di bagian bawah artikel.
Tata Letak Independen
Di web saat ini, tata letak sering ditentukan oleh konten kami dengan penampung yang diperbesar secara vertikal agar pas dengan teks. Saat membuat tata letak yang kompleks, perubahan pada salinan atau konten lainnya dapat berdampak tidak diinginkan pada keseluruhan tata letak, menyebabkan seseorang perlu mendesain ulang konten berdasarkan perubahan yang tidak terduga. Dengan region, kita benar-benar dapat memisahkan konten dari tata letak dengan menentukan elemen sebagai konten, lalu menentukan bagian tata letak yang kita inginkan untuk mengalirkan konten tersebut.
Dalam contoh 'Hutan Raksasa', cerita kita terdapat dalam satu elemen. Kemudian, di sepanjang halaman, kita memiliki scaffolding tata letak, yang terdiri dari area foto dan teks. Dengan CSS, kita menentukan elemen yang kita inginkan untuk mengalirkan konten. Saat salinan mencapai akhir elemen, salinan akan melanjutkan ke elemen berikutnya dalam urutan DOM. Hal ini memungkinkan kita untuk benar-benar kreatif dengan kolom kita, mengimbanginya dan menyesuaikan tingginya berdasarkan desain, tanpa khawatir apakah teks akan sesuai atau melebihi tinggi elemen. Ini juga memungkinkan kita untuk 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 yang disebut "story". Konten alur bernama ini adalah elemen dengan ID "storyContent". Lalu, urutan ini mengalir ke semua elemen dengan nama class "story". Region CSS adalah alat hebat untuk desain responsif yang memungkinkan fitur seperti multi-kolom dan kolom offset untuk tata letak yang kaya di perangkat layar besar sambil menyesuaikan tata letak kolom tunggal pada layar yang lebih kecil. Dengan region, Anda juga dapat menyetel ukuran region dengan unit responsif seperti vw atau vh. Ini dapat digunakan untuk memastikan kolom tidak melebihi tinggi area pandang di tata letak, tanpa khawatir konten akan terpotong, karena secara alami akan mengalir ke elemen berikutnya dalam rantai region.
Penutup Kepala
Pengecualian CSS memungkinkan kita membungkus teks di sekitar atau dalam bentuk yang tidak teratur. Ini bisa berguna untuk perkembangan desain seperti {i>drop cap<i}. {i>Drop caps<i} adalah praktik desain umum, dengan huruf pertama dari sebuah cerita atau bab diperbesar, memungkinkan sisa teks membungkus kontur karakter. Efek ini sangat mirip dengan bagaimana konten inline melipat di sekitar float, tetapi dengan pengecualian, kita tidak lagi terbatas pada kotak persegi panjang. Dengan menggunakan bentuk di luar pada float, kita dapat menentukan geometri yang memungkinkan konten membungkus secara rapat di sekitar bentuk karakter kita.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Tindakan ini akan membuat elips yang memungkinkan konten membungkus di sekitar bentuk lingkaran. Juga, karena kita menggunakan satuan relatif untuk bentuk, mengubah ukuran elemen akan tercermin di ukuran bentuk.
Bentuk
Bersama dengan drop cap, pengecualian menghadirkan kemampuan untuk mengemas teks dalam bentuk menggunakan bentuk di dalam. Kami menggunakan fitur ini di seluruh situs, terutama dengan teks gambar yang besar, yang memanfaatkan ruang negatif di foto untuk membingkai teks. Hal ini juga memungkinkan kita untuk 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 membentang berdasarkan container atau area pandang, dan bahkan menggunakan kueri media untuk sepenuhnya mengubah bentuk atau menghapusnya karena semuanya ditentukan dalam CSS. Di bawah ini adalah contoh salah satu bentuk poligon yang digunakan dalam situs dengan nilai yang mendefinisikan titik-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 membungkus baris, alih-alih menggabungkan kata demi kata. Fungsi ini menghindari situasi di mana kita memiliki satu atau dua kata dalam satu baris dengan memisahkan baris teks untuk mencapai baris berukuran merata dalam elemen. Tingkat kontrol ini memungkinkan kita dengan mudah membuat blok teks yang menarik secara estetis, terutama untuk penayangan pendek seperti kutipan pull atau subjudul.
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 untuk menghasilkan baris dengan lebar yang kira-kira sama. Menggunakan polyfill teks seimbang itu mudah, karena ini adalah plugin jQuery, yang harus kita lakukan adalah menerapkan 'balanceText()' ke pemilih ketika tata letak berubah dan kita akan mendapatkan teks yang seimbang dengan baik, yang terlihat seperti ini:
$('.balance').balanceText();
Transisi Filter
Transisi adalah cara yang penting untuk mengarahkan perhatian pengguna, dan menyampaikan keadaan dalam situs Anda. Dengan opasitas -- dan yang lebih baru, Transformasi 3D -- kami melihat transformasi tersebut digunakan untuk membuat transisi dan animasi yang halus saat pengguna menggulir atau berinteraksi dengan bagian situs Anda. Sekarang kita memiliki filter yang dapat digunakan untuk tujuan yang sama.
Di ‘Forest Giant’, kami menggunakan filter untuk memudar dari hitam putih menjadi berwarna saat beberapa gambar muncul di tampilan. Filter ini dapat dikombinasikan dengan opasitas, atau filter lain untuk membuat efek dan transisi pencitraan 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. Shader ini memungkinkan Anda menerapkan shader ini ke elemen DOM melalui CSS, sehingga memungkinkan efek penggabungan yang kompleks dan distorsi 3D. Di bagian bawah situs, saat mengklik 'Explore the President Tree', Anda akan melihat halaman menggulung untuk memperlihatkan bagian lain di bawahnya. Ini hanyalah satu contoh yang menunjukkan bagaimana filter kustom dapat memungkinkan transisi yang kaya di antara konten. Animasi dapat dilakukan menggunakan transisi CSS. Namun, jika Anda ingin menggunakan animasi atau interaksi yang lebih tangguh daripada yang dimungkinkan oleh transisi, Anda dapat meneruskan nilai ke shader dengan menyetel gaya menggunakan JavaScript seperti yang dapat dilihat di bawah ini. 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 kita melakukan rasterisasi konten sebagai tekstur pada GPU untuk menerapkan efek. Oleh karena itu, kami perlu memastikan untuk menghapusnya setelah proses selesai, atau konten kami mungkin akan tampak buram.
$("#map").css("webkitFilter", "none");
Filter kustom CSS memungkinkan efek menarik seperti pengemasan halaman yang terlihat seperti halaman dibalik buku sungguhan. Mereka memungkinkan developer web untuk memprogram efek kompleks dalam bahasa yang disebut GLSL dan menerapkannya ke konten web. Untuk mendapatkan informasi selengkapnya tentang detail filter kustom, semua parameter tersebut, dan cara menggunakannya, lihat tutorial yang sangat bagus ini.
Tekstur Pra-Render di WebGL
Permata dalam artikel ini adalah gambar lengkap pertama 'Presiden', yang diyakini sebagai pohon terbesar kedua di dunia berdasarkan volume. Gambar ini dibuat dengan merangkai foto ratusan foto pohon untuk membuat gambar penuh. Kami ingin menyimulasikan proses ini dengan memecah gambar menjadi sekumpulan foto kecil yang melayang di tempat untuk menciptakan gambar penuh. Hal ini dilakukan menggunakan WebGL, khususnya dengan library Tiga.js, yang merupakan wrapper API dengan level yang lebih tinggi di sekitar WebGL.
Merender sejumlah besar tekstur 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 melakukan offset untuk setiap ubin. Teknik ini sering disebut sebagai pemetaan sprite, dan umum dilakukan dalam pengembangan game. Proses ini menghasilkan tiga tekstur besar untuk seluruh pohon. Untuk menghilangkan hit performa setiap kali salah satu tekstur pertama kali terlihat di layar, kami merender persegi 1px dengan masing-masing tekstur sebelum animasi dimulai, memindahkan hit performa ke awal. Hal ini memungkinkan kami terbang dan menganimasikan seluruh tinggi pohon dengan lancar, bahkan di tablet.
Untuk mengimbangi tekstur, kita mengubah UV yang memetakan tekstur ke geometri. Di Three.js, tampilannya 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 tanda yang disebutkan untuk Chrome Canary di situs ini.
Setelah Chrome Canary diinstal dan dikonfigurasi dengan benar, lihat demonya. (Perlu diperhatikan bahwa seluruh project bersifat open source dan tersedia di GitHub.)
Kesimpulan
Kita juga telah menjajaki bagaimana fitur-fitur ini dapat digunakan dalam konteks aplikasi seluler, lebih seperti sebuah e-book. Anda dapat melihat prototipe ini sedang berlangsung dan bagaimana kami memanfaatkan berbagai interaksi dan paradigma 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 sebelumnya kami gunakan 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. ‘Hutan Raksasa’ adalah pertanda yang jelas bahwa web masa depan akan mengizinkan keduanya.