Bir web sitesi oluştururken görsel kullanmaktan daha havalı olan ne biliyor musunuz? HTML ve CSS ile görüntü gibi görünen ve hareket eden bir şeyler yapmaya ne dersiniz? Ve biliyor musunuz, konteyner sorgularıyla bu artık çok kolay. Bu yazımızda HTML ve CSS ile görsele benzeyen bir reklam yapacağız.  Daha sonra, sıkıştırılırken, genişletilirken ve belge içinde başka konumlara taşınırken bir resim gibi davranmasını sağlayacağız. Tamam, hadi kontrol edelim!   https://youtu.be/5ugwp7HlpGs?embedable=true  Tamam, oluşturduğumuz sitenin kenar çubuğunda bu Vans reklamı var ve bu şu anda bir resim.   Bu, düzenlemeyi zorlaştırır; Bir şeyin değişmesi gerekiyorsa tasarımcının onu güncellemesi ve bize yeni bir görüntü sağlaması gerekir.  Ayrıca, hem yüksek yoğunluklu hem de düşük çözünürlüklü ekranlarda net görünmesi için kaynak seti ile birlikte kullanmak üzere muhtemelen birden fazla sürüme ihtiyacımız olacaktır.  Bu yüzden onu HTML'ye dönüştürmekle görevlendirildik; bunu nasıl yapabiliriz?  Görüntüleri ve Görüntüleme Birimlerini Kullanmanın Bazı Dezavantajları  Muhtemelen görüntü alanı birimlerini kullanabilirdik, ancak reklamı boyutlarının farklı olacağı farklı konumlara yerleştirecek olsaydık, her şey kapsayıcı boyutlarına değil görüntü alanına dayalı olacağından ekstra kod eklememiz gerekirdi.  Yani bunu başarabiliriz ama işler biraz karışabilir. Bunun yerine konteyner sorgularını ve konteyner sorgu birimlerini kullanabiliriz. Kapsayıcı sorguları medya sorgularına biraz benzer ancak genel görünüm yerine sayfadaki herhangi bir kapsayıcının boyutlarına dayanır.  CSS   Özelliğiyle Kapsayıcı Ayarlama container-type  Tamam, neyle başladığımıza bir bakalım.   Yani burada oldukça iyi görünüyor ama tepki verirken nasıl davranıyor?   Metin ve kenarlıklar boyut değiştirmiyor, bu yüzden biraz sevgiye ihtiyacı var çünkü bu haliyle oldukça kırık. Şimdi, burada zaten yaptığımız şeylerden biri, kabın bir görüntü gibi tepki vermesine olanak tanıyan bir   kullanıyoruz, bu iyi bir şey. aspect-ratio   figure { aspect-ratio: 1 / 1.5; }  İçeriğin de doğru yanıt vermesi için tüm boyutları değiştirmemiz yeterli. Buradaki ilk adım boyutlarımızı takip edecek bir konteyner sağlamaktır. Bu bizim figür öğemiz olacak.  Burada kapsayıcı sorgularını kullanmak için kapsama bağlamı olarak bilinen şeyi tanımlamamız gerekir. Bunu   özelliği ile yapabiliriz. Bu örnek için satır içi boyut değerini kullanabiliriz. container-type   figure { ... container-type: inline-size; }  Bu, öğeleri satır içi boyutuna göre boyutlandıracak bir kap oluşturacaktır; bu durumda şeklin genişliği olacaktır. Tamam, artık izleyecek bir kapsayıcımız var, dolayısıyla artık kapsayıcı sorgu birimlerini kullanmakta özgürüz. Ve aralarından seçim yapabileceğiniz çok şey var. Bu birim değerlerden herhangi birini kullanabiliriz:   cqw   cqh   cqi   cqb   cqmin   cqmax  Burada, satır içi konteyner sorgusu anlamına geldiğini düşündüğüm   kullanacağız. Bir   birimi konteynerin genişliğinin yüzde birine eşittir. Tamam, ihtiyacımız olan tek şey bu; buradan itibaren birimleri gerektiği gibi ayarlıyoruz. cqi cqi  Burada, bu reklamdaki çeşitli öğelerde kullanılan birkaç özel özelliğimiz var.   figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }  Bu çerçevenin kabın dış kenarından içeri girdiği miktarla başlayalım. Bunu üç   yapalım. cqi   figure { ... --frameInset: 3cqi; }  Daha sonra burada kenarlıkların kalınlığını ayarlayalım. Bu durumda, sınırların bir pikselin altına daralmasını önlemek için   işlevini kullanacağım, ancak o bir piksel değerinden büyük oldukları sürece dinamik olmalarını istiyorum. max  Yani ilk değer bir piksel, ikincisi ise dinamik değerdir. Bunu bir   yapalım. cqi   figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }  Şimdi ana başlık olan   unsur olan "Vans" metni için onu yirmi beş   yapalım. Ve başlığın altındaki boşluk için bunu üç   yapalım. strong cqi cqi   strong { font-size: 25cqi; padding-bottom: 3cqi; }  Şimdi "Duvarın Dışında" alt başlığına geçelim. Ana başlığın yaklaşık yarısı kadar olmalıdır, bu yüzden on iki   deneyelim. Ve metnin üstündeki boşluk için yine üç   kullanalım. cqi cqi   em { font-size: 12cqi; padding-top: 3cqi; }  Tamam, son parça olan "1966'dan beri" etiketi için altı   yazı tipi boyutunu kullanalım. Ve yukarıdaki ve alttaki boşluk için, iki değere kadar alan   mantıksal özelliğini kullanıyoruz. İlk değer metnin üstündeki değer, ikinci değer ise alttaki boşluk içindir. cqi padding-block  O halde yukarıdaki iki   ile devam edelim. Ve hesaplamamızda   olduğu gibi bırakacağız, ancak beş   ek alanla devam edeceğiz. cqi --frameInset cqi   time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }  Tamam güzel, bu iyi görünüyor.   Nasıl tepki verdiğine bir göz atalım. Sıkıştırdıkça her şey istediğimiz gibi düzgün bir şekilde yanıt veriyor. Bir görüntüye çok benziyor.   Küçük olsa bile oldukça iyi görünüyor ve kenarlıkların hiçbir zaman bir pikselin altına küçülmediğini görebiliyorsunuz. Daha sonra, gerçekten dar genişliklere girdiğimizde genişliyor ve her şey hala harika görünüyor.   Bu ne kadar havalı? Tek bir stil seti ve tüm yol boyunca işe yarar. İleri geri ölçeklendirdiğimizde harika görünüyor.  Şimdi daha da güzeli, reklam işaretlememizi alıp buradaki ana sütun bölgesine taşıyabiliriz ve her şey tıpkı bir resimmiş gibi çalışmaya devam eder.     <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div>  Bu çok güzel ve çok havalı. Tüm bunların üstesinden gelebilecek tek bir stil kümesinin olduğunu unutmayın. Ve sıfır medya sorgusu söz konusuydu. Bir bütün olarak sorguların kapsanması konusunda biraz daha fazlası var, bu nedenle farklı yönleri ele alacağım gelecekteki gönderileri takip etmeye devam edin.  Bunu Çalışırken Görmek İster misiniz?  Aşağıdaki Codepen örneğinde bu tekniklerin demo koduna ve örneklerine göz atın. Herhangi bir sorunuz veya düşünceniz varsa yorum bırakmaktan çekinmeyin.   https://codepen.io/brianmtreese/pen/poGegXB?embedable=true

Buy Me a Coffee

Bu ses hikayenin orijinal dilinde üretilmiştir!

HTML: CSS Kapsayıcı Sorgularıyla Bir Görüntü Nasıl Yeniden Boyutlandırılır?

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

HackerNoon Yazma Yarışmasını mı Kazanmak İstiyorsunuz? İşte #crypto-api Yarışması Kazananlarının Önerileri

Claude Sonnet 3.5 Sistem Bilgi Sızıntısı: Adli Analiz

Forumlardan Feed'lere: Sosyal Medya Algoritmaları Dijital Etkileşimi Nasıl Şekillendiriyor

Başarılı Buluta Geçiş İçin Tam Kılavuz: Stratejiler ve En İyi Uygulamalar

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps