CSS kullanarak görüntüleri stil özelliklerini ayarlamayı öğrenin.
Yuvarlak Görüntüler
Kullanım border-radius yuvarlak görüntüler oluşturmak için özellik:
Küçük resim Görüntüler
Kullan border küçük resimler oluşturmak için özellik.
Küçük Resim:
Örnek
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
< img src="paris.jpg"
alt="Paris" > Kendin dene " Link gibi Küçük Resim:
Örnek
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0
0 2px 1px rgba
(0, 140, 186, 0.5);
}
< a href="paris.jpg" >
< img src="paris.jpg" alt="Paris" >
< /a > Kendin dene " duyarlı Görüntüler
Duyarlı resimler otomatik ekranın boyutuna sığacak şekilde ayarlar.
etkisini görmek için tarayıcı penceresini yeniden boyutlandırma:
Eğer bir görüntü o kadar varsa, aşağı inin, ama asla orijinal boyutundan daha büyük olacak şekilde büyütmek istiyorsanız, aşağıdakileri ekleyin:
İpucu: Lütfen içinde Duyarlı Web Tasarımı hakkında daha fazlasını okuyun CSS RWD Eğitimi .
Görüntü Metin
Bir resimdeki metni konumlandırmak için:
Örnek
Kendin dene:
Sol Üst » Sağ Üst» Alt Sol » Sağ Alt» Merkezli »Polaroid Görüntüleri / Kartlar
Hardanger, Norveç Troll 'dil
Norveç'te Kuzey Işıkları
Örnek
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,
0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
} Kendin dene " Görüntü Filtreler
CSS filter özelliği görsel efektler ekler (like blur and saturation) bir elemana.
Not: Filtre özelliği Internet Explorer, Kenar 12 veya Safari 5.1 ve önceki desteklenmez.
Örnek
Siyah ve beyaz tüm görüntülerin rengini değiştirme (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}İpucu: Lütfen git CSS filtre Referans CSS filtreleri hakkında daha fazla bilgi edinmek için.
Duyarlı Resim Galerisi
CSS resim galerileri oluşturmak için kullanılabilir. Bu örnek, farklı ekran boyutlarında görüntüleri yeniden düzenlemek için medya sorguları kullanın. etkisini görmek için tarayıcı penceresini yeniden boyutlandırma:
Örnek
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and
(max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px
0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
} Kendin dene " İpucu: Lütfen içinde Duyarlı Web Tasarımı hakkında daha fazlasını okuyun CSS RWD Eğitimi .
Görüntü Modal (Advanced)
Bu CSS ve JavaScript nasıl birlikte çalışabileceklerini göstermek için bir örnektir.
İlk olarak, kalıcı bir pencere oluşturmak için CSS kullanabilirsiniz (dialog box) ve varsayılan olarak gizlemek.
Ardından, kalıcı pencere göstermek ve Bir kullanıcı resmi tıkladığında, modal içindeki görüntü görüntülemek için bir JavaScript kullanabilirsiniz:
Örnek
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it
inside the modal - use its "alt" text as a caption
var img =
document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick =
function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span =
document.getElementsByClassName("close")[0];
// When the user clicks
on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
} Kendin dene "