Daha önceki yazıda CSS box-shadow özelliğini nasıl kullanacağınız anlatmıştım. Bu yazıda kart tasarımlarınızda yada benzer çalışmaları yaparken basit ve karmaşık gölgeler ile ilgili örnekler bulacaksınız.
CSS box-shadow Örnekleri
Örnek :
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 | <!-- CSS KODU --> <style> body { background: #83D6DE; 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>TasarımKodlama</h3> </div> |
Örnek:
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.45) 0px 25px 30px -5px; } .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 :
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 | <!-- CSS KODU --> <style> body { background: #3D8EB9; width: 800px; } .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25)); box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3); margin: 40px auto; border-radius: 20px; } /*gölge efekti*/ .effect9 { background: linear-gradient(135deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25)); } </style> <!-- HTML KODU --> <div class="box effect9"> <h3>TasarımKodlama</h3> </div> |
Örnek:
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 | <!-- CSS KODU --> <style> body { background: #3D8EB9; width: 800px; } .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3); margin: 40px auto; border-radius: 20px; } </style> <!-- HTML KODU --> <div class="box"> <h3>TasarımKodlama</h3> </div> |
Örnek:
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 | <!-- CSS KODU --> <style> body { background: #3D8EB9; width: 800px; } .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25)); box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3); margin: 40px auto; border-radius: 20px; } /*gölge efekti*/ .effect10 { background: linear-gradient(-45deg, rgba(0,0,0,0.22), rgba(255,255,255,0.25)); } </style> <!-- HTML KODU --> <div class="box effect10"> <h3>TasarımKodlama</h3> </div> |
Örnek :
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 | <!-- CSS KODU --> <style> body { background: #83D6DE; width: 800px; } .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; background: #FFF; margin: 40px auto; } /*gölge efekti*/ .effect8 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect8:before, .effect8:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 10px; bottom: 10px; left: 0; right: 0; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect8:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } </style> <!-- HTML KODU --> <div class="box effect8"> <h3>TasarımKodlama</h3> </div> |
Örnek :
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 | <!-- CSS KODU --> <style> body { background: #83D6DE; width: 800px; } .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; background: #FFF; margin: 40px auto; } /*gölge efekti*/ .effect7 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect7:before, .effect7:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 0; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect7:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } </style> <!-- HTML KODU --> <div class="box effect7"> <h3>TasarımKodlama</h3> </div> |
Örnek :
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 | <!-- CSS KODU --> <style> body { background: #83D6DE; width: 800px; } .box h3 { text-align: center; position: relative; top: 80px; } .box { width: 70%; height: 200px; background: #FFF; margin: 40px auto; } /*gölge efekti*/ .effect6 { position: relative; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .effect6:before, .effect6:after { content: ""; position: absolute; z-index: -1; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); top: 50%; bottom: 0; left: 10px; right: 10px; -moz-border-radius: 100px / 10px; border-radius: 100px / 10px; } .effect6:after { right: 10px; left: auto; -webkit-transform: skew(8deg) rotate(3deg); -moz-transform: skew(8deg) rotate(3deg); -ms-transform: skew(8deg) rotate(3deg); -o-transform: skew(8deg) rotate(3deg); transform: skew(8deg) rotate(3deg); } </style> <!-- HTML KODU --> <div class="box effect6"> <h3>TasarımKodlama</h3> </div> |
Örnek :
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: #83D6DE; 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 :
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: #83D6DE; 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 :
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: #83D6DE; 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:
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 | <!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; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1))); } .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> |
1 Yorum