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.

İlişkili olduğu konular : ders

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:

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

konular

Okumaya devam et!
Sonraki Yazı: Uygulama – CSS ile havalı bir kutu

Bu değerlendirmede, göz alıcı bir görünüme sahip kutular oluşturma konusunda biraz daha pratik yapacaksınız.

Farklı metin yönlerini işleme

Şimdiye kadar CSS öğrenmemizde karşılaştığımız birçok özellik ve değer, ekranımızın fiziksel boyutlarına bağlandı.

Özellik seçiciler

HTML çalışmanızdan bildiğiniz gibi, öğeler kendileri hakkında daha fazla ayrıntı veren niteliklere sahip olabilirler.

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.

Tablo Stilleri

HTML tablosu tasarlamak dünyadaki en göz alıcı iş olmasa da bazen bunu yapmak zorunda kalırız.

Yorum Gönderin

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

koddla
Tema Mundana by WowThemes.net.