koddla

Yazılımcıları bilgi ile güçlendirir.

Uygulama – CSS’de süslü antetli kağıt oluşturma

Antetli kağıda mektup yazmak doğru bir izlenim bırakmak için iyi bir başlangıç ​​olabilir. Bu değerlendirmede, böyle bir görünüme ulaşmak için çevrimiçi bir şablon oluşturmanızı isteyeceğiz.

Başlangıç ​​noktası

Bu değerlendirmeyi başlatmak için şunları yapmalısınız:

  • HTML ve CSS dosyalarının yerel bir kopyasını oluşturun ve bu dosyaları aynı dizinde index.html ve style.css olarak kaydedin.
  • Tepealt ve logo dosyalarını kod dosyalarınızla aynı dizine kaydedin.

Proje tanıtımı

Antetli kağıt şablonu oluşturmak için gereken dosyalara sahipsiniz. Bu dosyaları bir araya getirmeniz yeterli. Bunu elde etmek için ise yapmanız gerekenler aşağıda:

ana mektup

  • CSS’yi HTML’ye uygulayın.
  • Mektuba bir arka plan bildirimi ekleyin:
    • Tepe resmini mektubun en üstüne sabitleyin
    • Alt resmi mektubun alt kısmına sabitleyin
    • Mektuba biraz doku veren önceki arka planların her ikisinin de üstüne yarı saydam bir gradyan ekleyin. Sağ üst ve alt kısımlara yakınken biraz koyu olsun, ancak merkezin büyük bir kısmı için tamamen şeffaf yapın.
  • Önceki bildirimi desteklemeyen tarayıcılar için bir geri dönüş olarak, yalnızca tepe resmini mektubun en üstüne ekleyen başka bir arka plan bildirimi ekleyin.
  • Mektuba beyaz bir arka plan rengi ekleyin.
  • Mektuba, renk şemasının geri kalanıyla uyumlu bir renkte 1 mm üst ve alt düz kenarlıklar ekleyin.
  • <h1> öğesine arka plan resmi olarak logo ekleyin.
  • Hafif bir gölge vermek için logoya bir filtre ekleyin.
  • Şimdi filtreyi yorum haline dönüştürün ve alt gölgeyi, yuvarlak görüntünün şeklini izleyen farklı (biraz daha çapraz tarayıcı uyumlu) bir şekilde uygulayın.

İpuçları ve püf noktaları

  • Kodunuzu yazarken önce eski tarayıcılar için bildirimin yedek sürümünü, ardından yalnızca daha yeni tarayıcılarda çalışan sürümü eklediğinizi unutmayın. Daha eski tarayıcılar ilk bildirimi uygulayacak ve ikincisini yok sayacak, oysa daha yeni tarayıcılar ilkinin üzerine ikincisini etkin kılacaktır.
  • Dilerseniz değerlendirme için kendi grafiklerinizi oluşturmaktan çekinmeyin.

Örnek

Aşağıdaki ekran görüntüsü, bitmiş tasarımın nasıl görünebileceğinin bir örneğini göstermektedir:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back to top