 |
| Prt Scr |
📷 📷 📷 📷 📷
Cara paling mudah untuk mendapatkan gambar kamera ialah dengan memuat turun atau copy/paste saja dari mana-mana sumber termasuk gambar di atas. Bagaimanapun tajuk post kali ini ialah hasilkan gambar kamera guna CSS.
Demo
HTML view
<div class="labu">
<div class="kamera"></div>
</div>
<style>
.labu {
height: 340px;
width: 100%;
position: relative;
background-color: transparent;
}
div.kamera:before, div.kamera:after {
display: block;
content: "";
position: absolute;
}
div.kamera {
width: 100%;
height: 100%;
background: linear-gradient(#b3b3b3 0vh, #999999 8vh, transparent 7vh) calc(50% - 17vh) 6.5vh/8vh 2.5vh no-repeat, radial-gradient(circle, #b3b3b3 0vh, #999999 1vh, transparent 1vh) calc(50% + 2vh) 5vh/2vh 2vh no-repeat, radial-gradient(circle, #b3b3b3 0vh, #999999 1vh, transparent 1vh) calc(50% + 5vh) 5vh/2vh 2vh no-repeat, radial-gradient(circle, #b3b3b3 0vh, #999999 1vh, transparent 1vh) calc(50% + 8vh) 5vh/2vh 2vh no-repeat, linear-gradient(#666666 0vh, #4d4d4d 4vh, transparent 20vh) calc(50% + 16vh) 4vh/10vh 5vh no-repeat, linear-gradient(155deg, #333333 3vh, transparent 3vh) calc(50% - 10vh) 3.5vh/6vh 2vh no-repeat, linear-gradient(#333333 4vh, #333333 20vh, transparent 20vh) calc(50% - 18vh) 3.5vh/6vh 2vh no-repeat, linear-gradient(155deg, transparent 3vh, transparent 3vh) calc(50% - 7vh) 2vh/6vh 6vh no-repeat, linear-gradient(135deg, transparent 2vh, transparent 2vh) calc(50% - 23vh) 4vh/4vh 4vh no-repeat, linear-gradient(transparent 4vh, transparent 20vh, transparent 20vh) calc(50% - 20vh) 0.5vh/20vh 5vh no-repeat, radial-gradient(circle, #333333 0vh, black 3vh, black 4.5vh, #f2f2f2 4.5vh, #f2f2f2 7vh, black 7vh, black 10vh, #b3b3b3 10vh, #cccccc 12vh, transparent 12vh) 50% 8vh/25vh 25vh no-repeat, radial-gradient(ellipse, transparent 1vh, #333333 1vh, #333333 2vh, transparent 2vh) calc(50% + 25vh) 10vh/6vh 4vh no-repeat, radial-gradient(ellipse, transparent 1vh, #333333 1vh, #333333 2vh, transparent 2vh) calc(50% - 25vh) 10vh/6vh 4vh no-repeat, linear-gradient(#333333 4vh, #1a1a1a 20vh, transparent 20vh) 50% 10vh/50vh 25vh no-repeat, radial-gradient(ellipse, white 4vh, #cccccc 34vh, transparent 28vh) 50% 3vh/50vh 29vh no-repeat;
}
</style>
<div class="kamera"></div>
</div>
<style>
.labu {
height: 340px;
width: 100%;
position: relative;
background-color: transparent;
}
div.kamera:before, div.kamera:after {
display: block;
content: "";
position: absolute;
}
div.kamera {
width: 100%;
height: 100%;
background: linear-gradient(#b3b3b3 0vh, #999999 8vh, transparent 7vh) calc(50% - 17vh) 6.5vh/8vh 2.5vh no-repeat, radial-gradient(circle, #b3b3b3 0vh, #999999 1vh, transparent 1vh) calc(50% + 2vh) 5vh/2vh 2vh no-repeat, radial-gradient(circle, #b3b3b3 0vh, #999999 1vh, transparent 1vh) calc(50% + 5vh) 5vh/2vh 2vh no-repeat, radial-gradient(circle, #b3b3b3 0vh, #999999 1vh, transparent 1vh) calc(50% + 8vh) 5vh/2vh 2vh no-repeat, linear-gradient(#666666 0vh, #4d4d4d 4vh, transparent 20vh) calc(50% + 16vh) 4vh/10vh 5vh no-repeat, linear-gradient(155deg, #333333 3vh, transparent 3vh) calc(50% - 10vh) 3.5vh/6vh 2vh no-repeat, linear-gradient(#333333 4vh, #333333 20vh, transparent 20vh) calc(50% - 18vh) 3.5vh/6vh 2vh no-repeat, linear-gradient(155deg, transparent 3vh, transparent 3vh) calc(50% - 7vh) 2vh/6vh 6vh no-repeat, linear-gradient(135deg, transparent 2vh, transparent 2vh) calc(50% - 23vh) 4vh/4vh 4vh no-repeat, linear-gradient(transparent 4vh, transparent 20vh, transparent 20vh) calc(50% - 20vh) 0.5vh/20vh 5vh no-repeat, radial-gradient(circle, #333333 0vh, black 3vh, black 4.5vh, #f2f2f2 4.5vh, #f2f2f2 7vh, black 7vh, black 10vh, #b3b3b3 10vh, #cccccc 12vh, transparent 12vh) 50% 8vh/25vh 25vh no-repeat, radial-gradient(ellipse, transparent 1vh, #333333 1vh, #333333 2vh, transparent 2vh) calc(50% + 25vh) 10vh/6vh 4vh no-repeat, radial-gradient(ellipse, transparent 1vh, #333333 1vh, #333333 2vh, transparent 2vh) calc(50% - 25vh) 10vh/6vh 4vh no-repeat, linear-gradient(#333333 4vh, #1a1a1a 20vh, transparent 20vh) 50% 10vh/50vh 25vh no-repeat, radial-gradient(ellipse, white 4vh, #cccccc 34vh, transparent 28vh) 50% 3vh/50vh 29vh no-repeat;
}
</style>
Demo dicontoh dari codepen
Ulasan