Camera

Developer
Billy Crist
Size
2,136 Kb
Views
28,336
  1. Camera Previews
  2. Camera HTML Codes
  3. Camera CSS Codes

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,336
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
Random Swim Slider
A Sphere
CSS Slider
Location Pin Point
A Bouncy Menu Toggle
Hotel Booking ..in progress
A Simple, Fashionable, Loader
Some Ugly Icons
Mobile Twitter Log-in Design
Switches
Create amazing love letters 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!