Front-end effects: Flash camera effects generated using CSS

Using a purely CSS-generated camera effect, the relevant CSS code is as follows:

. container {Position:absolute;  top:50%;  left:50%;          -webkit-transform:translate (-50%,-50%);  Transform:translate (-50%,-50%);  border-radius:5px;  box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7);          -webkit-animation:5s angle Infinite; Animation:5s angle Infinite;}. Camera-top,.camera-mid,.camera-bottom {width:360px;}.  camera-top {height:60px;  Background:-webkit-linear-gradient (left, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);  Background:linear-gradient (to right, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);  border:1px solid #DCDCDC; border-top-left-radius:5px;}.  Camera-top:before {display:block;  Content: ";  Position:absolute;  Top: -20px;  right:0;  width:210px;  height:20px;  Background:-webkit-linear-gradient (left, #f5f5f5 0, #f5f5f5 174px, #e2e2e2 100%);  Background:linear-gradient (to right, #f5f5f5 0, #f5f5f5 174px, #e2e2e2 100%);  border:1px solid #DCDCDC;  border-top-left-radius:5px; Border-top-right-radius:5px;  Border-bottom:none; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}.  Camera-top. Zoom {position:absolute;  Top: -15px;  left:30px;  width:42px;  height:9px;  Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  border:1px solid #A3A3A3;  border-top-left-radius:3px;  border-top-right-radius:3px; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}.  Camera-top. zoom:before {display:block;  Content: ";  position:relative;  Top: -6px;  left:50%;          -webkit-transform:translatex (-50%);  Transform:translatex (-50%);  width:20px;  height:4px;  Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 50%, #b0b0b0 100%);  Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 50%, #b0b0b0 100%);  border:1px solid #A3A3A3;  border-top-left-radius:3px; border-top-right-radius:3px;}. Camera-top. Zoom:afteR {display:block;  Content: ";  position:relative;  top:3px;  left:50%;          -webkit-transform:translatex (-50%);  Transform:translatex (-50%);  width:46px;  height:4px;  Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  border:1px solid #A3A3A3;  Border-bottom:none;  border-top-left-radius:3px; border-top-right-radius:3px;}.  Camera-top. mode-changer {position:absolute;  Top: -20px;  left:82px;  width:60px;  height:16px;  Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  border:1px solid #A3A3A3;  border-radius:3px; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}.  Camera-top. mode-changer:after {display:block;  Content: "; Position:absOlute;  top:16px;  left:50%;          -webkit-transform:translatex (-50%);  Transform:translatex (-50%);  width:50px;  height:2px;  Background:-webkit-linear-gradient (left, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  Background:linear-gradient (to right, #b0b0b0 0, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);  border:1px solid #A3A3A3; Border-bottom:none;}. Camera-top. sides {width:100%;}.  Camera-top. Sides:before,.camera-top. sides:after {display:block;  Content: ";  Position:absolute;  top:24px;  width:8px;  height:30px;  Background:-webkit-linear-gradient (top, #828181 0, #696767 10%, #4f4d4d 50%, #403e3f 100%);  Background:linear-gradient (to bottom, #828181 0, #696767 10%, #4f4d4d 50%, #403e3f 100%);  border:1px solid #3E3C3D;  border-radius:2px; box-shadow:0px 3px 5px-1px rgba (0, 0, 0, 0.5);}.  Camera-top. Sides:before {left: -4px;  border-top-left-radius:3px; border-bottom-left-radius:3px;}. Camera-top. sides:after {RIGht: -4px;  border-top-right-radius:3px; border-bottom-right-radius:3px;}.  Camera-top. range-finder {position:absolute;  top:10px;  left:105px;  width:30px;  height:20px;  Background: #3E3C3D;  border-radius:3px; Box-shadow:inset 0 0 5px 3px #333132;}.  Camera-top. range-finder:before {display:block;  Content: ";  Position:absolute;  top:50%;  left:50%;          -webkit-transform:translate (-50%,-50%);  Transform:translate (-50%,-50%);  width:12px;  height:12px;  Background: #797878; border-radius:100%;}.  Camera-top. focus {Position:absolute;  Top: -14px;  left:156px;  width:15px;  height:15px;  Background: #3F3D3E;  border-radius:100%; Box-shadow:inset 0 0 4px 3px #2D2B2B, inset 0 4px 5px 0 #F5F5F5, inset 0-3px 4px-2px #A3A2A2;}.  Camera-top. Red {position:absolute;  top:5px;  left:165px;  width:30px;  height:30px;  Background: #DC2839; border-radius:100%;}.  Camera-top. view-finder {position:absolute;  left:210px;  width:48px; height:30px;  Background:-webkit-radial-gradient (center ellipse, #828181 0, #403e3f 85%, #403e3f 100%);  Background:radial-gradient (ellipse at center, #828181 0, #403e3f 85%, #403e3f 100%);  BORDER:3PX solid #312F2F;  border-radius:4px; Box-shadow:inset 0 8px 8px-8px #FDFDFD;}.  Camera-top. Flash {position:absolute;  Top: -6px;  right:20px;  width:58px;  height:46px;  Background:-webkit-radial-gradient (center ellipse, #828181 0, #403e3f 70%, #403e3f 100%);  Background:radial-gradient (ellipse at center, #828181 0, #403e3f 70%, #403e3f 100%);  border:2px solid #312F2F;  border-radius:3px; Box-shadow:inset 0 8px 8px-8px #FDFDFD;}.  Camera-top. Flash:before,.camera-top. flash:after {display:block;  Content: ";  Position:absolute;  top:50%;  left:50%;          -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%);}.  Camera-top. flash:before {width:90%;  height:70%; Background:-webkit-radial-gradient (center ellipse, #696767 0, #1e1e1e 50%, #1e1e1e 10%); Background:radial-gradient (ellipse at center, #696767 0, #1e1e1e 50%, #1e1e1e 100%);}.  Camera-top. flash:after {width:16px;  height:14px;  Background: #797979;  BORDER-TOP-LEFT-RADIUS:8PX 2px;  BORDER-TOP-RIGHT-RADIUS:8PX 2px;  BORDER-BOTTOM-LEFT-RADIUS:8PX 2px; Border-bottom-right-radius:8px 2px;}.  Camera-top. Flash. light {position:absolute;  top:50%;  left:50%;          -webkit-transform:translate (-50%,-50%);  Transform:translate (-50%,-50%);  width:20px;  height:20px;  Background:-webkit-radial-gradient (center ellipse, #ffffff 0, Rgba (255, 255, 255, 0) 100%);  Background:radial-gradient (ellipse at center, #ffffff 0, Rgba (255, 255, 255, 0) 100%);  border-radius:100%;  Z-index:2;          -webkit-animation:1s Flash Infinite; Animation:1s flash Infinite;}.  Camera-mid {position:relative;  height:130px;  Background:-webkit-linear-gradient (left, #e4e4e4 0, #fafafa 10%, #fafafa 90%, #e4e4e4 100%); Background:linear-gradient (to right, #e4e4e4 0%, #Fafafa 10%, #fafafa 90%, #e4e4e4 100%);  border:1px solid #DCDCDC;  Border-top:none;  Border-bottom:none; Box-shadow:inset 0 15px 15px-15px #FDFDFD;}.  Camera-mid. sensor {position:absolute;  top:40px;  left:105px;  width:30px;  height:30px;  Background: #545252;  border:2px solid #545252;  border-radius:100%; Box-shadow:inset 0 12px 12px-10px #FDFDFD, 0 2px 5px 1px rgba (0, 0, 0, 0.3);}.  Camera-mid. Sensor:before,.camera-mid. sensor:after {display:block;  Content: ";  Position:absolute;  top:50%;  left:50%;          -webkit-transform:translate (-50%,-50%); Transform:translate (-50%,-50%);}.  Camera-mid. sensor:before {width:20px;  height:20px;  Background:-webkit-linear-gradient (top, #E9E9E9 0, #BDBDBD 100%);  Background:linear-gradient (to bottom, #E9E9E9 0, #BDBDBD 100%); border-radius:100%;}.  Camera-mid. sensor:after {width:12px;  height:12px;  Background: #FAFAFA;  border-radius:100%; box-shadow:0 2px 3px 0 #747474;}. Camera-mid. Lens {PositioN:absolute;  Top: -20px;  left:130px;  width:155px;  height:155px; Background:-webkit-radial-gradient (center ellipse, #000000 0, #000000 15%, #272525 30%, #403e3f 30%, #403e3f 31%, #403e3 F 40%, #e9ebec 41%, #e9ebec 44%, #b0b1b2 48%, #e8e9ea 50%, #e8e9ea 60%, #f7f8f8 60%, #787979 65%, #ffffff 66%, #ffffff 100  %); Background:radial-gradient (ellipse at center, #000000 0, #000000 15%, #272525 30%, #403e3f 30%, #403e3f 31%, #403e3f 40%  , #e9ebec 41%, #e9ebec 44%, #b0b1b2 48%, #e8e9ea 50%, #e8e9ea 60%, #f7f8f8 60%, #787979 65%, #ffffff 66%, #ffffff 100%);  border:1px solid #B6B7B8;  border-radius:100%;  Box-sizing:border-box; box-shadow:0 7px 15px-2px rgba (0, 0, 0, 0.4), inset 0-2px 15px-2px rgba (0, 0, 0, 0.2), inset 0 7px 15px-2px #FFF;}.  Camera-mid. lens:before {display:block;  Content: ";  Position:absolute;  top:50%;  left:50%;          -webkit-transform:translate (-50%,-50%);  Transform:translate (-50%,-50%);  width:25px;  height:25px; Background:rgba (0, 0,0, 0.7);  border-radius:100%; Box-shadow:inset 0 5px 3px-2px rgba (255, 255, 255, 0.5), inset 0-5px 20px-8px rgba (255, 255, 255, 0.5);}.  Camera-bottom {height:16px;  Background:-webkit-linear-gradient (left, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);  Background:linear-gradient (to right, #e2e2e2 0, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);  border:1px solid #DCDCDC;  Border-bottom:none;  border-bottom-left-radius:5px;  border-bottom-right-radius:5px; Box-shadow:inset 0 15px 15px-15px #FDFDFD, inset 0-12px 12px-10px #797979;}    @-webkit-keyframes Flash {0% {width:0;  height:0;    } 20% {width:200px;  height:200px;    } 25% {width:0;  height:0;    } 45% {width:200px;  height:200px;    } 50% {width:0;  height:0;    } 100% {width:0;  height:0;    }} @keyframes Flash {0% {width:0;  height:0;    } 20% {width:200px;  height:200px;    } 25% {width:0;  height:0;    } 45% {width:200px; height:200px;  } 50% {width:0;  height:0;    } 100% {width:0;  height:0;            }}@-webkit-keyframes Angle {0% {-webkit-transform:translate ( -50%, -50%) rotate (0deg);    Transform:translate ( -50%, -50%) rotate (0deg);  box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7);            } 25% {-webkit-transform:translate ( -50%, -50%) rotate (2deg);    Transform:translate ( -50%, -50%) rotate (2deg);  box-shadow:10px 30px 50px-20px rgba (0, 0, 0, 0.7);            } 75% {-webkit-transform:translate ( -50%, -50%) rotate ( -2deg);    Transform:translate ( -50%, -50%) rotate ( -2deg);  Box-shadow: -10px 30px 50px-20px rgba (0, 0, 0, 0.7);            } 100% {-webkit-transform:translate ( -50%, -50%) rotate (0deg);    Transform:translate ( -50%, -50%) rotate (0deg);  box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7);            }} @keyframes Angle {0% {-webkit-transform:translate ( -50%, -50%) rotate (0deg);    Transform:translate ( -50%, -50%) rotate (0deg); box-shadow:0px 30px50px-20px rgba (0, 0, 0, 0.7);            } 25% {-webkit-transform:translate ( -50%, -50%) rotate (2deg);    Transform:translate ( -50%, -50%) rotate (2deg);  box-shadow:10px 30px 50px-20px rgba (0, 0, 0, 0.7);            } 75% {-webkit-transform:translate ( -50%, -50%) rotate ( -2deg);    Transform:translate ( -50%, -50%) rotate ( -2deg);  Box-shadow: -10px 30px 50px-20px rgba (0, 0, 0, 0.7);            } 100% {-webkit-transform:translate ( -50%, -50%) rotate (0deg);    Transform:translate ( -50%, -50%) rotate (0deg);  box-shadow:0px 30px 50px-20px rgba (0, 0, 0, 0.7); }}

Online preview: http://igeekbar.com/igclass/code/af644b88-36ea-4987-ac87-19dbef222f34.htm

Front-end effects: Flash camera effects generated using CSS