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:
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!-- 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:
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!-- 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> |
Örnek 3:
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!-- 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*/ .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); } </style> <!-- HTML KODU --> <div class="box effect3"> <h3>YazılımKodlama</h3> </div> |
Örnek 4:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!-- 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*/ .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); } </style> <!-- HTML KODU --> <div class="box effect4"> <h3>YazılımKodlama</h3> </div> |
Örnek 5:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!-- 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*/ .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; } </style> <!-- HTML KODU --> <div class="box effect5"> <h3>YazılımKodlama</h3> </div> |
Örnek 6:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tasarım Kodlama</title> <style> *{ 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; } </style> </head> <body> <div class="sayfa"> <div class="kutu"> <img src="https://picsum.photos/300/400" alt=""> <div class="cerceve"></div> </div> </div> </body> </html> |
Örnek 7:
