CSS ve tarayıcı düzenindeki araçları kullanarak web içeriği için çarpıcı görselleştirmeler oluşturabilirsiniz. CSS filtreleri, WebGL, HTML5 video, SVG, tuval gibi web özelliklerini ve CSS bölgeleri, CSS şekilleri ve CSS özel filtreleri gibi gelişen gelecek teknolojilerini kullanmak, çok daha geniş bir reklam öğesi yelpazesi sunar. Adobe, düzen ve tasarım konusunda tutkulu içerik üreticilerle uzun süredir birlikte çalışıyor. Bu nedenle, gelişen birçok web standardına katkıda bulunarak bu bilgileri web'e uygulama konusunda aktif bir rol oynuyor.
National Geographic'in yardımıyla, bu özelliklerin zengin web düzenini ve duyarlı teknikleri nasıl etkinleştirebileceğini gösteren bir prototip oluşturmak için "Orman Devleri" adlı makalelerindeki içerikleri kullandık. Bu makalede, sitenin özellikle ilgi çekici özelliklerini nasıl oluşturduğumuz gösterilmektedir. Özet bir genel bakış için Christian Cantrell'in sitenin çeşitli özelliklerini adım adım açıkladığı aşağıdaki videoyu izlemenizi öneririz.
Düzenle ilgili ayrıntılar
İyi bir düzenin neleri içerdiği ve bu düzenin arkasındaki özellikler bazen anlaşılmayabilir. Bu nedenle, dikkate değer özellikleri öne çıkaran bir "düzenleyici yer paylaşımı" oluşturduk. Düzenleyicinin işaretlerini etkinleştirmek için makalenin alt kısmındaki çubuğu tıklayın.

Düzen Bağımsız
Günümüzde web'de düzen genellikle içeriğimize göre belirlenir ve metne sığması için kapsayıcılar dikey olarak büyütülür. Karmaşık düzenler oluştururken kopyada veya diğer içeriklerde yapılan değişiklikler genel düzen üzerinde istenmeyen bir etki yaratabilir. Bu da içeriğin beklenmedik değişikliklere göre yeniden tasarlanmasına neden olabilir. Bölgeler sayesinde, bir öğeyi içeriğimiz olarak tanımlayıp ardından bu içeriğin akmasını istediğimiz düzen bölümlerini belirterek içeriğimizi düzenden gerçekten ayırabiliriz.
"Orman Dev" örneğinde, hikaye tek bir öğede yer alıyor. Ardından, sayfanın tamamında fotoğraf ve metin alanlarından oluşan bir düzen iskeletimiz var. CSS ile, içeriğin akmasını istediğimiz öğeleri tanımlarız. Kopyalama işlemi bir öğenin sonuna ulaştığında DOM sırasına göre bir sonraki öğeye devam eder. Bu sayede sütunlarımızla gerçekten yaratıcı olabilir, metnin öğenin yüksekliğine sığıp sığmayacağı konusunda endişelenmeden sütunları kaydırabilir ve yüksekliklerini tasarıma göre uyarlayabiliriz. Ayrıca, hikaye devam ederken tam genişlikli resimler gibi öğeleri düzenimize eklememize olanak tanır.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Yukarıdaki CSS'de "hikaye" adlı bir adlandırılmış akış oluşturuyoruz. Bu adlandırılmış akışın içeriği, "storyContent" kimliğine sahip öğedir. Ardından bu, "hikaye" sınıf adına sahip tüm öğelerde uygulanır. CSS bölgeleri, büyük ekranlarda zengin bir düzen için çok sütunlu ve ofset sütunlar gibi özellikler sunarken küçük ekranlarda tek sütunlu düzene ayarlanan duyarlı tasarım için mükemmel bir araçtır. Bölgeler ile bölgenizin boyutunu vw veya vh gibi duyarlı birimlerle de ayarlayabilirsiniz. Bu, sütunların düzeninizdeki görüntü alanı yüksekliğini aşmamasını sağlamak için kullanılabilir. İçerik, bölge zincirindeki bir sonraki öğeye doğal olarak akacağı için içerik kesilme konusunda endişelenmenize gerek yoktur.
Baş harfler
CSS hariç tutmaları, metni düzensiz şekillerin etrafına veya içine sarmamıza olanak tanır. Bu, büyük harflerle başlayan kelimeler gibi tasarım süslemelerinde yararlı olabilir. Baş harfler, bir hikayenin veya bölümün ilk harfinin büyütüldüğü, metnin geri kalanının karakterin dış çizgisine sarıldığı yaygın bir tasarım uygulamasıdır. Bu efekt, satır içi içeriğin kayan değerler etrafında sarmalanmasına çok benzer. Ancak hariç tutmalarla artık dikdörtgen kutularla sınırlı değiliz. Bir kayan öğede shape-outside özelliğini kullanarak içeriğimizin karakterimizin şekline sıkıca sarılmasına olanak tanıyan geometriyi tanımlayabiliriz.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Bu işlem, içeriğin dairesel şeklin etrafına sarılmasına olanak tanıyan bir elips oluşturur. Ayrıca, şekil için göreli birimler kullandığımızdan öğenin boyutunu değiştirmek, şeklin boyutuna da yansır.

Şekiller
Hariç tutmalar, büyük harflerle başlayan ilk sözcüklerin yanı sıra shape-inside özelliğini kullanarak metni şekiller içinde sarmalama olanağı sunar. Bu özelliği site genelinde, özellikle büyük resim başlıklarında kullanırız. Metni çerçevelemek için fotoğrafların negatif alanından yararlanırız. Ayrıca, metni diğer resimlerin ve grafiklerin dış çizgisine göre sarmalayarak daha önce web'de uygulanması çok zor olan düzenleri taklit etmemize olanak tanır.
Şekiller, şeklinizi tanımlamak için göreli birimler kullanarak duyarlı düzenlerle de çalışabilir. Bu sayede kapsayıcıya veya görüntü alanına göre genişleyen şekiller oluşturabilir ve hatta tümü CSS'de tanımlandığı için şekli tamamen değiştirmek veya kaldırmak için medya sorguları kullanabiliriz. Aşağıda, sitede kullanılan poligon şekillerinden birinin, noktaları tanımlayan değerlerle gösterildiği bir örnek verilmiştir:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

Dengeli Metin
Dengeli Metin, satırları kelime kelime sarmalamak yerine bir öğedeki metin bloğunun tamamını sarmalayan bir özelliktir. Bir öğe içinde eşit boyutta satırlar elde etmek için metin satırlarını bölerek tek satırda bir veya iki kelimenin bulunduğu durumları önler. Bu düzeyde kontrol, özellikle alıntılar veya altyazılar gibi kısa metinler için estetik açıdan hoş metin blokları oluşturmamıza olanak tanır.
Bu, makalede dengeli metni tam olarak kullandığımız yerdir. Bu özellik Adobe tarafından önerilen bir standart olduğundan aynı sonuçlara ulaşmak için Randy Edmunds tarafından oluşturulan bir polyfill kullanıyoruz. Bu özellikten en iyi şekilde yararlanmak için duyarlı destek kayıtlarını kullanın. Tarayıcıyı yeniden boyutlandırdığınızda, blokta metnin yaklaşık olarak aynı genişlikte satırlar oluşturacak şekilde dengelenmeye devam ettiğini görürsünüz. Dengeli metin polyfill'ini kullanmak kolaydır çünkü bir jQuery eklentisidir. Tek yapmamız gereken, düzen değiştiğinde bir seçiciye "balanceText()" uygulamaktır. Böylece, aşağıdaki gibi güzelce dengelenmiş bir metin elde ederiz:
$('.balance').balanceText();

Geçişleri filtreleme
Geçişler, kullanıcının dikkatini yönlendirmenin ve sitenizdeki durumların durumunu bildirmenin önemli bir yoludur. Kullanıcılar sitenizi kaydırırken veya sitenizin belirli bölümleriyle etkileşime geçerken şeffaflık ve daha yakın zamanda 3D Dönüşümler'in zarif geçişler ve animasyonlar oluşturmak için kullanıldığını gördük. Artık aynı amaç için kullanılabilecek filtrelerimiz var.
"Orman Devri"nde, bazı resimler görüntüye girerken gri tonlamadan renge geçiş yapmak için filtreler kullanıyoruz. Bu filtreler, karmaşık görüntüleme efektleri ve geçişler oluşturmak için opaklıkla veya diğer filtrelerle birleştirilebilir. Daha da etkileyici efektler eklemek için özel filtrelerin gücünden yararlanabiliriz.
Özel filtreler, WebGL ile aynı gölgelendirme dili olan GLSL kullanılarak yazılır. Bu gölgelendiricileri CSS aracılığıyla DOM öğelerine uygulamanıza olanak tanır. Böylece karmaşık karışım efektleri ve 3D bozulma elde edebilirsiniz. Sitenin alt kısmında "Cumhurbaşkanı Ağacı'nı keşfet"i tıkladığınızda sayfanın kıvrılarak altında başka bir bölüm açtığını görürsünüz. Bu, özel filtrelerin içerikler arasında zengin geçişlere nasıl olanak tanıyabileceğini gösteren örneklerden yalnızca biridir. Animasyon, CSS geçişleri kullanılarak elde edilebilir. Ancak geçişlerin izin verdiğinden daha güçlü animasyonlar veya etkileşimler kullanmak istiyorsanız stili aşağıda gösterildiği gibi JavaScript ile ayarlayarak gölgelendiricinize değer iletebilirsiniz. Bu sayede, yumuşatma üzerinde daha ayrıntılı kontrol sahibi olabilir veya hatta kullanıcı girişi yöntemlerinin gölgelendiriciyi değiştirmesine izin verebilirsiniz.
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)");
}
Filtremiz, efekti uygulamak için içeriği GPU'da bir doku olarak rasterleştiriyor. Bu nedenle, işlem tamamlandığında bu filtreyi kaldırmamız gerekir. Aksi takdirde, içeriğimiz bulanık görünebilir.
$("#map").css("webkitFilter", "none");
CSS özel filtreleri, gerçek bir kitapta sayfa çevriliyormuş gibi görünen sayfa sarmalama gibi ilginç efektler sağlar. Web geliştiricilerinin GLSL adlı bir dilde karmaşık efektler programlamasını ve bunları web içeriğine uygulamasını sağlar. Özel filtrelerin ayrıntıları, tüm bu parametreler ve bunların nasıl kullanılacağı hakkında daha fazla bilgi için bu mükemmel eğitime göz atın.

WebGL'de Dokuları Önceden Oluşturma
Bu makalenin en önemli kısmı, hacim olarak dünyadaki ikinci en büyük ağaç olduğu düşünülen "Başkan"ın ilk tam görüntüsüydü. Bu resim, ağacın yüzlerce fotoğrafının birleştirilmesiyle oluşturulmuştur. Bu süreci simüle etmek için resmi, tam resmi oluşturmak üzere yerlerine uçan bir grup küçük fotoğrafa böldük. Bu, WebGL kullanılarak, özellikle de WebGL'nin etrafında daha yüksek düzey bir API sarmalayıcısı olan Three.js kitaplığı ile başarıldı.

Çok sayıda doku oluşturmak, yeni bir doku ekranda çizilmeye her çalışıldığında ek ağ isteklerinden bahsetmeden hızlı bir şekilde performans sorunlarına neden olabilir. Bunu azaltmak için dokularımızı olabildiğince büyük yaptık ve her karo için bunları kaydırdık. Bu teknik genellikle sprite eşleme olarak adlandırılır ve oyun geliştirmede yaygın olarak kullanılır. Bu işlem, ağacın tamamı için üç büyük dokuya neden oldu. Dokulardan biri ekranda ilk kez göründüğünde performanstaki düşüşten kurtulmak için, animasyon başlamadan önce dokuların her biri 1 piksel kare olarak oluşturulur ve performanstaki düşüş başlangıca taşınır. Bu sayede, tabletlerde bile ağacın tüm yüksekliğini sorunsuz bir şekilde animasyonlu olarak gösterebiliriz.
Dokuları kaydırabilmek için dokuyu geometriyle eşleyen UV'leri değiştiriyoruz. Three.js'de bu kod şu şekilde görünür:
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)
];
Burada, dokunun x ve y ofseti için bir değişken kullandığımızı görebilirsiniz. Aynı etki, geometride çizilen koordinatları kaydıran özel bir GLSL gölgelendirici materyali ile de elde edilebilir.
Deneysel Özellikler
Demoda kullanılan özelliklerin bazıları hâlâ deneysel olduğundan makalenin Chrome Canary'da görüntülenmesi ve bu web sitesinde Chrome Canary için belirtilen tüm işaretlerin etkinleştirilmesi gerekir.
Chrome Canary'ı yükleyip düzgün şekilde yapılandırdıktan sonra demoyu inceleyin. (Projenin tamamının açık kaynak olduğunu ve GitHub'da mevcut olduğunu unutmayın.)
Sonuç
Ayrıca bu özelliklerin mobil uygulama bağlamında nasıl kullanılabileceğini, daha çok e-kitap bağlamında araştırıyoruz. Bu prototipin geliştirilme aşamasını ve bu özellikleri tablette sergilemek için farklı etkileşim ve dokunma paradigmalarını nasıl kullandığımızı görebilirsiniz.
Web tarayıcısı düzeni sürekli olarak gelişirken, eski okuma içeriklerinde alıştığımız prodüksiyon değerini ve düzen kalitesini sürdürme isteğini görüyoruz. CSS bölgeleri, hariç tutmalar, dengeli metin, özel filtreler ve WebGL gibi özellikler sayesinde içerik üreticilerin erişim ile tasarım kalitesi arasında seçim yapması gerekmeyecek. "Forest Giant", geleceğin web'inin her ikisine de izin vereceğinin açık bir göstergesidir.