Stilleri Görüntüler ve Stillerde Görüntüler Kullanın
Birçok kişi, metni ayarlamak, yazı tipini, rengi, boyutu ve daha fazlasını değiştirmek için CSS kullanır. Ancak çoğu insanın çoğu zaman unutduğu bir şey de CSS'yi de görüntülerle birlikte kullanabilmenizdir.
Görüntüyü Değiştirmek
CSS, görüntünün sayfada nasıl görüntülendiğini ayarlamanıza izin verir. Bu, sayfalarınızı tutarlı tutmak için gerçekten yararlı olabilir. Tüm resimlerdeki stilleri ayarlayarak, resimleriniz için standart bir görünüm oluşturursunuz. Yapabileceğiniz bazı şeyler:
- Görüntülere bir kenarlık ekleyin veya anahat çizin
- Bağ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
- Resim üzerine geldiğinde stilleri değiştir
Resminizi sınırlamak, başlamak için harika bir yerdir. Ancak, yalnızca sınırdan fazlasını düşünmelisiniz - görüntünüzün tüm kenarı hakkında düşünün ve kenar boşluklarını ve dolguyu da ayarlayın. İnce siyah kenarlıklı bir görüntü güzel görünüyor, ancak kenarlık ile görüntü arasında bir miktar dolgu eklemek bile daha iyi görünebilir.
img {
kenarlık: 1px katı siyah;
dolgu malzemesi: 5px;
}
Mümkün olduğunda, dekoratif olmayan görüntüleri her zaman birbirine bağlamak iyi bir fikirdir. Ancak, bunu yaptığınızda, çoğu tarayıcının resmin etrafında renkli bir kenarlık eklediğini unutmayın. Kenarlığı değiştirmek için yukarıdaki kodu kullanırsanız bile, bağlantıyı da sınırlamadan kaldırmaz veya değiştirmezseniz, bu bağlantı geçersiz olacaktır. Bunu yapmak için bağlı görüntüler etrafındaki kenarlığı kaldırmak veya değiştirmek için bir CSS alt kuralı kullanmalısınız:
img> a {
kenarlık: yok;
}
Ayrıca, resimlerinizin yüksekliğini ve genişliğini değiştirmek veya ayarlamak için CSS'yi kullanabilirsiniz. İndirme hızları nedeniyle görüntü boyutlarını ayarlamak için tarayıcıyı kullanmak iyi bir fikir olmasa da, görüntülerin yeniden boyutlandırılmasında daha iyi görünmektedir, böylece hala iyi görünüyorlar. Ve CSS ile, görüntülerinizi standart genişlik veya yükseklik olarak ayarlayabilir ya da boyutları kabana göre olacak şekilde ayarlayabilirsiniz.
Görüntüleri yeniden boyutlandırdığınızda en iyi sonuçları elde etmeyi unutmayın, sadece bir boyutu yeniden boyutlandırmalısınız - yükseklik veya genişlik. Bu, görüntünün en boy oranını koruduğunu ve dolayısıyla garip görünmeyeceğini ortaya çıkaracaktır. Diğer değeri otomatik olarak ayarlayın veya tarayıcıya en boy oranını tutarlı tutmasını söyleyin.
img {
genişlik:% 50;
yükseklik: otomatik;
}
CSS3, yeni özelliklere nesneler-fit ve nesne-pozisyonu ile bu problem için bir çözüm sunuyor. Bu özelliklerle tam görüntü yüksekliğini ve genişliğini ve en boy oranının nasıl ele alınacağını tanımlayabileceksiniz. Bu, görüntünüzün etrafında postalama efektleri oluşturabilir veya görüntüyü gereken boyuta sığacak şekilde kırpabilirsiniz.
CSS3 nesne sığdırma ve nesne konumu özellikleri henüz geniş çapta desteklenmezken, çoğu modern tarayıcıda görüntülerinizi değiştirmek için kullanabileceğiniz diğer CSS3 özellikleri vardır. Alt gölgeler, yuvarlatılmış köşeler ve döndürme, eğriltme veya görüntülerinizi hareket ettirme gibi dönüşümler, çoğu modern tarayıcıda şu anda çalışır. Daha sonra, resimlerin üzerine geldiğinde veya tıklandığında veya bir süre sonra değiştirilebilmesi için CSS geçişlerini kullanabilirsiniz.
Görüntüleri Arka Plan Olarak Kullanma
CSS, resimlerinizle süslü arka planlar oluşturmanızı kolaylaştırır.
Tüm sayfaya veya belirli bir öğeye arka plan ekleyebilirsiniz. Arka plan resmi özelliğini içeren sayfada bir arka plan resmi oluşturmak çok kolaydır:
vücut {
arkaplan-görüntü: url (background.jpg);
}
Arka planı tek bir öğeye yerleştirmek için gövde seçiciyi sayfadaki belirli bir öğeye değiştirin.
Resimlerle yapabileceğiniz bir diğer eğlenceli şey de, sayfanın geri kalanıyla kayan bir filigran gibi bir arka plan resmi oluşturur. Stil arka plan ekini kullanın: sabit; arka plan resminizle birlikte. Arka planlarınız için diğer seçenekler, arka plan tekrar özelliğini kullanarak yatay veya dikey olarak döşemeyi içerir.
Arka plan tekrarı yaz: repeat-x; görüntüyü yatay olarak döşemek ve arka plan tekrarlamak için: tekrarla-y; dikey olarak döşemek için. Arka plan resminizi arkaplan konumu özelliğiyle konumlandırabilirsiniz.
Ve CSS3, arka planlarınız için daha fazla stil ekler. Resimlerinizi herhangi bir boyut arka plana sığacak şekilde genişletebilir veya arka plan resmini pencere boyutuyla ölçeklendirebilirsiniz . Konumu değiştirebilir ve ardından arka plan resmini 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 resmi katmanlandırabilmenizdir.
HTML5 Stil Görüntülerine Yardımcı Olur
HTML5'teki FIGURE öğesi, belge içinde tek başına durabilen herhangi bir resmin çevresine yerleştirilmelidir. Bunu düşünmenin bir yolu, görüntünün bir ekte görünmesi, o zaman ŞEKİL öğesinin içinde bulunmasıdır. Ardından, resimlerinize stil eklemek için bu öğeyi ve FIGCAPTION öğesini kullanabilirsiniz.