Arka planlar ve kenarlıklar

Bu derste, CSS arka planları ve kenarlıkları ile yapabileceğin bazı yapıcı şeylere bir göz atacağız. Degradeler, arka plan resimleri ve yuvarlatılmış köşeler eklemek gibi bir çok tasarımı oluşturabilmek için arka planlar ve kenarlıklar birçok seçenek sunacaktır.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: Kutuların arka planını ve kenarlığını nasıl biçimlendireceğini öğrenmek.

CSS'de arka planların stilini ayarlama

CSS'deki background niteliği, bu derste karşılaşacağın birçok arka planla ilişkili niteliğin kısaltmasıdır. Bir stil sayfasında karmaşık bir arka plan niteliğine aşağıdaki gibi birçok değerin aktrıldığını görürsen, sonradan okunması ve anlaşılmasının ne kadar zor olduğunu da farkedersin.

.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 eğitim setinde daha sonra kısa tanımın nasıl çalıştığına döneceğiz, ancak önce bireysel arka plan özelliklerine bakarak CSS'de arka planlarla yapabileceğin farklı tasarım özelliklerine bir göz atalım.

Arka plan renkleri

CSS background-color niteliğiyle herhangi bir öğeye arka plan rengini tanımlarız. Nitelik geçerli olan her <color> değerini kabul eder. background-color, öğenin içeriğinin ve dolgusunun altını boyar.

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

Geçerli olan <color> değerlerini kullanarak bunlarla oynayın.

Arka plan resimleri

background-image niteliği öğenin arka planında bir resmin görüntülenmesini istediğimizde kullanırız. Aşağıdaki örnekte, iki kutumuz var — biri kutudan daha büyük bir arka plan resmine, diğerinde küçük bir yıldız resmi var.

Bu örnek, arka plan resimleri hakkında iki şeyi gösterir. Varsayılan olarak, büyük görüntü kutuya sığacak şekilde küçültülmez, bu nedenle sadece küçük bir köşesini görürüz, küçük görüntü ise kutuyu dolduracak şekilde döşenir. Bu durumda, gerçek görüntü sadece tek bir yıldızdır.

Bir arka plan görüntüsüne ek olarak bir arka plan rengi belirlesen, görüntü rengin üstünde görüntülenir. Yukarıdaki örnekte background-color niteliğine renk bildiriminde bulun.

Arka plan tekrarını kontrol etme

background-repeat niteliği; görüntünün boyutu, kutunun içerik alanından küçük olması durumunda, görüntüyü kutu içerik alanına doldurmak için yatay ve dikey olarak tekrarını kontrol etmemizi sağlar. Mevcut değerler şunlardır:

  • no-repeat — arka planın tekrarlanmasını durdur.
  • repeat-x — yatay olarak tekrarla.
  • repeat-y — dikey olarak tekrarla.
  • repeat — varsayılan değer; her iki yönde de tekrarlayın.

Bu değerleri aşağıdaki örnekte deneyin. Biz değerini no-repeat olarak ayarladık, bu yüzden bir tane yıldız göreceksin. Ama diğer etkilerin neler olduğunu görebilmek için diğer değerleri de dene.

Arka plan resmini boyutlandırma

Yukarıdaki örnekte; görüntülenmek istenilen resmin boyutu, öğenin boyutundan daha büyük olduğu için kırpılan bir görüntümüz var. Bu durumda, görüntüyü arka plana sığacak şekilde boyutlandırmak için uzunluk veya yüzde değeri alabilen background-size niteliğini kullanabiliriz.

Ayrıca anahtar kelimeleri de kullanabiliriz:

  • cover — tarayıcı, resmi en boy oranını korurken kutu alanını tamamen kaplaycak şekilde boyutlandırır. Bu durumda, görüntünün bir kısmı muhtemelen kutunun dışında kalacaktır.
  • contain — tarayıcı, resmi kutunun içine sığacak şekilde boyutlandıracaktır. Bu durumda, görüntünün en boy oranı kutununkinden farklıysa görüntünün iki yanında veya üstünde ve altında boşluklar oluşabilir.

Aşağıdaki örnekte, yukarıdaki örnekten daha büyük bir resim kullandım ve kutunun içinde boyutlandırmak için uzunluk birimlerini kullandım. Bunun görüntüyü bozduğunu görebilirsin.

Uygula.

  • Arka planın boyutunu değiştirmek için kullanılan uzunluk birimlerini değiştir.
  • Uzunluk birimlerini sil ve  background-size: cover veya background-size: contain tanımlamalarını yap.
  • Resmin görüntülemek istediğin kutudan küçükse, görüntüyü tekrarlamak için background-repeat niteliğinin değerini değiştir.

Arka plan resmini konumlandırma

background-position niteliği, arka plan görüntüsünün uygulandığı kutuya göre görüntülendiği konumu seçmemize yarar. Bu, kutunun sol üst köşesinden başlayan ve kutunun yatay (x) ve dikey (y) eksenler boyunca konumlandırıldığı bir koordinat sistemi kullanır.

Note: Varsayılan olarak background-position'ın başlangıç değeri(0,0) dır.

background-position yatay ve dikey olarak iki ayrı değer alır.

top ve right gibi anahtar kelimeler kullanabilirsin(alabildiği tüm değerleri görmek için background-position sayfasına bak):

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

Uzunluk ve yüzdeler:

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

Anahtar kelimeleri uzunluklar veya yüzdelerle de karıştırabilirsin:

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

Son olarak, kutunun belli bir konumundan bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsin — bu durumda uzunluk birimi, ondan önceki değerden bir sapmadır. Dolayısıyla, aşağıdaki CSS'de arka planı üstten 20piksel ve sağdan 10piksel sapmayla 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..

Note: background-position is a shorthand for background-position-x and background-position-y, which allow you to set the different axis position values individually.

Degrade arka planlar

Bir gradyan — bir arka plan için kullanıldığında — tıpkı bir görüntü gibi davranır ve ayrıca  background-image niteliği kullanılarak tanımlanır.

<gradient>  veri türü için MDN sayfasında farklı gradyan türleri ve bunlara yapabilceğin şeyler hakkında daha fazla bilgi edinebilirsin. Gradyanlarla oynamanın öğlenceli bir yolu, bağlantıdaki gibi web'de birçok CSS Gradyan oluşturucudan birini kullanmaktır.bir degrade oluşturabilir ve ardından onu oluşturan kaynak kodunu kopyalayıp projende kullanabilirsin.

Aşağıdaki örnekte farklı renk geçişlerini deneyin. Sırasıyla ilk kutuda tüm kutu boyunca gerilmiş doğrusal bir gradyan ve diğer kutuda tekrarlayan belirli bir boyuta sahip radyal bir gradyan var.

Birden çok arka plan görüntüsü

Birden çok arka plan görüntüsüne sahip olmak da mümkündür — background-image niteliğinde her birini virgülle ayırarak tek bir komutla birden çok değeri belirtebilirsin.

Bunun yaptığında, birbiriyle örtüşen arka plan görüntüleriyle karşılabilirsin. Arka planlar, yığının altında en son listelenen arka plan görüntüsüyle katmanlanır ve önceki her görüntü, kodda onu izleyen görüntünün üstüne yığılır.

Not: Degradeler, normal arka plan görüntüleriyle uyumlu bir şekilde karıştırılabilir

Diğer background-* nitelikleride background-image gibi virgülle ayrılmış değerlere sahip olabilirler:

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 özelliklerdeki aynı konumdaki değerlele eşleşecektir. Örneğin yukarıdaki image1'in background-repeat değeri no-repeat olacaktır. Ancak, farklı özelliklerin farklı sayıda değeri olduğunda ne olur? Cevap, daha az sayıdaki değerin döneceğidir — yukarıdaki örnekte dört arka plan görüntüsü vardır, ancak yalnızca iki background-position değeri vardır. İlk iki konum değeri ilk iki resme uygulancak, ardından tekrar geri dönecek — image3'e ilk konum değeri image4'de de ikinci konum değeri verilecektir.

Hadi oynayalım. Aşağıdaki örneğe iki resim ekledim. Yığınlama sırasını göstermek için, listede hangi arka plan görüntüsünün ilk sırada olduğunu değiştirmeyi deneyin veya konumu, boyutu veya tekrarlama değerleri üzerinde oynamalar yapmayı dene.

Arka plan sabitleme

Arka planlar için kullanabileceğimiz başka bir seçenek de, öğenin içeriğinin kaydırıldığında arka planın nasıl davranacağını belirlemektir. Bu davranışa imkan tanıyan background-attachment niteliği aşağıdaki belirtilen değerler kullanılarak kontrol edilir.

  • scroll: Arka plan tanımlandığı öğeye değilde, sayfaya sabitlenir. Bu yüzden sayfa kaydırılırsa hareket eder. Öğenin içeriğinin kaydırılması arka planın hareket etmesini sağlamaz.
  • fixed: Bir öğenin arka planının, sayfa veya öğe içeriği kaydırıldığında kaymaması için görünüm alanına sabitlenmesine neden olur. Ekrandaki arka plan daima aynı konumda kalacaktır.
  • local: Bu değer daha sonra eklendi(Yanlızca Internet Explorer 9+'da desteklenir. Diğerleri IE4+'da desteklenir). Çünkü scroll değeri oldukça kafa karıştırıcıdır ve çoğu durumda istediğini yapmayabilir. local değeri tanımlandığı öğeye sabitlenir ve öğenin içeriği kaydırıldığında(kutu içerisinde veya sayfayla birlikte) içerikle birlikte arka planda hareket eder.

background-attachment niteliğine tanımlanabilecek bu üç değerin aralarındaki farkları görebilmen için size örnek bir sayfa dım — background-attachment.html (ayrıca kaynak koduda burada).

Arka plan tanımı için kısatanım kullanımı

Bu dersin başında bahsettiğim gibi, genellikle background niteliği kullanılarak belirtilen arka planları göreceksin. Bu kısatanım, tüm farklı özellikleri aynı anda ayarlamana olanak tanır.

Birden çok arka plan kullanıyorsan, ilk arka plan için tüm özellikleri belirlemen ve virgülle ayırdıktan sonra, sonraki arka planını eklemen gerekir ve/veya nekadar arka plan koyacaksan o kadar bunu tekrarlamalısın. Aşağıdaki örnekte bir boyut ve konuma sahip bir gradyan, ardından no-repeat değerine sahip bir görüntü ve en altta bir renk var.

Arka plan kısatanım değerlerini yazarken uyulması gereken birkaç kural vardır, örneğin

  • background-color, yalnızca son virgülden sonra tanımlanabilir. İlk belirtilen konum en üstte blunur.
  • background-size değeri, sadece background-position değerinden sonra '/' karakteriyle ayırarak tanımlanabilir.

background tüm detaylarını görebilmek için MDN sayfasına bir göz atın.

Arka planla erişilebilirlikle ilgili hususlar

Bir arka plan görüntüsünün veya renginin üzerine metin yerleştirirken, metnin ziyaretçilerin için okunaklı olması için yeterli kontrastı sağladığına dikkat etmelisin. Ayrıca bir resim kullanmak istiyorsan, metin de bu resmin üstüne yerleştirilecekse ve resim yüklenemezse metininin okunaklı olmasını sağlayacak bir de background-color tanımlamalısın.

Ekran okuyucular arka plan görüntülerini ayrıştıramaz, bu nedenle tamamen dekorasyon amaçlı olmalıdır; içeriğindeki önemli tüm içerikler HTML sayfasının bir parçası olmalı ve arka planda oluşturulmamalıdır.

Kenarlıklar

Kutu Modeli hakkında bilgi edinirken, kenarların kutumuzun boyutunu nasıl etkilediğini öğrenmiştik. Bu derste kenarlıkları kreatif bir şekilde nasıl kullanacağımıza bakacağız. Tipik olarak, CSS ile bir öğeye kenarlıklar eklediğimizde, kenarlığın rengini, genişliğini ve stilini bir CSS satırında tanımlayan kısatanım özelliğini kullanırız.

Aşağıdaki border ile bir kutunun dört kenarı için kenarlık belirleyebiliriz.

.box { 
  border: 1px solid black; 
} 

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

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

Bu kısatanımların bireysel nitelikleride böyle olacaktır:

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

Ve daha detaylı tanımlama için:

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

Not: Bu üst, sağ, alt ve sol kenarlık nitelikleri, belgenin yazma moduyla eşleştirilmiş olan mantıksal niteliklere de sahiptir. (Örn. Soldan sağa, sağdan sola veya yukarıdan aşağıya). Bunları, farklı metin yönleri'ni ele alan bir sonraki derste işleyeceğiz.

Kenarlıklar için kullanabileceğin çeşitli stiller vardır. Aşağıdaki örnekte kutunun 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 stilini, genişliğini ve rengini değiştirin.

Yuvarlatılmış köşeler

border-radius, yuvarlatılmış köşelere sahip kutular oluşturabilmek için bir seferde tüm köşelere tanımlama yapabilmek için kullanırız. Ayrıca ayrı ayrı köşelere detaylı bir tanımlama yapmak için kullanabileceğimiz daha farklı niteliklerde mevcuttur. Niteliklere değer olarak verebileceğimiz bir iki yöntememiz vardır. İlk yöntem; bir değer olarak iki adet uzunluk veya yüzde değeri girebiliriz, birinci değer yatay yarıçapını ve ikinci değeri ise dikey yarıçapını tanımlar. Çoğu durumda kullanacağımız diğer yöntem ise; her iki yarıçap için de kullanılacak tek bir değer girebiliriz.

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

.box { 
  border-radius: 10px; 
} 

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

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

Aşağıdaki örnekte dört köşeyi de ayarladım ve ardından farklı kılmak için sağ üst köşenin değerlerini değiştirdim. Köşeleri değiştirmek için değerlerle oynayabilirsin. border-radius'un kullanılabilir söz dizimleri hakkında daha fazla bilgi sahibi olabilmek için MDN sayfasına bakabilirsin.

Beçerilerini test et!

Bu derste çok şey ele aldık, ancak en önemli bilgileri hatırlıyor musun? Devem etmeden önce bu bilgileri iyi öğrendiğini doğrulamak için bazı tesler hazırladım — Becerilerini test edin: Arka Planlar ve Kenarlıklar.

Özet

Burada pek çok konuya değindik. Bir kutuya arka plan ve kanerlık eklemenin karmaşık olduğunu düşünebilirsin. Anlattımğım niteliklerden herhangi biri hakkında daha fazla bilgi sahibi olmak istiyorsan, farklı referans sayfalarını incele. MDN'deki her sayfada, kendini test etmen ve bilgini geliştimen için kullanabileceğin oldukça fazla kullanım örneği vardır.

Bir sonraki derste, belgelerinin Yazma Modunun CSS'inle nasıl etkileşime girdiğini öğreneceğiz. Metin soldan sağa akmadığında ne olur? 

Bu kısımda

  1. Kaynak sırası ve miras
  2. CSS seçicileri
  3. Kutu modeli
  4. Arka planlar ve kenarlıklar
  5. Farklı metin yönleri kullanma
  6. Taşan içerik
  7. Değerler ve birimler
  8. CSS'de öğelerin boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'ini düzenleme