Web geliştiricileri, Angular, React, Vue.js gibi bir çerçeve ile yeni bir şey yapmak zorunda olduklarında çerçevenin sınırlılıkları nedeniyle çok fazla seçenekleri olmaz. Ancak iş CSS hakkında konuşmaya gelince çok fazla seçenek ortaya çıkar. Ve sanırım nedenini biliyorum! CSS'de standart yoktur. Genellikle bir şeyi yapmanın birçok yolu vardır ve itiraf etmeliyim ki bu sinir bozucu olabilir çünkü yaptığınız şeyin iyi mi kötü mü olduğunu bile bilmiyorsunuz. Ve bugünkü makalem size CSS'de yapabileceğiniz en basit şeylerden birini sunuyorum: bir kutuya gölge eklemek. Açıkça söylemem gerekiyor ki benim yaptıklarım da bir standart değil. Mevcut tasarımları alıp sizlerde üzerinde oynama yaparak farklı etkiler oluşturabilirsiniz.

Sözleri çok uzatmadan CSS ile DIV'leri nasıl gölgelendireceğimize bakalım.

Örnek 1:

CSS Gölge Efekti Verme
CSS Gölge Efekti Verme

Kod:

<!-- CSS KODU --> <style>     body {         background: #ccc;         width: 800px;     }      .box h3 {         text-align: center;         position: relative;         top: 80px;     }      .box {         width: 70%;         height: 200px;         background: #FFF;         margin: 40px auto;     }      /*gölge efekti*/     .effect1 {         -webkit-box-shadow: 0 10px 6px -6px #777;         -moz-box-shadow: 0 10px 6px -6px #777;         box-shadow: 0 10px 6px -6px #777;     } </style>  <!-- HTML KODU --> <div class="box effect1">     <h3>YazılımKodlama</h3> </div>

Örnek 2:

CSS DIV Gölge Efekti
CSS DIV Gölge Efekti

Kod:

<!-- CSS KODU --> <style>     body {         background: #ccc;         width: 800px;     }      .box h3 {         text-align: center;         position: relative;         top: 80px;     }      .box {         width: 70%;         height: 200px;         background: #FFF;         margin: 40px auto;     }      /*gölge efekti*/     .effect2 {         position: relative;     }      .effect2:before,     .effect2:after {         z-index: -1;         position: absolute;         content: "";         bottom: 15px;         left: 10px;         width: 50%;         top: 80%;         max-width: 300px;         background: #777;         -webkit-box-shadow: 0 15px 10px #777;         -moz-box-shadow: 0 15px 10px #777;         box-shadow: 0 15px 10px #777;         -webkit-transform: rotate(-3deg);         -moz-transform: rotate(-3deg);         -o-transform: rotate(-3deg);         -ms-transform: rotate(-3deg);         transform: rotate(-3deg);     }      .effect2:after {         -webkit-transform: rotate(3deg);         -moz-transform: rotate(3deg);         -o-transform: rotate(3deg);         -ms-transform: rotate(3deg);         transform: rotate(3deg);         right: 10px;         left: auto;     } </style>  <!-- HTML KODU --> <div class="box effect2">     <h3>YazılımKodlama</h3> </div>