Teknik CSS ile yürütmek
Bir web sitesi tasarlıyorsanız, bir web sayfasında sabit bir arka plan resmi veya filigranın nasıl oluşturulacağını öğrenmek isteyebilirsiniz. Bu, oldukça uzun bir süredir çevrimiçi olan yaygın bir tasarım uygulamasıdır. Web tasarım çantasına sahip olmanın kullanışlı bir etkisi.
Bunu daha önce yapmadıysanız veya şanssız bir şekilde denediyseniz, süreç korkutucu görünebilir, ancak aslında hiç de zor değildir. Bu kısa eğitim ile, CSS kullanarak birkaç dakika içinde teknik uzmanlık için ihtiyacınız olan bilgileri alacaksınız.
Başlamak
Arka plan resimleri veya filigranlar (gerçekten sadece çok açık arka plan resimleri) basılı tasarımda bir geçmişe sahiptir. Belgelerin kopyalanmaması için uzun uzun filigranlar dahil edildi. Ayrıca, birçok el ilanı ve broşür, basılı parça için tasarımın bir parçası olarak geniş arka plan görüntüleri kullanır. Web tasarımı, basılı ve arka plan görüntüleri uzun ödünç alınmış stilleri bu ödünç stillerinden biridir.
Bu büyük arka plan görüntüleri aşağıdaki üç CSS stili özelliğini kullanarak kolayca yapılabilir:
- arka plan görüntüsü
- background-repeat
- background-attachment
- Arka plan boyutlu
Arka plan görüntüsü
Filigran olarak kullanılacak resmi tanımlamak için arka plan resmi kullanacaksınız. Bu stil, sitenizde bulunan, muhtemelen "resimler" adlı bir dizinde bulunan bir resmi yüklemek için bir dosya yolunu kullanır.
arkaplan resmi: url (/images/page-background.jpg);
Görüntünün kendisinin normal bir görüntüden daha açık veya daha şeffaf olması önemlidir. Bu, yarı saydam bir görüntünün metin, grafik ve web sayfasının diğer ana öğelerinin arkasında yer aldığı "filigran" görünümünü oluşturacaktır. Bu adım olmadan, arka plan resmi sayfanızdaki bilgilerle rekabet eder ve okumayı zorlaştırır.
Arka plan resmini Adobe Photoshop gibi herhangi bir düzenleme programında ayarlayabilirsiniz.
Arka plan tekrar
Arkaplan-tekrar özelliği daha sonra gelir. Görüntünüzün büyük bir filigran stili grafik olmasını istiyorsanız, bu görseli yalnızca bir kez görüntülemek için bu özelliği kullanırsınız.
arka plan tekrarı: tekrar etmeyin;
"Tekrarlama" özelliği olmadan, varsayılan, resmin sayfada tekrar tekrar tekrarlanacağıdır. Çoğu modern web sayfası tasarımında bu istenmeyen bir durumdur, bu nedenle bu tarz CSS'nizde önemli olarak görülmelidir.
Arka Plan-ataşman
Arka plan eki, birçok web tasarımcısının unutduğu bir özelliktir. "Sabit" özelliğini kullandığınızda, arka plan resminizi sabit tutar. Bu resmi sayfaya sabitlenmiş bir filigran haline getiren şey budur.
Bu mülkün varsayılan değeri "kaydır". Arka plan eki değeri belirtmezseniz, arka plan sayfanın geri kalanıyla birlikte ilerler.
arka plan eki: sabit;
Arka Plan-Size
Arka plan boyutu daha yeni bir CSS özelliğidir. Görüntülenmekte olan görüntüye bağlı olarak bir arka planın boyutunu ayarlamanıza olanak tanır. Bu, farklı cihazlarda farklı boyutlarda görüntülenecek duyarlı web siteleri için çok yararlıdır.
arka plan boyutu: kapak;
Bu özellik için kullanabileceğiniz iki yararlı değer şunlardır:
- Kapak - Arka planı tam genişlikte veya tam yükseklikte gösterecek şekilde ölçeklendirir. Bu, görüntünün bazı bölümlerinin ekranda görünmeyebileceği, ancak tüm alanın kaplanacağı anlamına gelir.
- İçer - Görüntüyü ölçeklendirir, böylece hem genişliğin hem de yüksekliğin stil oluşturduğu alanda gösterilir. Görüntü kesilmiyor, ancak olumsuz olan alan bölümleri görüntü tarafından kaplanamayabilir.
CSS'yi Sayfanıza Ekleme
Yukarıdaki özellikleri ve değerlerini anladıktan sonra, bu stilleri web sitenize ekleyebilirsiniz.
Tek sayfalık bir site oluşturuyorsanız, web sayfanızın HEAD'sine aşağıdakileri ekleyin. Çok sayfalı bir site oluşturuyorsanız ve harici bir sayfanın gücünden yararlanmak istiyorsanız bunu harici stil sayfasının CSS stillerine ekleyin.