CSS Izgara Düzeni ile Oluşturulan 3 Popüler Web Sitesi Kahramanı

Bu bölüm, CSS ızgara düzenini kullanmanın en sevdiğim yollarından biri olan bir tuvale dönüştürerek, web sitesi kahramanları – nam-ı diğer “başlıklar” – yaratmayı araştırıyor.

Destek bildirimi: Bu tekniklerde kullanılan temel özellikler – grid-template-areas ve object-fit – IE 16’nın altında desteklenmiyor. İyi haber – bu hala yaklaşık %96 desteklendikleri anlamına geliyor!

Pazarlamadaki yıllarımdan ilham alarak oluşturacağımız üç düzen:

#1: Pazarlama Harekete Geçirici Mesaj (CTA) ve Görsel

#2: Arka Plan Resminde Metin Yerleşimi

#3: Kopya ve Form içeren İki Sütun

Çok uzak olmayan geçmişte, bu yerleşimlerin çoğuna ulaşmanın yolu, position: absolute.

Şebeke ile bu çözümden yükseltme yapabilir ve duyarlı, dinamik konumlandırma süper güçleri kazanabiliriz!

İşte HTML için başlangıç ​​noktamız:

<header>
<div class="hero__content">
<h1>Product</h1>
<p>You really need this product, so hurry and buy it today!</p>
<a href="#" class="button">Buy Now</a>
</div>
<img src="http://placecorgi.com/600" alt="" />
</header>

Sonra, çevireceğiz header bir ızgara kapsayıcısına yerleştirin ve “kahraman” adlı tek bir şablon alanı oluşturun:

header {
display: grid;
grid-template-areas: "hero";
}

Şablon alanının kullanımı, tek bir adlandırılmış ızgara hücresi oluşturur. Daha sonra herhangi bir türdeki tüm çocukları atamak için bir kural oluştururuz (evrensel seçici sayesinde *) bu alana:

header {
> * {
grid-area: hero;
}
}

CSS ızgara düzeni şablon alanlarını kullanmak, mutlak konumlandırmadan büyük bir yükseltme olan ızgara konumlandırmanın tüm iyiliğini elde ettiğimiz anlamına gelir!

Bu, tüm çocukların aynı ızgara hücresini paylaşmalarını ve onu etkin bir şekilde bir tuvale dönüştürmelerini sağlar.

Artık ortalanacak öğeleri veya birbirine ve konteynere göre diğer konumları tanımlayabiliriz. onun yerine yüzdeleri hesaplamak için matematik yapmak veya içeriğin duyarlı büyümesine ve küçülmesine müdahale ederek mutlak konumlandırmayı aşmak için medya sorgusu baş ağrılarıyla karşılaşmak.

Başlık örneklerimizle daha fazla bağlam elde etmek için okumaya devam edin!

Tabanımız dışında henüz başka bir stil olmadığı için elimizdekiler şunlar: öğeler sol üstte hizalanır ve görüntü .hero__content:

Ele alacağımız ilk şey, başlıkta bazı boyut beklentileri belirlemektir:

header {
height: 65vh;
max-height: 600px;
}

gibi görüntü birimi birimleri vh kahramanları büyütmek için en iyi yolum. Bu, cihaz boyutuna bağlı olarak dinamik olarak boyutlarını büyüterek veya küçülterek onları kullanıcıların görüntüleme alanıyla orantılı tutar.

Görüntü çözünürlüğünün aşırı gerilmesini önlemek için bunu belirliyoruz. max-heightancak bu isteğe bağlıdır ve kullanımdaki görüntüye bağlıdır.

Daha sonra, üzerinde bazı yönler sağlamamız gerekiyor. img davranış.

Neden arka plan resmi kullanmadığımızı merak ediyor olabilirsiniz. İlk cevap, görüntünün, aşağıdakiler de dahil olmak üzere anlamını korumasıdır. alt yardımcı teknoloji tarafından keşfedilebilir olması için öznitelik.

İkincisi, onu bir görüntü olarak tutmak, onu nasıl şekillendirdiğimiz ve konumlandırdığımız konusunda daha fazla esneklik sağlar.

Kullanacağız object-fit birlikte object-position bu aslında ilk davranışını bir arka plan görüntüsüne çok benzer hale getirir:

img {
object-fit: cover;
object-position: 5vw -5vmin;
height: min(65vh, 600px);
width: 60%;
}

bu height: min(65vh, 600px) önemlidir, çünkü onu yüksekliğini doldurmaya yönlendirir. header tabanda belirlediğimiz yüksekliklerden gelen bu değerlerden herhangi birinin “minimumunu” temel alır header. Açık ölçü parametreleri verildikten sonra, object-fit dahil olmak üzere boyutları “kapsayacak” şekilde görüntü içeriğini devralır ve ölçekler. width: 60%.

Yeni object-fit? Ödeme duyarlı resimlerle ilgili 3. bölüm veya 6. bölüm animasyonlu resim altyazıları daha fazla örnek için.

Son olarak ekleyeceğiz justify-self için img yerleştirilmesi gerektiğini tanımlamak için end – bu çözüm için ızgara kullanma büyüsüne ilk bakışımız:

img {
justify-content: end;
}

İşte ilerlememiz:

Şimdi için .hero__contentilk iyileştirme, ona bir genişlik tanımı vermek ve ayrıca ona görünüm alanının kenarından biraz boşluk bırakmaktır:

.hero__content {
margin-left: 5%;
max-width: 35%;
min-width: 30ch;
}

bizim beri img %60 genişliğe izin verilir, birleşik istemiyoruz margin ve width örtüşmeyi önlemek için %40’ı aşmak.

Biz de sağladık min-width görünüm alanı küçülürken içerik için makul miktarda alan tutmak için.

Artık grid kullanımından tekrar faydalanabilir ve işimize geri dönebiliriz. header hizalama özelliği eklemek için kural:

header {
align-items: center;
}

Bu, içeriği görüntüyle dikey olarak hizalar. Görüntü %100 olarak ayarlandığından header yükseklik, optik olarak bu, içeriği dikey olarak ortalar ve masaüstü için hazır kahramanımızla sonuçlanır:

Bunun en küçük ekranlarda çalışmaya devam etmesi için birkaç ince ayara ihtiyacımız var.

İlk olarak, görüntü genişliğini varsayılan olarak %80’e ayarlayacağız ve bir medya sorgusunda %60’lık azalmayı saracağız. Ayrıca, yalnızca görünüm alanı yeniden boyutlandırmaları arasında geçişi yumuşatmak için bir geçiş ekleyeceğiz:

img {
width: 80%; 
transition: 180ms width ease-in;
@media (min-width: 60rem) {
width: 60%;
}
}

Ardından içerikte, arka planı kahraman arka planının alfasına ayarlamak için biraz hile kullanacağız, böylece yalnızca görüntüyle örtüşmeye başladığında görünür olacak ve kenar boşluğunda bir güncelleme, biraz dolgu ve biraz nın-nin border-radius:

.hero__content {
margin: 1rem 0 1rem 5%; 
z-index: 1;
background-color: rgba(mix(#fff, $primary, 97%), 0.8);
border-radius: 1rem;
padding: 0.5rem 0.5rem 0.5rem 0;
}

Biz yaptı biraz eklemek lazım z-index oraya getirmek için orada img, ama çok acı verici değildi! 😊

İşte mobil boyuttaki son görüntü alanı sonucu:

• object-fit kontrol etmek için kullanılır img boyut
• align-items: center ızgara çocuklarını dikey olarak hizalamak için kullanılır

Stephanie Eckles (@5t3ph)

Temel HTML ve CSS stillerimize sahip bu sürümde, resim bir jpg olduğundan içeriği tamamen gizler ve bu nedenle alfa içermez.

Adım 1: İçeriği resmin üzerine getirin:

.hero__content {
z-index: 1;
}

Ardından, başlık boyutlarını tanımlayacağız:

header {
height: 60vh;
max-height: 600px;
}

Ve yine kullanacağız object-fit kontrol etmek için img. Bu seferki fark, %100 genişliğe yayılmasını istememizdir. ve yükseklik, böylece başlık üzerinde tam kapsama alanı sağlar:

img {
object-fit: cover;
height: min(60vh, 600px);
width: 100%;
}

Bir ilerleme görüntüsü göstermeden önce, ızgara alt öğelerinin hizalamasını ayarlayalım:

header {
place-items: center;
}

Ve işte şimdiye kadarki sonuç:

Metnin kontrastının arka plan görüntüsü üzerinde yeterli olmadığı oldukça açık. Hem fazladan bir marka bilinci oluşturmanın hem de kontrast sorunlarını çözmeye yardımcı olmanın yaygın bir yolu, bir görüntüye renkli ekran uygulamaktır.

İşte bunu başarmak için küçük bir ipucumuz – ilk olarak, header alır background-color alfa şeffaflığı içerir:

$primary: #3c87b3;
header {
background-color: rgba($primary, 0.7);
}

Ardından, görüntüyü başlığın arkasına kayması için yönlendiririz. z-index. Testlerimde, bu hala img yardımcı teknoloji ile keşfedilebilir, ancak bir sorun biliyorsanız bize ulaşın!

img {
z-index: -1;
}

Aşağıdakilerle sonuçlanır:

Grid kullanımı sayesinde nelerin mümkün olduğunu biraz daha göstermek için, hadi bir :before ve :after sözde eleman header bir SVG deseni tutmak için.

Dahil edilmesi gereken önemli şey, sözde öğeleri de atamaktır. grid-area: hero. Aksi takdirde, varsayılan ızgara akışına göre yeni “satırlar” olarak yerleşirler ve bu da tuvalimizi bozar.

&::before {
content: "";
grid-area: hero;
width: 50vmin;
height: 50vmin;
border-radius: 50%;
transform: translate(-10%, -10%);
background-image: url("data:image/svg+xml,%3Csvg width="14" height="14" viewBox='0 0 6 6' xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="#{svgColor($support)}" fill-opacity='0.6' fill-rule="evenodd"%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
&::after {
content: "";
grid-area: hero;
width: 30vmin;
height: 60vmin;
transform: translate(20%, 40%) rotate(45deg);
background-image: url("data:image/svg+xml,%3Csvg width="14" height="14" viewBox='0 0 6 6' xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="#{svgColor($support)}" fill-opacity='0.6' fill-rule="evenodd"%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

Ve nedeniyle place-items: center tanım, işte sonuç:

Çözülmesi gereken ilk sorun, aşağıdakilerle çözeceğimiz taşma sorunudur:

header {
overflow: hidden;
}

Ardından, ızgara teklifleri self o belirli öğeyi yönlendirmek için özellikler kendisini yeniden konumlandırabilir ve bu da onu ızgara üst tanımından koparır. Bu yüzden sözde öğelerimizi buna göre güncelleyeceğiz:

&::before {
place-self: start;
}
&::after {
place-self: end;
}

Ve bununla birlikte 2. kahramanı da tamamladık! Küçük görünüm penceresi sürümünün iyi çalışmaya devam ettiğini görmek için demoyu test edin:

• üzerinde renkli bir ekran oluşturdu. img tanımlayarak background-color arasında header ile birlikte rgba ve ekleme z-index: -1 için img arkasına kaydırmak için header
• ek tasarım yeteneği için sözde elemanlar kullandı ve bunları ana ızgara tanımından ayrı olarak konumlandırdı. place-self

Stephanie Eckles (@5t3ph)

Bu üçüncü örnek için, temel HTML’miz, forma eklemek için biraz değişir. Ana içeriğin etrafına, yakında açıklayacağımız bir sarmalayıcı da ekledik:

<header>
<div class="hero__wrapper">
<div class="hero__content">
<h1>Product</h1>
<p>You really need this product, so hurry and buy it today!</p>
</div>
<div class="hero__form">
<h2>Subscribe to Our Updates</h2>
<form action="/">
<label for="email">Enter your email:</label>
<input id="email" name="email" type="email" />
<button class="button" type="submit">Subscribe</button>
</form>
</div>
</div>
</header>

Ve zaten öğrenmiş olduğumuz şeyler göz önüne alındığında, işte başlangıç ​​görünüşümüz: header SVG desen sözde öğesi zaten kullanılmış place-self: endform stilleri zaten sağlam (spoiler: bu da ızgara kullanıyor!) ve taşma da zaten kontrol ediliyor:

Başlayarak bunu düzeltmeye başlayalım .hero__wrapper sınıf. Önemli bir güncelleme, genişliğini 100vw böylece içeren bir öğe olarak başlığı tamamen kaplar. Ayrıca devam edip onu bir ızgara kapsayıcı olarak oluşturacağız:

.hero__wrapper {
width: 100vw;
display: grid;
}

Ardından, ızgara sütunlarını tanımlamanın zamanı geldi. Kendinden duyarlı ızgara sütunları için birden fazla bölümde zaten yer alan favori tekniğimi kullanacağız:

.hero__wrapper {
grid-template-columns: repeat(auto-fit, minmax(30ch, auto));
gap: 2rem;
}

Daha fazla bilgi edin 8. bölümdeki bu teknik hakkında: 12 Sütunlu Izgarayı Değiştirmek İçin Çözümler

biz kullandık auto yerine izin verilen maksimum genişlik için 1fr çünkü eşit sütunlar istemiyoruz, bunun yerine sütunların göreceli boyutlarına orantılı olarak genişlemesini istiyoruz. Bu, metin içeriği ve form arasında biraz daha iyi bir görsel denge içindir ve zevke göre ayarlanabilir. Eşit genişlikte sütunlar istiyorsanız, şunu kullanın: 1fr onun yerine auto.

Şu alt eğim sınırı hakkında biraz konuşalım – nasıl konumlandırılıyor?

O :after üzerindeki eleman header ve ana başlık içeriğinin etrafında bir sarmalayıcı kullanmamızın birincil nedenidir. ile konumlanıyor place-self: end, ve genişliği doğal esneme davranışından kaynaklanmaktadır. Tarzının ne kadar minimal olduğunu görmek için demoyu kontrol edin.

Tamam, şimdi içeriğin etrafında biraz daha boşluk bırakmamız gerekiyor. Diğer kahramanlarda bir height ancak bu, buradaki kullanım durumumuzu tam olarak kapsamıyor çünkü daha küçük görünüm alanlarında form ve içerik dikey olarak yığılacak.

Bunun yerine, bu iyi ole için daha iyi bir iş padding. üzerine yerleştireceğiz .hero__wrapper SVG deseninin veya degrade kenarlığının konumunu etkilememek için:

.hero__wrapper {
padding: 10vmin 2rem;
}

Görüntü alanı biriminin kullanımı vmin üst ve alt dolgu için, bu değer için “görünüm genişliği” veya “görüntü yüksekliği”nden daha küçük olanın kullanılacağı anlamına gelir. Buradaki avantaj, kahramanın daha küçük görünüm alanlarının tüm ekranını kaplamamasını sağlamaya yardımcı olmaktır, bu da ek sayfa içeriği yokmuş gibi görünmesine neden olabilir. Bunun nedeni, bu durumda “görüntü genişliği”nin, “görüntüleme yüksekliği”ni kullanacağı ve daha büyük bir değer olacağı daha büyük, masaüstü görünüm pencerelerine kıyasla daha küçük bir değer yapacak şekilde kullanılmasıdır.

Geniş görünüm penceresi görünümünü tamamlamak için sarmalayıcıya iki konumlandırma değeri ekleyeceğiz:

.hero__wrapper {
align-items: center;
justify-content: center;
}

Neresi align-items dikey hizalama sağlar ve justify-content yatay hizalama sağlar.

Daha küçük görünümlerde, tek ayarlamamız, içeriğin SVG modeli üzerinde okunaklı kalmasını sağlamaktır. Kahraman #1’e benzer bir teknik kullanacağız:

.hero__wrapper {
z-index: 1;
}
.hero__content {
background-color: rgba(scale-color($primary, $lightness: 90%), 0.8);
border-radius: 8px;
}

• içerik için ikincil bir ızgara düzeni sağlamak için bir sarmalayıcının kullanılması header tasarım ögeleri
• ile otomatik genişlikte sütunların oluşturulması grid-template-columns
• kaldıraç vmin daha küçük görünüm alanlarındaki dolguyu en aza indirmek ve daha büyük görünüm alanları için artırmak için

Bonus: kullanımı clamp Daha küçük görünüm pencereleri için küçültmek amacıyla paragraf kopyasını görünüm alanı boyutuyla orantılı olarak küçültmek için.

Stephanie Eckles (@5t3ph)