CSS görsel tarzı ayarlama

CSS ile görsel tarzı nasıl ayarlanır öğrendiğinizi öğrenin.

yuvarlak köşeli görsel

kullanarak border-radius öznitelik oluşturarak yuvarlak köşeli görsel:

Örnek

yuvarlak köşeli görsel:

img {
  border-radius: 8px;
}

Kişisel olarak deneyin

Örnek

dairesel görsel:

img {
  border-radius: 50%;
}

Kişisel olarak deneyin

küçük resim görseli

kullanarak border öznitelik oluşturarak küçük resim.

Küçük resim:

Coffee

Örnek

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Kişisel olarak deneyin

bağlantı küçük resmi olarak:

Örnek

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Kişisel olarak deneyin

Uyumlu görsel

Uyumlu görseller otomatik olarak ekran boyutuna uyum sağlar.

Görseli gerektiğinde küçültmek istiyorsanız, ancak orijinal boyuttan büyük büyütme önlemek istiyorsanız, aşağıdaki kodu ekleyin:

Örnek

img {
  max-width: 100%;
  height: auto;
}

Kişisel olarak deneyin

İpucu:Bizim CSS RWD Eğitimi uyumlu Web tasarımı hakkında daha fazla bilgi edinin.

Ortalama görsel

Görseli ortalamak için, sol ve sağ dış marjları şu şekilde ayarlayın: auto ve bunu blok element olarak ayarlayın:

Coffee

Örnek

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Kişisel olarak deneyin

Polaroid resimleri / kartlar

Tulip

sarı lily

Tulip

kırmızı lily

Örnek

div.polaroid {
  width: 80%;
  background-color: beyaz;
  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;
}

Kişisel olarak deneyin

Şeffaf resim

opacity Bu özelliğin değer aralığı 0.0 - 1.0'tır. Değerler ne kadar düşükse, o kadar şeffaftır:

Tulip

opacity 0.2

Tulip

opacity 0.5

Tulip

opacity 1 (varsayılan)

Örnek

img {
  opacity: 0.5;
}

Kişisel olarak deneyin

Resim Metni

Resim içinde metin konumlandırma nasıl yapılır:

Örnek

CodeW3C.com Logo
Alt Sol
Üst Sol
Üst Sağ
Alt Sağ
Merkezlenmiş

Kendi başınıza deneyin:

Sol Üst Sağ Üst Sol Alt Sağ Alt Orta

Resim filtreleri

CSS filter Bu özellik, elementlere görsel etkiler (örneğin, bulanıklaşma ve doygunluk) ekler.

Dikkat:Internet Explorer veya Edge 12, filter özelliğini desteklememektedir.

Örnek

Tüm resimlerin renklerini siyah-beyaz'a (100% gri) değiştirin:

img {
  filter: grayscale(100%);
}

Kişisel olarak deneyin

İpucu:Sitemizi ziyaret edin: CSS Filtre Referans KılavuzuCSS filtreleri hakkında daha fazla bilgi edinmek için burayı ziyaret edin.

Resim üzerindeyken ekleme

Fare üzerindeyken ekleme etkisini oluşturun:

Örnek 1

Kademele giren metin:

Avatar
Hello World

Kişisel olarak deneyin

Örnek 2

Kademele giren kutu:

Avatar
Bill

Kişisel olarak deneyin

Örnek 3

Yukarıdan gir

Avatar
Hello World

Kişisel olarak deneyin

Örnek 4

Aşağıdan gir

Avatar
Hello World

Kişisel olarak deneyin

Örnek 5

Soldan gir

Avatar
Hello World

Kişisel olarak deneyin

Örnek 6

Sağdan gir

Avatar
Hello World

Kişisel olarak deneyin

Resmi döndür

Resmin üzerine fareyi sürükleyin:

Spor Parkı

Örnek

img:hover {
  transform: scaleX(-1);
}

Kişisel olarak deneyin

Yanıtlayıcı Resim Kütüphanesi

CSS ile uyarlanabilir resim kütüphaneleri oluşturabiliriz.

Bu örnek, farklı ekran boyutları için resimleri yeniden sıralamak için medya sorgusu kullanır. Tarayıcı pencerenizin boyutunu ayarlayarak etkileri görmek için tıklayın:

Örnek

.duyarli {}}
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}
@media only screen and (max-width: 700px){
  .duyarli {}}
    width: 49.99999%;
    margin: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .duyarli {}}
    width: 100%;
  }
}

Kişisel olarak deneyin

İpucu:Lütfen bizim CSS RWD Eğitimi Cevaplı Web Tasarımı hakkında daha fazla bilgi edinin.

Görsel Modül (Image Modal)

Bu, CSS ve JavaScript'in nasıl birlikte çalıştığına dair bir örnek.

Öncelikle, CSS ile modül penceresini (diyalog) oluşturun ve varsayılan olarak gizli tutun.

Kullanıcı resmini tıkladığında, JavaScript kullanarak modül penceresini göster ve modül içine resmi göster:

Yeşil Sahne

Kişisel olarak deneyin