Arka planlar ve kenarlıklar

Bu derste, CSS arka planları ve kenarlıkları ile yapabileceğiniz 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şturmak için arka planlar ve kenarlıklar birçok sorunun cevabı olacaktı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ğinizi öğrenmek.

CSS'de arka planların stilini ayarlama

CSS'deki background özelliği, bu derste karşılaşacağımız bir dizi arka plan ilişkili niteliklerin kısaltmasıdır. Bir stil sayfasında karmaşık bir arka plan özelliği keşfederseniz, bu kadar çok değer aynı anda aktarılmaya çalışıldığında, sonradan okuması ve anlaması biraz zor gözükebilir.

.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ısayolun nasıl çalıştığına döneceğiz, ancak önce bireysel arka plan özelliklerine bakarak CSS'de arka planlarla yapabileceğiniz farklı şeylere bir göz atalım.

Arka plan renkleri

CSS background-color niteliğiyle herhangi bir öğeye ait arka plan rengini tanımlar. Nitelik geçerli olan her değeri kabul eder <color>. background-color, öğenin içerik 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.

Var olan renk<color> değerlerini kullanarak bunlarla oynayın.

Arka plan resimleri

background-image niteliği öğenin arka planında bir resmin görüntülenmesini sağlar. 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 belirleseniz, görüntü rengin üstünde görüntülenir. Yukarıdaki örnekte background-color niteliği ekleyip bir renk değeri tanımlayıp deneme yapn.

Arka plan tekrarını kontrol etme

background-repeat niteliği görüntünün fayans davranışını kontrol etmek için kullanılır. 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öreceksiniz. Ama siz diğer etkilerin neler olduğunu görebilmek için diğer değerleri deneyin.

Arka plan resmini boyutlandırma

Yukarıdaki örnekte, görüntülenmek istenilen öğenin boyutundan daha büyük olduğu için kırpılan bir resmimiz 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 kadar büyük yapar. 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 olabilir.

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örebilirsiniz.

Uygulayın.

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

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.

En yaygın background-position biri yatay ve biride dikey olan iki ayrı değer alır.

Aşağıdaki gibi anahtar kelimeler kullanabilirsiniz top ve right gibi(alabildiği diğer değerleri görmek için background-position sayfasına bakın):

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

ve 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ırabiliriniz, örneğin:

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

Son olarak, kutunun belirli kenarlarından bir mesafeyi belirtmek için 4 değerli bir sözdizimi de kullanabilirsiniz — 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 ayarlanır.

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

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 belirtebilirsiniz.

Bunun yaptığınızda, birbiriyle örtüşen arka plan görüntüleriyle karşılabilirsiniz. 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 dğ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 örnekte 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 yapın.

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ğinizi yapmayabilir. local değeri tanımlandığı öğeye sabitlenir ve öğenin içeriği kaydırıldığında(kendi içerisinde veya sayfayla birlikte) içerikle birlikte arka planda hareket ettirilir.

background-attachment niteliğine tanımlana bilecek bu üç değerin aralarındaki farkları görebilmeniz için size örnek bir sayfa hazırladık — 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öreceksiniz. Bu kısatanım, tüm farklı özellikleri aynı anda ayarlamanıza olanak tanır.

Birden çok arka plan kullanıyorsanız, ilk arka plan için tüm özellikleri belirlemeniz ve virgüle ayrıdıktan sonra, sonraki arka planınızı eklemeniz gerekir ve/veya nekadar arka plan koyacaksanız o kadar bunu tekrarlamalısınız. 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.
  • 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çileriniz için okunaklı olması için yeterli kontrastı sağladığınıza dikkat etmelisiniz. Ayrıca bir resim kullanmak istiyorsanız, metin de bu resmin üstüne yerleştirilecekse ve resim yüklenemezse metininizin okunaklı olmasını sağlayacak bir de background-color tanımlamalısınız.

Ekran okuyucular arka plan görüntülerini ayrıştıramaz, bu nedenle tamamen dekorasyon amaçlı olmalıdır; içeriğinizdeki ö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 ktumuzun boyutunu nasıl etkilediğini öğrenmiştirk. 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ğiniz ç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.

Rounding corners on a box is achieved by using the border-radius property and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases, you will only pass in one value, which will be used for both.

Ö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ık ve ardından farklı kılmak için sağ üst köşenin değerlerini değiştirdik. Köşeleri değiştirmek için değerlerle oynayabilirsiniz. border-radius'un kullanılabilir söz dizimleri hakkında daha fazla bilgi sahibi olabilmek için MDN sayfasına bakabilirsiniz.

Beçerilerinizi test edin!

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

Özet

Burada pek çok konuya değindik ve bir kutuya arka plan ve kanerlık eklemenin epeyce karmaşık olduğunu düşünebilirsiniz. Tanıttığımız niteliklerden herhangi biri hakkında daha fazla bilgi sahibi olmak istiyorsanız, farklı referans sayfalarını inceleyin. MDN'deki her sayfada, kendinizi test etmenizi ve bilginizi geliştimeniz için kullanabileceğiniz oldukça fazla kullanım örneği vardır

Bir sonraki derste, belgelerinizin Yazma Modunun CSS'inizle 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 elemanların boyutları
  9. Görseller, medya ve form öğeleri
  10. Tabloları şekillendirme
  11. CSS'de hata ayıklama
  12. CSS'inizi düzenleme