Birçok kişi kullanır CSS metni ayarlamak, yazı tipini, rengi, boyutu ve daha fazlasını değiştirmek için. Ancak birçok insanın sıklıkla unuttuğu bir şey, CSS'yi resimlerle de kullanabilmenizdir.
Resmin Kendisini Değiştirme
CSS, görüntünün sayfada nasıl görüntüleneceğini ayarlamanıza olanak tanır. Bu, sayfalarınızı tutarlı tutmak için gerçekten yararlı olabilir. Tüm resimlerde stiller ayarlayarak, resimleriniz için standart bir görünüm yaratırsınız. Yapabileceğiniz şeylerden bazıları:
- Görüntülerin etrafına kenarlık veya anahat ekleyin
- Bağlantılı görüntülerin etrafındaki renkli kenarlığı kaldırın
- Görüntülerin genişliğini ve/veya yüksekliğini ayarlama
- Alt gölge ekle
- Resmi döndür
- Stilleri değiştir görüntü üzerine gelindiğinde
Resminize bir kenarlık vermek, başlamak için harika bir yerdir. Ancak sadece kenarlıktan daha fazlasını düşünmelisiniz - resminizin tüm kenarını düşünün ve kenar boşluklarını ayarlayın ve dolgu malzemesi aynı zamanda. İnce siyah kenarlıklı bir görüntü güzel görünür, ancak kenarlık ile görüntü arasına biraz dolgu eklemek daha da iyi görünebilir.
Bu iyi bir fikir her zaman dekoratif olmayan görselleri bağla, mümkün olunca. Ancak bunu yaptığınızda, çoğu tarayıcının görüntünün etrafına renkli bir kenarlık eklediğini unutmayın. Kenarlığı değiştirmek için yukarıdaki kodu kullansanız bile, bağlantıdaki kenarlığı kaldırmadığınız veya değiştirmediğiniz sürece bağlantı bunu geçersiz kılacaktır. Bunu yapmak için, bağlantılı görüntülerin etrafındaki kenarlığı kaldırmak veya değiştirmek için bir CSS alt kuralı kullanmalısınız:
Resimlerinizin yüksekliğini ve genişliğini değiştirmek veya ayarlamak için CSS'yi de kullanabilirsiniz. İndirme hızları nedeniyle görüntü boyutlarını ayarlamak için tarayıcıyı kullanmak harika bir fikir olmasa da, iyi görünmeleri için görüntüleri yeniden boyutlandırmada çok daha iyi hale geliyorlar. Ve CSS ile, resimlerinizi standart bir genişlik veya yükseklik olacak şekilde ayarlayabilir veya hatta boyutları konteynere göre ayarlayabilirsiniz.
Resimleri yeniden boyutlandırdığınızda, en iyi sonuçları elde etmek için yalnızca bir boyutu yeniden boyutlandırmanız gerektiğini unutmayın - yükseklik veya genişlik. Bu, görüntünün en boy oranını korumasını sağlar ve bu nedenle garip görünmez. Diğer değeri şuna ayarlayın: Oto veya tarayıcıya en boy oranını tutarlı tutmasını söylemek için bırakın.
CSS3, yeni özelliklerle bu soruna bir çözüm sunuyor nesne-uyum ve nesne konumu. Bu özelliklerle, tam görüntü yüksekliğini ve genişliğini ve en-boy oranının nasıl ele alınması gerektiğini tanımlayabileceksiniz. Bu, resimlerinizin etrafında mektup kutusu efektleri oluşturabilir veya resmi gereken boyuta sığdırmak için kırpabilir.
Çoğu tarayıcıda desteklenen ve resimlerinizi değiştirmek için kullanabileceğiniz başka CSS3 özellikleri de vardır. Alt gölgeler, yuvarlatılmış köşeler ve resimlerinizi döndürmek, eğmek veya taşımak için yapılan dönüşümler gibi şeylerin tümü şu anda çoğu modern tarayıcıda çalışıyor. Ardından, fareyle üzerine gelindiğinde veya tıklandığında veya bir süre sonra görüntülerin değişmesini sağlamak için CSS geçişlerini kullanabilirsiniz.
Görüntüleri Arka Plan Olarak Kullanma
CSS, resimlerinizle süslü arka planlar oluşturmayı kolaylaştırır. Yapabilirsin tüm sayfaya arka plan ekleyin veya sadece belirli bir öğeye. ile sayfada bir arka plan resmi oluşturmak kolaydır. arka plan görüntüsü Emlak:
Değiştir vücut arka planı yalnızca bir öğeye yerleştirmek için seçiciyi sayfadaki belirli bir öğeye getirin.
Resimlerle yapabileceğiniz bir başka eğlenceli şey de, filigran gibi sayfanın geri kalanıyla birlikte kaymayan bir arka plan resmi oluşturmaktır. Sen sadece stili kullan arka plan eki: sabit; arka plan resminizle birlikte. Arka planlarınız için diğer seçenekler arasında, arka planları kullanarak onları yalnızca yatay veya dikey olarak döşemek yer alır. arka plan-tekrar Emlak. Yazmak arka plan-tekrar: tekrar-x; görüntüyü yatay olarak döşemek ve arka plan-tekrar: tekrar-y; dikey olarak döşemek için. Ve arka plan resminizi arka plan konumu Emlak.
Ve CSS3, arka planlarınız için de daha fazla stil ekler. Görüntülerinizi herhangi bir boyuttaki arka plana sığacak şekilde uzatabilir veya arka plan görüntüsünü pencere boyutuna göre ölçeklenecek şekilde ayarlayabilirsiniz. Konumu değiştirebilir ve ardından arka plan görüntüsünü kırpabilirsiniz. Ancak CSS3 ile ilgili en iyi şeylerden biri, daha da karmaşık efektler oluşturmak için artık birden çok arka plan görüntüsünü katmanlayabilmenizdir.
HTML5 Görüntülere Stil Vermeye Yardımcı Olur
ŞEKİL HTML5'teki öğe, belge içinde tek başına durabilen tüm resimlerin etrafına yerleştirilmelidir. Bunu düşünmenin bir yolu, resim bir ekte görünebilirse, o zaman resmin içinde olması gerektiğidir. ŞEKİL öğe. Daha sonra bu öğeyi kullanabilir ve ŞEKİL resimlerinize stiller eklemek için öğe.