Arşiv Ocak 8, 2022

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 VermeKod: 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; } YazılımKodlama Örnek 2:CSS DIV Gölge EfektiKod: 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; } YazılımKodlama Örnek 3:CSS DIV Gölge ÖrnekleriKod: 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*/ .effect3 { position: relative; } .effect3:before { 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); } YazılımKodlama Örnek 4: 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*/ .effect4 { position: relative; } .effect4:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; 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); } YazılımKodlama Örnek 5:CSS DIV Gölge Örnekleri 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*/ .effect5 { position: relative; } .effect5:before, .effect5:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 35px 20px #777; -moz-box-shadow: 0 35px 20px #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } .effect5:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; } YazılımKodlama Örnek 6:css kutu gölge örnekleri Tasarım Kodlama *{ box-sizing: border-box; } body{ margin:0; } .sayfa{ width: 600px; margin:200px; display: flex; gap:100px; } .kutu{ width: 300px; border:2px solid rgba(20,20,20,0.4); position: relative; box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; } .kutu img{ width: 100%; display: block; } .kutu .cerceve{ position: absolute; top:0; margin:5%; width: 90%; height: 92.5%; border:dashed 3px #fff; } Örnek 7: