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>

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

X-offset: Gölgenin yatay düzlemde ne kadar kaydırılacağı (mesafe)
Y-offset: Gölgenin dikey düzlemde ne kadar kaydırılacağı (mesafe)
Bulanıklık: Gölgenin ne kadar bulanık olacağını belirler (genellikle 0 ile 100 arasında bir değer alır)
Renk: Gölgenin rengini belirler (rgba() veya hex renk kodu kullanabilirsiniz)
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ı:

ö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ı:

Örnek 4:


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

Çıktı:

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.

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