HTML Resme Gölge Verme

HTML'de resme gölge eklemek için yine CSS kullanabilirsiniz. Resme gölge vermek için box-shadow özelliğini kullanabilirsiniz. box-shadow ile elemanın etrafına gölge ekleyebilirsiniz. Bu özellik, resimlerin veya diğer HTML öğelerinin daha üç boyutlu ve dikkat çekici görünmesini sağlar. İşte nasıl yapılacağının bir örneği:

CSS dosyalarını ayrı gösterebilirsiniz Ben Konumuz HTML olduğu içiz HTML içinde style özelliği vereceğim.

HTML Dosyası Oluşturma:

HTML dosyanıza <img> etiketiyle resmi ekleyin. Aşağıdaki gibi temel bir HTML şablonu oluşturabilirsiniz:

Şimdi, resme gölge eklemek Etiketin style özelliği oluşturun ve box-shadow özelliğini kullanın. Aşağıda örnek olarak tüm resimlere gölge eklemeyi göstereceğim:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Resme Gölge Örneği</title>
</head>
<body>
        <img src="istanbul.jpg" 
        style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8)" alt="Resmin Açıklaması">
</body>
</html>


css text-shadow

Yukarıdaki CSS kodu, tüm resimlere hafif bir gölge ekleyecektir. box-shadow özelliği, dört değer alır:

  1. X-offset: Gölgenin yatay düzlemde ne kadar kaydırılacağı (mesafe)
  2. Y-offset: Gölgenin dikey düzlemde ne kadar kaydırılacağı (mesafe)
  3. Bulanıklık: Gölgenin ne kadar bulanık olacağını belirler (genellikle 0 ile 100 arasında bir değer alır)
  4. Renk: Gölgenin rengini belirler (rgba() veya hex renk kodu kullanabilirsiniz)
  5. Gölgenin yayılma yarıçapını tanımlayın:5. değer girilseydi gölgenin yayılma yarıçapı olacaktı.

Bu örnekte, resme 4px yatay ve 8px dikey düzlemde bir gölge ekliyoruz. Gölgenin bulanıklığı 8px ve rengi siyah tonunda, ancak yarı saydam bir gölge için rgba(0, 0, 0, 0.8) değerini kullanarak daha az saydamlık sağladık.

Gölge eklemek için kullanacağınız değerleri istediğiniz gibi değiştirebilirsiniz. Böylece resminizin üzerine istediğiniz şekilde gölge ekleyebilirsiniz.

örnek 2:


<img src="resim/istanbul.jpg" 
style="box-shadow: 5px 10px 18px orange" alt="css text-shadow">


Çıktı:

css box-shadow


örnek 3:Birden fazla renk Gölge oluşturalım


<img src="resim/istanbul.jpg" 
style="box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green" 
alt="css text-shadow">


Çıktı:

css box-shadow

Örnek 4:


<img src="istanbul.jpg" 
style="box-shadow: 10px 20px 11px 0px rgba(0,0,0,0.75)" 
alt="css box-shadow">   

Çıktı:

css box-shadow
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

8574

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.