Camera

Developer
Billy Crist
Size
2,136 Kb
Views
28,322

How do I make an camera?

A single div camera icon with some interactivity. Press it to snap a photo!. What is a camera? How do you make a camera? This script and codes were developed by Billy Crist on 04 October 2022, Tuesday.

Camera Previews
IQ Test

Camera - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Camera</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html,
body { background: #43D1EB;
}
.cam { position: absolute; width: 9rem; height: 6rem; margin: auto; top:0;right:0;bottom:0;left:0; border-radius: 1rem; cursor: pointer;
}
.cam,
.cam::before,
.cam::after { border: 0.5rem solid #fff;
}
.cam::before,
.cam::after { position: absolute; content:''; display: block;
}
.cam::before { width: 3rem; height: 3rem; right: 1rem; top: 1rem; border-radius: 50%;
}
.cam::after { width: 1.5rem; height: 0.5rem; top: -1.5rem; left: 0.5rem; box-shadow: 0 2rem #fff, 0 2rem #fff; border-radius: 0.33rem; transition: 100ms ease-in-out;
}
.cam:active::after { top: -1rem; border-bottom-width: 0; box-shadow: 0 1.75rem #fff, 0 2rem 0 50rem rgba(255,255,255,0);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="cam"></div>
</body>
</html>

Camera - Script Codes CSS Codes

html,
body { background: #43D1EB;
}
.cam { position: absolute; width: 9rem; height: 6rem; margin: auto; top:0;right:0;bottom:0;left:0; border-radius: 1rem; cursor: pointer;
}
.cam,
.cam::before,
.cam::after { border: 0.5rem solid #fff;
}
.cam::before,
.cam::after { position: absolute; content:''; display: block;
}
.cam::before { width: 3rem; height: 3rem; right: 1rem; top: 1rem; border-radius: 50%;
}
.cam::after { width: 1.5rem; height: 0.5rem; top: -1.5rem; left: 0.5rem; box-shadow: 0 2rem #fff, 0 2rem #fff; border-radius: 0.33rem; transition: 100ms ease-in-out;
}
.cam:active::after { top: -1rem; border-bottom-width: 0; box-shadow: 0 1.75rem #fff, 0 2rem 0 50rem rgba(255,255,255,0);
}
Camera - Script Codes
Camera - Script Codes
Home Page Home
Developer Billy Crist
Username billyysea
Uploaded October 04, 2022
Rating 4
Size 2,136 Kb
Views 28,322
Do you need developer help for Camera?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Billy Crist (billyysea) Script Codes
Name
Interactive Business Card - OG
SuprLiTE CSS Arrows
A Simple, Fashionable, Loader
A Little Menu Bar
CSS Slider
Mobile Twitter Log-in Design
Some Ugly Icons
Hotel Booking ..in progress
Location Pin Point
A Music Player
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!