CSS CAMERA

Image of Output

HTML:

	<!DOCTYPE html>
	<html>

	<head>
	<title>Page Title</title>
	</head>

	<body>

	<div class="all">

	<div id="flash_light"></div>
	<div class="button"></div>
	<div class="cam_out">
	<div class="cam_inn">
	<div class="lense"></div>
	</div>
	</div>

	</div>
	</body>

	</html>

view raw Css_Camer.html hosted with ❤ by GitHub

CSS:

	body {
	background: -webkit-linear-gradient(left, #5d98c6, #366b9b, #3a6494, #346693);
	}

	.all {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	#flash_light {
	width: 20px;
	height: 42px;
	background-color: #91a09d;
	position: relative;
	left: 95px;
	}

	#flash_light:before {
	content: " ";
	position: absolute;
	left: -20px;
	width: 55px;
	height: 30px;
	background-color: #dae1d9;
	border: 3px solid black;
	border-radius: 5px;
	box-shadow: inset 0px 0px 0px 3px gray;
	}

	#flash_light:after {
	content: " ";
	position: absolute;
	left: -20px;
	width: 55px;
	height: 30px;
	background: -webkit-linear-gradient(
	top right,
	silver 0px 20px,
	white 20px 30px,
	silver 30px 35px,
	white 35px 115px
	);
	border: 3px solid black;
	border-radius: 5px;
	opacity: 0.4;
	}

	.button {
	width: 55px;
	/* background-color:white;*/
	height: 0px;
	/* border-top:15px solid black;*/
	border-bottom: 15px solid #c5d0c4;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	position: relative;
	left: 60px;
	}

	.button:before {
	content: " ";
	position: absolute;
	width: 20px;
	height: 7px;
	background-color: black;
	left: -50px;
	top: 3px;
	}

	.button:after {
	content: " ";
	position: absolute;
	width: 17px;
	height: 5px;
	background-color: black;
	left: 90px;
	top: 5px;
	}

	.cam_out {
	width: 210px;
	height: 150px;
	background-color: #cacfc5;
	border-radius: 10px;
	position: relative;
	top: -5px;
	}

	.cam_out:before {
	content: " ";
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 7px;
	background-color: orange;
	top: 10px;
	left: 30px;
	}

	.cam_out:after {
	content: " ";
	position: absolute;
	width: 25px;
	height: 15px;
	border-radius: 3px;
	background-color: #313131;
	top: 4px;
	left: 162px;
	}

	.cam_inn {
	width: 210px;
	height: 100px;
	background-color: #f68026;
	position: relative;
	top: 25px;
	}

	.cam_inn:after {
	content: " ";
	position: absolute;
	width: 40px;
	height: 100px;
	background-color: #313131;
	border-radius: 6px;
	left: -3px;
	}

	.lense {
	height: 115px;
	width: 115px;
	border-radius: 115px;
	background-color: skyblue;
	border: 7px solid black;
	position: absolute;
	left: 45px;
	bottom: -15px;
	box-shadow: 0px 0px 10px 5px silver, inset 0px 0px 0px 3px #6bb2cb;
	}

	.lense:before {
	position: absolute;
	content: " ";
	width: 46px;
	height: 46px;
	border-radius: 55px;
	background-color: skyblue;
	top: 9px;
	left: 9px;
	border-top: 25px solid transparent;
	border-bottom: 25px solid transparent;
	border-left: 25px solid white;
	border-right: 25px solid white;
	opacity: 0.3;
	}

	.lense:after {
	position: absolute;
	content: " ";
	width: 44px;
	height: 44px;
	border-radius: 55px;
	background-color: #6bb2cb;
	top: 33px;
	left: 33px;
	border: 3px solid skyblue;
	}