HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS Eğitimi

CSS ANA SAYFA CSS'ye Giriş CSS Sözdizimi CSS Seçiciler CSS Nasıl Yapılır CSS Yorumları CSS Renkleri
Colors RGB HEX HSL
CSS Arka Planları
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS Kenarlıkları
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS Marjları
Margins Margin Collapse
CSS Dolgusu CSS Yüksekliği/Genişliği CSS Kutu Modeli CSS Anahattı
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS Metni
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS Yazı Tipleri
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS Simgeleri CSS Bağlantıları CSS Listeleri CSS Tabloları
Table Borders Table Size Table Alignment Table Style Table Responsive
CSS Ekranı CSS Maksimum genişliği CSS Konumu CSS Z-endeksi CSS Taşması CSS Kayan Noktası
Float Clear Float Examples
CSS Satır içi blok CSS Hizalama CSS Birleştiriciler CSS Sözde sınıfı CSS Sözde öğesi CSS Opaklığı CSS Gezinme Çubuğu
Navbar Vertical Navbar Horizontal Navbar
CSS Açılır Listeleri CSS Resim Galerisi CSS Görüntü Sprite'ları CSS Attr Seçiciler CSS Formları CSS Sayaçları CSS Web Sitesi Düzeni CSS Birimleri CSS Özgüllüğü CSS !önemli CSS Matematik Fonksiyonları

Gelişmiş CSS

CSS Yuvarlak Köşeler CSS Kenarlık Resimleri CSS Arka Planları CSS Renkleri CSS Renk Anahtar Kelimeleri CSS Gradyanları
Linear Gradients Radial Gradients Conic Gradients
CSS Gölgeleri
Gölge Efektleri Kutu Gölge
CSS Metin Efektleri CSS Web Yazı Tipleri CSS 2D Dönüşümleri CSS 3D Dönüşümleri CSS Geçişleri CSS Animasyonları CSS Araç İpuçları CSS Stili Görüntüleri CSS Görüntü Yansıması CSS nesne uyumu CSS nesne konumu CSS Maskeleme CSS Düğmeleri CSS Sayfalandırma CSS Çoklu Sütunları CSS Kullanıcı Arayüzü CSS Değişkenleri
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
CSS Kutu Boyutlandırma CSS Medya Sorguları CSS MQ Örnekleri CSS Esnek Kutusu
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Duyarlı

RWD Tanıtımı RWD Görünümü RWD Izgara Görünümü RWD Medya Sorguları RWD Görüntüleri RWD Videoları RWD Çerçeveleri RWD Şablonları

CSS Izgarası

Izgara Girişi Izgara Konteyner Izgara Öğesi

CSS SASS'ı

SASS Eğitimi

CSS Örnekleri

CSS Şablonları CSS Örnekleri css sınavı CSS Alıştırmaları CSS Sertifikası

CSS Referansları

CSS Referansı CSS Seçiciler CSS Fonksiyonları CSS Referansı Sesli CSS Web Güvenli Yazı Tipleri CSS Canlandırılabilir CSS Birimleri CSS PX-EM Dönüştürücü CSS Renkleri CSS Renk Değerleri CSS Varsayılan Değerleri CSS Tarayıcı Desteği

CSS Kutu Gölgesi

❮ Öncesi Sonraki ❯

CSS kutu gölgesi Özellik

CSS box-shadowözelliği, bir öğeye bir veya daha fazla gölge uygulamak için kullanılır.

Bir Yatay ve Dikey Gölge Belirtin

En basit kullanımında, yalnızca yatay ve dikey bir gölge belirlersiniz. Gölgenin varsayılan rengi, geçerli metin rengidir.

Kutu gölgeli bir <div> öğesi

Örnek

Yatay ve dikey bir gölge belirleyin:

div {
  box-shadow: 10px 10px;
}

Gölge İçin Bir Renk Belirtin

Parametre color, gölgenin rengini tanımlar.

Gri kutu gölgeli bir <div> öğesi

Örnek

Gölge için bir renk belirtin:

div {
  box-shadow: 10px 10px grey;
}

Gölgeye Bulanıklık Efekti Ekleyin

Parametre blurbulanıklık yarıçapını tanımlar. Sayı ne kadar yüksek olursa, gölge o kadar bulanık olur.

5 piksel bulanık, gri kutu gölgeli bir <div> öğesi

Örnek

Gölgeye bir bulanıklık efekti ekleyin:

div {
  box-shadow: 10px 10px 5px grey;
}

Gölgenin Yayılma Yarıçapını Ayarlayın

Parametre spread, yayılma yarıçapını tanımlar. Pozitif bir değer gölgenin boyutunu artırır, negatif bir değer gölgenin boyutunu azaltır.

12 piksellik yayılma yarıçapına sahip, bulanık, gri bir kutu gölgesine sahip bir <div> öğesi

Örnek

Gölgenin yayılma yarıçapını ayarlayın:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

ek Parametreyi ayarla

Parametre inset, gölgeyi bir dış gölgeden (başlangıç) bir iç gölgeye değiştirir.

Bulanık, gri, iç kutu gölgesine sahip bir <div> öğesi

Örnek

İç metin parametresini ekleyin:

div {
  box-shadow: 10px 10px 5px grey inset;
}

Birden Çok Gölge Ekle

Bir öğenin birden çok gölgesi de olabilir:

Örnek

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

kartlar

box-shadowBu özelliği kağıt benzeri kartlar oluşturmak için de kullanabilirsiniz :

1

1 Ocak 2021

Norveç

Hardanger, Norveç

Örnek

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯