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.htmlvestyle.cssolarak kaydedin. - Tepe, alt 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.
Amblem
<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:
