Dil Bayrağı Spriteları
Visual Studio'da birden çok dil bayrağı için hareketli görüntü içeren bir köprü için CSS ve HTML nasıl oluşturulur.
giriiş
Ousia CMS'nin büyük bir kısmı, tüm öğelerin otomatik olarak oluşturulduğu ve bağlandığı çok dilli yönetim tarafıdır. Daha sonra, diğer dillerdeki içeriğe bağlantılar gösteren bir açılır listeye veya dili belirtmek için bayrak görüntülerine sahip bir dizi köprüye (32 piksel veya 64 piksel) sahip olmanızı sağlayan bir kontrol vardır.
Sağdaki aşağıdaki öğeyi arka plan olarak kullanıyoruz ve ardından aşağıdaki açılır listeye göre öğenin konumunu kontrol etmek için bazı CSS'ler kullanıyoruz.
Lütfen hareketli resmi ve CSS'yi kullanmaktan çekinmeyin, ancak lütfen kendi sunucunuzdan kullanın! Tüm varlıklar aşağıdan indirilebilir.
Yapıyı Oluşturma
Öncelikle yapıyı oluşturalım, sadece CSS için buradaysanız bu adımı atlayın.
- Bayraklar adlı yeni bir boş proje oluşturun.
- flags.css adlı yeni bir CSS dosyası ekleyin
- flags.htm adlı yeni bir HTML dosyası ekleyin
- FlagSprite_32_22.png adlı mevcut bir öğe ekleyin
- FlagSprite_64_45.png adlı mevcut bir öğe ekleyin
Artık ihtiyacımız olan tüm varlıklara sahibiz, o halde flags.css dosyasını açalım (henüz yoksa) ve aşağıdaki CSS'yi kopyalayalım.
CSS
body a{margin:10px;float:left;}/*22 high by 32 wide*/.ouFlgCS32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgDE32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgEN32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgES32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgFR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgHI32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgIT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPL32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgRU32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgTR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgZH32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}/*44 high by 64 wide*/.ouFlgCS64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgDE64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgEN64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgES64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgFR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgHI64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgIT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPL64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgRU64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgTR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgZH64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}Yapıyı Oluşturma
Bunun yaptığı, görüntünün hem 32x22 hem de 64x44 piksel çeşitleri için 12 farklı CSS sınıfı oluşturuldu. Her sınıf içinde ilgili arka plan görüntüsünü, ilgili yükseklik ve genişliği ve engellenecek görüntüleme stilini ayarladık.
En önemli kısım, konumun değiştirildiği yerdir ve daha sonra aşağıdaki açılır menüde gösterildiği gibi görüntünün yalnızca ilgili bölümünü görüntüler.
Ek CSS, onu destekleyen tarayıcılar için bir kutu gölgesi ve kenarlık yarıçapı koyar.
Ardından, test sayfasına bağlantıları ekleyeceğiz, bu nedenle aşağıdaki html'yi Flags.htm'ye kopyalayın.
HTML
<div>32 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS32"></a><a href="/Ousia.css" class="ouFlgDE32"></a><a href="/Ousia.css" class="ouFlgEN32"></a><a href="/Ousia.css" class="ouFlgES32"></a><a href="/Ousia.css" class="ouFlgFR32"></a><a href="/Ousia.css" class="ouFlgHI32"></a><a href="/Ousia.css" class="ouFlgIT32"></a><a href="/Ousia.css" class="ouFlgPL32"></a><a href="/Ousia.css" class="ouFlgPT32"></a><a href="/Ousia.css" class="ouFlgRU32"></a><a href="/Ousia.css" class="ouFlgTR32"></a><a href="/Ousia.css" class="ouFlgZH32"></a></div><div style="clear:both"><div>64 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS64"></a><a href="/Ousia.css" class="ouFlgDE64"></a><a href="/Ousia.css" class="ouFlgEN64"></a><a href="/Ousia.css" class="ouFlgES64"></a><a href="/Ousia.css" class="ouFlgFR64"></a><a href="/Ousia.css" class="ouFlgHI64"></a><a href="/Ousia.css" class="ouFlgIT64"></a><a href="/Ousia.css" class="ouFlgPL64"></a><a href="/Ousia.css" class="ouFlgPT64"></a><a href="/Ousia.css" class="ouFlgRU64"></a><a href="/Ousia.css" class="ouFlgTR64"></a><a href="/Ousia.css" class="ouFlgZH64"></a></div>Debug flags.htm in your browser and you should have 24 separate flags.
Claytabase tarafından web sitesi tasarımı
Bu, web sitesi tasarım hizmetlerimizin bir parçası olan piyasadaki en hızlı ve en optimize sistemlerden biri olan Ousia İçerik Yönetim Sistemi kodundan değiştirilmiş bir kod bölümüdür.
Bunlar, yaklaşık 500 £ 'dan başlayan sitelerde mevcuttur.
