Becerilerinizi test edin: Arka Planlar ve Kenarlıklar

Bu beceri testinin amacı, önceki derste öğrendiğiniz becerileri kullanarak, CSS arka planları ve kenarlıklar üzerinde çalışmanızı sağlamaktır.

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ancak kodu indirip ve görevler üzerinde çalışmak için CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir araç kullanılması yararlı olabilir.

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki Değerlendirme ve daha fazla yardım bölümüne bakın.

Arka Planlar ve Kenarlıklar 1

Bu görevde, sayfa başlığına bir arka plan, kenarlık ve bazı basit stil eklemenizi istiyoruz:

  1. Kutuya 10 piksellik yuvarlatılmış köşeleri olan 5 piksellik siyah düz bir kenarlık verin.
  2. Bir arka plan resmi ekleyin (balloons.jpg'yi kullanın) ve kutuyu kaplayacak şekillde boyutlandırın.
  3. <h2> yarı saydam bir siyah arka plan rengi verin ve metni beyaz yapın.

Bitmiş örnek aşağıdaki gibi görünmelidir.

Images shows a box with a photograph background, rounded border and white text on a semi-transparent black background.

Birmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenleyin:

Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin kaynak kodunu indirin.

Arka Planlar ve Kenarlıklar 2

Bu görevde, dekoratif bir kutuya arka plan resimleri, kenarlık ve diğer bazı stilleri eklemenizi istiyoruz:

  • Kutuya 5 piksellik açık mavi bir kenarlık verin ve sol üst köşesyi 20 piksel ve sağ alt köşeyi 40 piksel yuvarlayın.
  • Arka plan resmi olarak, solda ortalanmış bir yıldız, sağda tekrar eden bir yıldız deseni oluşturun. Resim olarak star.png kullanın.
  • Başlık metninin resmin üzerine gelmediğinden ve ortalanmış olduğundan emin olun — bunları yapabilmek için önceki derslerde kullandığınız teknikleri kullanmanız gerekecektir.

İşin sonunda örneğiniz aşağıdaki resimdeki gibi gözükmelidir:

Images shows a box with a blue border rounded at the top left and bottom right corners. On the left of the text is a single star, on the right 3 stars.

Örneğinizi oluşturabilimeniz için aşağıdaki canlı kodu düzenleyin:

Kendi düzenleyicinizde veya çevrimiçi bir düzenleyicide çalışmak için bu görevin Kaynak kodunu indirin.

Değerlendirme veya daha fazla yardım

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler:
    • "Flexbox düzen 1 beceri testi için istenen değerlendirme" gibi açıklayıcı bir başlık.
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.