CSS ve tarayıcı düzenindeki araçları kullanmak, web içeriği için baş döndürücü görseller elde etmenizi sağlayabilir. CSS filtreleri, WebGL, HTML5 video, SVG, tuval gibi web özelliklerini ve CSS Bölgeleri, CSS Şekilleri ve CSS Özel Filtreleri gibi gelişen geleceğin teknolojilerini kullanmak, çok geniş bir reklam ortamı vaat ediyor. Adobe, düzen ve tasarım konusunda tutkulu içerik üreticilerle çalışma konusunda uzun bir geçmişe sahiptir ve değişen pek çok web standardına katkıda bulunarak edindiği bilgileri web'e uygulama konusunda aktiftir.
National Geographic'in yardımıyla, şirketin "Forest Giant" adlı özelliğindeki içeriği kullanarak, bu özelliklerin zengin web düzenini ve duyarlı teknikleri nasıl sağlayabileceğini gösteren bir prototip oluşturduk. Bu makalede, sitenin bazı ilginç özelliklerini nasıl oluşturduğumuz gösterilecektir. Kısa bir özet için, Christian Cantrell'in sitenin çeşitli özelliklerini adım adım gösterdiği aşağıdaki videoyu izlemenizi öneririz.
Düzenin incelikleri
Harika bir düzeni oluşturan unsurlar ve bunun arkasındaki özellikler çok kolay anlaşılır olmayabilir. Bu nedenle, daha dikkate değer özellikleri öne çıkaran bir "düzenleyici yer paylaşımı" oluşturduk. Editörün işaretlerini etkinleştirmek için makalenin alt kısmındaki çubuğu tıklayın.
Düzenden Bağımsız
Günümüzde web'de düzen, genellikle metin sığdırmak için dikey olarak genişleyen kapsayıcılara sahip içeriğimiz tarafından belirlenir. Karmaşık düzenler oluştururken kopyada veya diğer içerikte yapılan değişikliklerin genel düzen üzerinde istenmeyen bir etkisi olabilir ve bu da beklenmedik değişikliklere göre içeriği yeniden tasarlama ihtiyacını doğurur. Bölgeler sayesinde, bir öğeyi içeriğimiz olarak tanımlayıp düzenin bu içeriğin geçmesini istediğimiz bölümlerini belirterek içeriğimizi düzenden tamamen ayırabiliriz.
"Forest Giant" örneğinde ise hikaye tek bir öğede bulunuyor. Ardından, sayfa boyunca fotoğraflardan ve metin alanlarından oluşan yerleşim yapımızı oluşturduk. CSS'de, içeriğin akmasını istediğimiz öğeleri tanımlarız. Kopya bir öğenin sonuna ulaştığında, DOM sırasında bir sonrakine geçilir. Bu yöntem, metnin sığacağı veya öğenin yüksekliğini aşıp aşmayacağı konusunda endişe duymadan sütunlarımız konusunda gerçekten yaratıcı olmamıza, bunları dengelemelerine ve yüksekliğini tasarıma göre uyarlamamıza olanak tanır. Ayrıca, hikaye akış şeklinde akmaya devam ederken düzenimiz içinde tam genişlikli resimler gibi öğelere de sahip olmamızı sağlar.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
Yukarıdaki CSS'de, "story" adlı bir adlandırılmış akış oluşturuyoruz. Bu adlandırılmış akışın içeriği, "storyContent" kimliğine sahip öğedir. Daha sonra bu akış, "story" sınıf adına sahip tüm öğelerin arasından geçer. CSS Bölgeleri, duyarlı tasarıma yönelik harika bir araçtır. Büyük ekranlarda zengin düzende çok sütunlu ve uzak sütunlar gibi özelliklere, küçük ekranlarda ise tek sütunlu düzene uyum sağlar. Bölgelerle, bölgenizin boyutunu vw veya vh gibi duyarlı birimlerle de ayarlayabilirsiniz. Bu, doğal olarak bölge zincirindeki bir sonraki öğeye akacağı için içeriğin kesilmesinden endişe etmeden, sütunların düzeninizdeki görüntü alanı yüksekliğini aşmamasını sağlamak için kullanılabilir.
Geçit Kapakları
CSS Hariç Tutmaları, metni düzensiz şekillerin etrafında veya içinde sarmalamamıza olanak tanır. Bu, şapkalar gibi yeni tasarımlar için yararlı olabilir. Büyük harfler, bir hikayenin veya bölümün ilk harfinin büyütülerek metnin geri kalanının karakterin konturunun etrafında kaydırılabileceği yaygın bir tasarım uygulamasıdır. Bu etki, satır içi içeriğin kayan öğeleri sarmalamaya çok benzer; bununla birlikte, hariç tutma işleviyle artık dikdörtgen kutularla sınırlı değiliz. Bir kayma üzerinde şeklin dış kısmını kullanarak, içeriğimizin karakterimizin şeklinin etrafını sıkıca sarmasına olanak tanıyan geometriyi tanımlayabiliriz.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Böylece, içeriğin yuvarlak şeklin etrafını sarmasına olanak tanıyan bir elips oluşturulur. Ayrıca, şekil için göreli birimler kullandığımızdan, öğenin boyutunu değiştirmek, şeklin boyutuna yansıtılır.
Şekiller
Hariç tutmalar, bırakma sınırlarının yanı sıra şeklin içini kullanarak şekillerin içinde metnin kaydırılabilmesini sağlar. Bu özelliği sitenin tamamında, özellikle de büyük resim başlıklarında, metni çerçevelemek için fotoğrafların negatif alanından yararlanarak kullanıyoruz. Ayrıca, daha önce web'de ulaşılması çok zor olan düzenleri taklit eden diğer resimlerin ve grafiklerin konturu boyunca metni kaydırmamıza da olanak tanıyor.
Şekiller, şeklinizi tanımlamak için göreli birimler kullanarak duyarlı düzenlerle de çalışabilir. Bu şekilde, kapsayıcı veya görüntü alanına göre esneyen şekiller oluşturabilir ve hatta şekli tamamen değiştirmek ya da tamamen CSS'de tanımlandığından kaldırmak için medya sorguları kullanabiliriz. Aşağıda, noktaları tanımlayan değerlerle site içinde kullanılan bir poligon şekli örneği verilmiştir:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Dengeli Metin
Dengeli Metin, satırları sarmalarken kelime kelime kaydırmak yerine bir öğe içindeki metin bloğunun tamamına bakan bir özelliktir. Metin satırlarını bölerek bir öğe içinde eşit boyutlu çizgiler elde etmek için tek bir satırda bir veya iki kelime bulunması gibi durumların önüne geçer. Bu düzeyde bir kontrol, estetik açıdan göze hitap eden metin bloklarını, özellikle de alıntı veya altyazı gibi kısa açıklamalarda kolayca oluşturmamıza olanak tanıyor.
Makalede tam da bu noktada Dengeli Metin kullanıyoruz. Bu özellik Adobe'nin önerdiği bir standart olduğundan, aynı sonuçları elde etmek için Randy Edmunds tarafından oluşturulan bir çoklu dolgu kullanıyoruz. Bu özellik en iyi, duyarlı durumlarda görülür. Tarayıcıyı yeniden boyutlandırırken, bloğun metni yaklaşık olarak aynı genişlikte satırlar oluşturacak şekilde dengelemeye devam ettiğini fark edeceksiniz. Dengeli metin çoklu dolgusunu kullanmak kolaydır, çünkü bu bir jQuery eklentisi olduğundan, 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();
Filtre Geçişleri
Geçişler, kullanıcının dikkatini çekmenin ve sitenizdeki şeylerin durumunu bildirmenin önemli bir yoludur. Saydamlık (ve daha yakın bir zamanda da 3D Dönüşümler) sayesinde, kullanıcılar sitenizin bölümleriyle gezinirken veya etkileşimde bulunurken sorunsuz geçişler ve animasyonlar oluşturmak için bu dönüşümlerin kullanıldığını gördük. Artık aynı amaçla kullanılabilecek filtrelerimiz var.
"Orman Dev" oyununda, bazı görseller görüntülenirken gri tonlamadan renge geçmek için filtreler kullanıyoruz. Bu filtreler, karmaşık görüntüleme efektleri ve geçişleri oluşturmak için opaklık veya başka filtrelerle birleştirilebilir. Daha da etkileyici efektler eklemek için özel filtrelerin gücünü kullanabiliriz.
Ö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ıyarak karmaşık harmanlama efektlerine ve 3D bozulmasına olanak tanır. Sitenin en altında, "Başkan Ağacı'nı İnceleyin"i tıkladığınızda sayfanın kıvrılarak kıvrılıp altındaki başka bir bölümü gösterdiğini görürsünüz. Bu, özel filtrelerin içerikler arasında nasıl zengin geçişler sağlayabileceğine dair yalnızca bir örnektir. Animasyon, CSS geçişleri kullanılarak oluşturulabilir. Ancak, geçişlerin izin verdiğinden daha sağlam animasyonlar veya etkileşimler kullanmak isterseniz, aşağıda gösterildiği gibi JavaScript ile stili ayarlayarak gölgelendiricinize değerler aktarabilirsiniz. Bu, yumuşatma üzerinde daha ayrıntılı bir denetime sahip olmanıza ve hatta gölgelendiriciyi değiştirmek için kullanıcı girişi yöntemlerine izin vermenize olanak tanır.
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 pikselleştirir. Bu nedenle, bittiğinde mutlaka kaldırmamız gerekiyor. Aksi takdirde içeriğimiz bulanık görünebilir.
$("#map").css("webkitFilter", "none");
CSS özel filtreleri, gerçek bir kitapta sayfanın çevrilmesi gibi görünen sayfa kaydırma gibi ilginç efektler sağlar. Web geliştiricilerinin GLSL adı verilen bir dildeki karmaşık efektleri programlamasını ve bunu web içeriğine uygulamasını sağlarlar. Özel filtrelerin ayrıntıları, tüm bu parametreler ve bunları nasıl kullanacağınız hakkında daha fazla bilgi edinmek için bu harika eğiticiye göz atın.
WebGL'de Dokuları Önceden Oluşturma
Bu makalenin en önemli özelliği, hacim bakımından dünyanın ikinci en büyük ağacı olduğuna inanılan, "Başkan"ın ilk tamamlanmış resmiydi. Bu resim, eksiksiz bir resim elde etmek için yüzlerce ağaç fotoğrafı birleştirilerek oluşturulmuştur. Bu sürecin simülasyonunu yapmak için resmi birkaç küçük fotoğrafa bölerek bütün resmi oluşturmak istedik. Bu, WebGL kullanılarak, özellikle de WebGL'yi çevreleyen daha üst düzey bir API sarmalayıcı olan Three.js kitaplığı ile gerçekleştirilmiştir.
Çok sayıda doku oluşturulması, ekranda yeni bir doku çizilmeye her çalıştığında hızlı bir şekilde performans sorunlarına neden olabilir, ekstra ağ isteklerinden bahsedemez. Bunu azaltmak için dokularımızı mümkün olduğunca büyük hale getirdik ve her karo için belirli uzaklıkta kopyasının değerlerini belirledik. İmge eşlemesi olarak adlandırılan bu teknik, oyun geliştirmede yaygın olarak kullanılır. Bunun sonucunda ağacın tamamı için üç büyük doku elde edildi. Dokulardan biri ekranda her görünür olduğunda performans isabetinden kurtulmak için, animasyon başlamadan önce her dokuyla 1 piksellik kareler oluşturur, böylece performans isabetini başa taşırız. Bu, tablette bile, ağacın tüm yüksekliğinde sorunsuz bir şekilde uçmamıza ve animasyon uygulamamıza olanak tanır.
Dokuları dengelemek için, dokuyu geometriyle eşleştiren UV'leri değiştiriyoruz. Three.js'de ş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ın yerini belirleyen özel bir GLSL gölgelendirici malzemesiyle de elde edilebilir.
Deneysel Özellikler
Demonun kullandığı bazı özellikler hâlâ deneysel olduğundan makalenin Chrome Canary'de görüntülenmesi ve bu web sitesinde Chrome Canary için bahsedilen tüm işaretlerin etkinleştirilmesi gerekir.
Chrome Canary'yi yükleyip doğru şekilde yapılandırdıktan sonra demoya göz atın. (Projenin tamamının açık kaynak olduğunu ve GitHub'da kullanılabildiğini unutmayın.)
Sonuç
Bu özelliklerin mobil uygulama bağlamında nasıl kullanılabileceğini, daha çok bir e-kitap boyunca nasıl kullanabileceğimizi de araştırıyoruz. Bu prototipin yapım aşamasında olduğunu ve bu özellikleri bir tablette göstermek için farklı etkileşim ve dokunma paradigmalarından nasıl yararlandığımızı görebilirsiniz.
Web tarayıcısı düzeninin sürekli değişmesiyle, eski okuma içerikleriyle alışkın olduğumuz prodüksiyon değeri ve düzen kalitesini devam ettirme arzusunu görüyoruz. İçerik üreticiler artık CSS Bölgeleri, Hariç Tutulanlar, dengeli metin, özel filtreler ve WebGL gibi özellikler sayesinde erişim ve tasarım kalitesi arasında seçim yapmak zorunda kalmayacak. "Forest Giant", geleceğin web'de her ikisine de izin vereceğinin açık bir göstergesi.