Arka planlar ve Kenarlıklar

Bu yazıda, CSS arka planları ve kenarlıkları ile yapabileceğiniz bazı yaratıcı şeylere göz atacağız. Gradyan eklemekten, resimler ve yuvarlatılmış köşelere, arka planlar ve kenarlıklar CSS’deki birçok stil sorusunun yanıtıdır.

CSS’de arka planı stillendirme

CSS background özelliği bu yazıda karşılaşacağımız bir dizi arka plan özelliği için kısayol oluşturur. Bir stil sayfasında karmaşık bir background tanımı gördüyseniz, aynı anda birçok değer aktarılabileceğinden dolayı, anlamak biraz zor olabilir.

.box {
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
  url(big-star.png) center no-repeat, rebeccapurple;
}

Bu yazıda daha sonra kısayolların nasıl çalıştığına döneceğiz, ancak önce arka plan özelliklerine tek tek bakarak CSS’de arka planlarla yapabileceğiniz farklı şeylere bir göz atalım.

Arka plan renkleri

background-color CSS özelliği herhangi bir öğeye ait arka plan rengini tanımlar. Geçerli herhangi bir renk değerini alabilir. background-color, öğenin içeriğinin ve dolgu kutusunun altındaki bölümü etkiler.

Aşağıdaki örnekte, kutuya, bir başlığa ve bir <span> öğesine arka plan rengi eklemek için çeşitli renk değerleri kullandık.

Mevcut herhangi bir <color> değerini kullanarak bunlarla oynayın.

.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
span {
  background-color: rgba(255,255,255,.5);
}

<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
</div>

Arka plan resimleri

background-image niteliği bir öğenin arka planında bir resmin görüntülenmesini sağlar. Aşağıdaki örnekte iki kutumuz var – birinin arka plan görüntüsü kutudan daha büyük (balonlar.jpg), diğerinde tek bir yıldızın küçük bir görüntüsü var (yıldız.png).

Bu örnek, arka plan görüntüleri hakkında iki şeyi gösterecek. Varsayılan olarak, büyük görüntüler kutuya sığacak şekilde küçültülmez. Bu nedenle resmin yalnızca küçük bir köşesini görürüz. Küçük görüntüler ise kutuyu dolduracak şekilde döşenir.

.a {
  background-image: url(balloons.jpg);
}

.b {
  background-image: url(star.png);
}

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

Arka plan görüntüsüne ek olarak bir de arka plan rengi belirtirseniz görüntü rengin üstünde görüntülenir. Bunu çalışırken görmek için yukarıdaki örneğe background-color özelliği eklemeyi deneyin .

Arka plan tekrarını kontrol etme

background-repeat özelliği görüntülerin tekrarlama davranışını kontrol etmek için kullanılır. Kullanılabilir değerler şunlardır:

• no-repeat — arka planın tamamen tekrarlamasını durdurur.
• repeat-x – yatay olarak tekrarlar.
• repeat-y – dikey olarak tekrarlar.
• repeat– varsayılan; her iki yönde de tekrarlar.

Aşağıdaki örnekte bu değerleri deneyin. no-repeat değeri ile yalnızca bir yıldız görmeyi sağlayabiliriz. Etkilerinin ne olduğunu görmek için farklı değerleri kendiniz deneyin – repeat-x ve repeat-y.

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
}

<div class="box"></div>

Arka plan resmini boyutlandırma

İlk arka plan görüntüleri örnekte kullanılan resim, balon.jpg, arka plan elemanından daha büyük olması nedeniyle kırpılmıştı. Görüntünün sadece bir kısmını görmüştük. Görüntüyü arka plana sığacak şekilde boyutlandırmak istersek background-size özelliği ile uzunluk veya yüzde değerleri kullanabiliriz.

Aşağıdaki anahtar kelimeleri de kullanabiliriz:

• cover— tarayıcı, resmi en boy oranını korurken kutu alanını tamamen kaplayacak kadar büyütecektir. Bu durumda, görüntünün bir kısmının kutunun dışında kalması muhtemeldir.
• contain— tarayıcı, resmi kutunun içine sığacak şekilde boyutlandırır. Bu durumda, görüntünün en boy oranı kutununkinden farklıysa görüntünün her iki tarafında veya üstünde ve altında boşluklar olabilir.

Aşağıdaki örnekte, balon.jpg‘yi kutunun içinde boyutlandırmak için uzunluk birimleriyle birlikte kullandık. Bu yaptığımızın görüntüyü bozduğunu görebilirsiniz.

Bu örneği bilgisayarınıza kopyalayarak aşağıdaki değişiklikleri deneyin:

• Arka planın boyutunu değiştirmek için kullanılan uzunluk birimlerini değiştirin.
• Uzunluk birimlerini kaldırın ve background-size: cover veya background-size:contain. kullandığınızda ne olduğunu görün 
• Resminiz kutudan daha küçükse resmi tekrarlamak için background-repeat değerini değiştirin.

.box {
  background-image: url(balloons.jpg);
  background-repeat: no-repeat;
  background-size: 100px 10em;
}

<div class="box"></div>

Arka plan görüntüsünü konumlandırma

background-position ile arka plan görüntüsünün göründüğü konumunu ayarlayabiliriz. Bunun için kutunun sol üst köşesinin (0,0) olduğu ve kutunun yatay (x) ve dikey (y) eksenler boyunca konumlandığı bir koordinat sistemi kullanır .

Not: Varsayılan background-position değeri (0,0)‘dır.

background-position iki ayrı değer alır – yatay bir değer ve ardından da dikey bir değer. Bu değerler için top ve right gibi anahtar sözcükler de kullanılabilir :

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}

Tabiki uzunluklar ve yüzdeler de kullanılır:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

Anahtar sözcük değerlerini uzunluklar veya yüzdelerle de karıştırabilirsiniz. Örneğin:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px top;
}

Son olarak, kutunun belirli kenarlarından bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsiniz – bu durumda uzunluk birimi, kendisinden önceki değerden uzaklığı tanımlar. Bu nedenle, aşağıdaki CSS’de arka planı 20 piksel üstten ve 10 piksel sağdan konumlandırıyoruz:

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
} 

Bu değerlerle oynamak ve yıldızı kutunun içinde hareket ettirmek için aşağıdaki örneği kullanın.

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 120px 1em;
}

<div class="box"></div>

Not: background-position özelliği background-position-x ve background-position-y için bir kısaltmadır. Farklı eksen konum değerlerini aynı anda ayarlamanıza olanak tanır.

Gradyan arka planlar

Gradyan – arka plan için kullanıldığında – tıpkı bir görüntü gibi davranır. Ayrıca background-image özelliği kullanılarak da ayarlanabilir.

<gradient> veri türü için MDN sayfasında farklı gradyan türleri ve bunlarla yapabileceğiniz şeyler hakkında daha fazla bilgi bulabilirsiniz. Gradyanlarla oynamanın eğlenceli bir yolu, web’de bulunan birçok CSS Gradyan Oluşturucudan birini kullanmaktır. Örneğin cssgradient ile bir gradyan oluşturabilir, ardından bunu oluşturan kaynak kodunu kopyalayıp yapıştırabilirsiniz.

Aşağıdaki örnekte bazı farklı gradyanlar deneyeceğiz. İlk kutuda, tüm kutuya yayılan doğrusal bir gradyan, ikinci kutuda ise, belirli bir boyutu olan, dolayısıyla tekrar eden bir radyal gradyan var.

.a {
  background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
}

.b {
  background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%);
  background-size: 100px 50px;
}

<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>

Birden çok arka plan resmi

Birden çok arka plan görüntüsü kullanmak da mümkündür. background-image özellik değerinde birden çok değer belirtebilirsiniz. Bu durumda her birini virgülle ayırmalısınız.

Bunu yaptığınızda, birbiriyle örtüşen arka plan resimleriyle karşılaşabilirsiniz. Arka planlar, son yazılan arka plan görüntüsü en altta olacak şekilde konumlanır. Böylece önceki her görüntü kodda onu takip edenin üstüne yığılacaktır.

Not: Gradyanlar, normal arka plan resimleriyle de beraber kullanılabilir.

Diğer background-* özellikleri de aynı şekilde virgülle ayrılmış değerlere sahip olabilir:

background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

Farklı özelliklerin her bir değeri diğer özelliklerde aynı konumdaki değerlerle eşleşecektir. Örneğin, yukarıda image1‘in background-repeat değeri no-repeat olacaktır. Ancak, farklı özelliklerin farklı sayıda değerleri olduğunda ne olur? Cevap, daha az sayıda değerin döngüye girmesidir – yukarıdaki örnekte dört arka plan görüntüsü var, ancak yalnızca iki background-position değeri bulunuyor. İlk iki konum değeri ilk iki görüntüye uygulanır, daha sonra tekrar baştan başlanır – image3‘e ilk konum değeri verilecek ve image4‘e ikinci konum değeri atanacaktır.

Aşağıdaki örneğe iki resim ekledik. Görüntülenme sırasını göstermek için listede ilk gelen arka plan görüntüsünü değiştirmeyi deneyin. Veya konumu, boyutu veya tekrar değerlerini değiştirmek için diğer özelliklerle oynayın.

.box {
  background-image: url(star.png), url(big-star.png);
}

<div class="wrapper">
  <div class="box"></div>
</div>

Arka plan eki

Arka planlar için elimizdeki diğer bir seçenek, içerik kaydırıldığında nasıl kaydırılacağını belirlemektir. background-attachment özelliği aşağıdaki değerler ile kontrol edilir:

• scroll: sayfa kaydırıldığında öğenin arka planının kaydırılmasına neden olur. Öğe içeriği kaydırılırsa arka plan hareket etmez. Gerçekte, arka plan sayfada aynı konuma sabitlenir, böylece sayfa kaydırılırken kayar.
• fixed: bir öğenin arka planının görünüm alanına sabitlenmesine neden olur, böylece sayfa veya öğe içeriği kaydırıldığında kaymaz. Ekranda her zaman aynı konumda kalacaktır.
• local: arka planı ayarlandığı öğeye sabitler, bu nedenle öğeyi kaydırdığınızda arka plan onunla birlikte kayar.

Arka plan kısayol özelliğini kullanma

Bu yazının başında bahsettiğimiz gibi, genellikle background özelliğini kullanılarak belirtilen özellikleri kısayol olarak yazarız. Bu kısayol, tüm farklı özellikleri aynı anda ayarlamanıza olanak tanır.

Birden fazla arka plan kullanıyorsanız, ilk arka plan için tüm özellikleri belirtmeniz ve ardından bir sonraki arka planınızı virgülden sonra eklemeniz gerekir. Aşağıdaki örnekte, boyutu ve konumu olan bir gradyan, ardından konumu no-repeat olan bir görüntü arka planı ve ardından bir renk bulunuyor.

Arka plan görüntüsü kısayol değerleri yazarken uyulması gereken birkaç kural vardır, örneğin:

• background-color ancak son virgülden sonra belirtilebilir.
• background-size değeri yalnızca background-position değerinden hemen sonra ve ‘/’ karakteriyle ayrılarak dahil edilebilir eklenir. Örneğin şöyle: center/80%.

.box {
  background:   
    linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
url(big-star.png) center no-repeat, 
    rebeccapurple;
}

Arka planlarla ilgili erişilebilirlik konuları

Bir arka plan resminin veya renginin üzerine metin yerleştirirken, metnin ziyaretçileriniz tarafından okunabilmesi için yeterli kontrasta sahip olmanıza özen göstermelisiniz. Bir resim belirtiyorsanız ve o resmin üstüne metin yerleştirilecekse, resim yüklenmediğinde metnin okunaklı olmasını sağlayacak bir background-color da belirtmelisiniz .

Ekran okuyucular arka plan resimlerini ayrıştıramaz; bu nedenle, tamamen dekorasyon amaçlı olmalıdırlar. Herhangi bir önemli içerik, HTML sayfasının bir parçası olmalı ve arka planda yer almamalıdır.

Kenarlıklar

Kutu Modelini öğrenirken, çerçevelerin kutumuzun boyutunu nasıl etkilediğini keşfettik. Bu yazıda kenarlıkların yaratıcı bir şekilde nasıl kullanılacağına bakacağız. Tipik olarak, CSS ile bir öğeye kenarlıklar eklediğimizde, bir CSS satırında kenarlığın rengini, kalınlığını ve stilini ayarlayan bir kısayol özelliği kullanırız.

Bir kutunun dört kenarı için de aşağıdakilerle bir kenar oluşturabiliriz, border:

.box {
  border: 1px solid black;
} 

Veya kutunun bir kenarını hedefleyebiliriz, örneğin:

.box {
  border-top: 1px solid black;
} 

Bu kısayol için bireysel özellikler şöyle olacaktır:

.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
} 

Uzun yolla aşağıdaki gibi yapacaktık:

.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
} 

Not: Bu üst, sağ, alt ve sol kenarlık özellikleri aynı zamanda belgenin yazma moduyla ilgili mantıksal özelliklere de sahiptir (örneğin soldan sağa veya sağdan sola veya yukarıdan aşağıya metin). Bunları, farklı metin yönlerinin ele alınmasını kapsayan bir sonraki yazıda keşfedeceğiz.

Kenarlıklar için kullanabileceğiniz çeşitli stiller bulunur. Aşağıdaki örnekte kutumuzun dört kenarı için farklı bir kenarlık stili kullandık. Kenarlıkların nasıl çalıştığını görmek için kenarlık stili, kalınlığı ve rengiyle oynayın.

.box {
  background-color: #567895;
  border: 5px solid #0b385f;
  border-bottom-style: dashed;
  color: #fff;
}

h2 {
  border-top: 2px dotted rebeccapurple;
  border-bottom: 1em double rgb(24, 163, 78);
}

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

Yuvarlatılmış köşeler

Bir kutudaki köşeleri yuvarlama border-radius veya hangi köşeyi ayarlamak istiyorsak o köşeye ait uzun yol özelliği kullanılarak yapılır. Değer olarak iki adet uzunluk veya yüzde değeri kullanılır; birinci değer yatay yarıçapı, ikinci değer ise dikey yarıçapı tanımlar. Çoğu durumda, her ikisi için de kullanılmasını istediğiniz tek bir değer yazarsınız.

Örneğin, bir kutunun dört köşesinin de 10 piksel yarıçapında olmasını sağlamak için:

.box {
  border-radius: 10px;
} 

Veya sağ üst köşenin yatay yarıçapının 1em ve dikey yarıçapın %10 olmasını sağlamak için:

.box {
  border-top-right-radius: 1em 10%;
} 

Aşağıdaki örnekte dört köşeyi de ayarladık ve ardından sağ üst köşenin değerlerini farklı olması için değiştirdik. 

.box {
  border: 10px solid rebeccapurple;
  border-radius: 1em;
  border-top-right-radius: 10% 30%;
}

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

Becerilerinizi test edin!

Bu makalede çok şey ele aldık, ancak en önemli bilgiyi hatırlayabiliyor musunuz? Devam etmeden önce bu bilgileri öğrendiğinizden emin olun.

Özet

Bu yazıda oldukça fazla şey ele aldık. Bir kutuya arka plan ekleme veya kenarlık tanımlama gibi yöntemleri öğrendik.

Bir sonraki yazıda, sayfalarımızın Yazma Modunun CSS’nizle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmazsa ne olur?