Dünya Haritası CSS Şablonları

Bölge ve İşaretçi Stillerine Sahip Özelleştirilebilir Dünya Haritası CSS Şablonları

Hizmet verdiğiniz ülkelerin markanızın camgöbeği renginde parladığı, geri kalanların soluk griye büründüğü ve imleç üzerine geldiğinde her ofis raptiyesinin hafifçe büyüdüğü bir dünya haritası hayal edin. Dünya haritası CSS şablonları; dolgulardan etiket konumlarına ve bir işaretçinin geçiş yaptığı durumlara kadar tüm bu görsel katmanın kontrolünü size verir. Kurallar ortak olduğu için vurgu renginde yapılan tek bir düzenleme, hizmet verilen her ülkeye yansır.

İşaretçilerin Hover ve Aktif Durumları

İşaretçiler, insanların bir dünya haritasında fiilen temas ettiği unsurlardır. İmleci yok sayan bir raptiye bozuk hissettirir, çok fazla sıçrayan bir raptiye ise kalitesiz görünür. Çoğu dünya haritası düzeni birkaç görsel kurala dayanır:

• raptiyeyi büyüten veya altına yumuşak bir gölge ekleyen bir hover durumu
• tıklandıktan sonra seçilen ofisi vurgulanmış halde tutan aktif bir durum
• harita ayrı şekillere sahip bir SVG olduğunda, hizmet verilen ülkeler için dolgu ve kontur renkleri
• kendi arka planı, iç boşluğu ve köşe yuvarlama değerine sahip araç ipucu kartları

Atlantik üzerinde rahatça okunan beyaz bir etiket, Sahra'nın açık renkli zemininde kaybolabilir. İnce bir metin gölgesi veya yarı saydam bir zemin plakası, bunu genellikle daha büyük bir yazı tipinden çok daha iyi çözer.

Okunaklı Etiketlere Sahip Lejantlar

Bir lejant harita renklerini anlamlı kılar, ancak yalnızca renk örnekleri haritayla birebir eşleştiğinde işe yarar. Paylaşılan sınıflar ve renk değişkenleri, tek bir değerin hem ülke dolgusunu hem de lejanttaki ilgili kareyi yönetmesini sağlar. Karayipler veya Balkanlar'daki küçük ülkelerin sınırları içinde metne yer kalmadığı için etiketler daha zorludur. Yaygın bir çözüm, bu etiketleri ince bir kılavuz çizgiyle şeklin dışına yerleştirmek veya daha dar genişliklerde gizlemektir. Haritanın yanında, bir Grid düzeni lejant sütununu hizada tutar ve tek bir aralık değeri aralarındaki boşluğu belirler.

Her Kesme Noktasında Raptiyeleri Ölçeklendirme

Bir dünya haritası dikey tutulan bir telefonda genişliğinin büyük kısmını kaybeder, ancak parmak uçları hiç küçülmez. Kesme noktaları; daha geniş dokunma alanları, daha az etiket ve haritanın altına inen bir lejant ile yanıt verir. Bağıl birimler, işaretçi boyutlarını cihazlar arasında orantılı tutar; böylece bir raptiye dizüstü bilgisayarda nokta, tablette ise madeni para gibi görünmez.

Harita ekranları genellikle projenin başka hiçbir yerinde kullanılmayan stiller barındırır. Nicepage, tek bir sayfanın ihtiyaç duyduğu kuralları içeren ayrı bir stil sayfası oluşturan Sayfa Başına Minimal CSS Dışa Aktar özelliğini isteğe bağlı bir dışa aktarma modu olarak belgeler; böylece ağır harita stilleri sitenin geri kalanından uzak kalır.

Birkaç raptiyenin üzerine gelin, lejantı dolgularla karşılaştırın ve düzeni telefon genişliğinde inceleyin. Bu kontroller, bir dünya haritası CSS şablonu hakkında herhangi bir ekran görüntüsünden çok daha fazlasını ortaya koyar.