Aperture-style lens

Developer
Billy Brown
Size
3,703 Kb
Views
14,168
  1. Aperture-style lens Previews
  2. Aperture-style lens HTML Codes
  3. Aperture-style lens CSS Codes
  4. Aperture-style lens JS Codes

How do I make an aperture-style lens?

An aperture style camera lens created entirely in HTLM and CSS, inspired by a tutorial on Vectortuts+.. What is a aperture-style lens? How do you make a aperture-style lens? This script and codes were developed by Billy Brown on 30 September 2022, Friday.

Aperture-style lens Previews
IQ Test

Aperture-style lens - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Aperture-style lens</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! */ * { box-sizing: border-box; margin: 0 auto; padding: 0; }
body {	background: radial-gradient(#555, #333);
}
a { color: orange;
}
p { color: #e0e0e0; font-family: sans-serif; font-size: 14px; position: fixed; top: 2px; left: 2px;
}
div { border-radius: 50%; }
.black { background: black; }
.g40 { background: linear-gradient(-45deg, hsl(0, 0%, 70%), hsl(0, 0%, 0%)); }
.g50 { background: linear-gradient(135deg, hsl(0, 0%, 60%) 15%, hsl(0, 0%, 0%)); }
.g60 { background: linear-gradient(-45deg, hsl(0, 0%, 50%), hsl(0, 0%, 0%)); }
.g80 { background: linear-gradient(-45deg, hsl(0, 0%, 50%), hsl(0, 0%, 0%)); }
.g90 { background: linear-gradient(130deg, hsl(0, 0%, 30%), hsl(0, 0%, 0%)); }
.g9060 { background: linear-gradient(90deg, hsl(0, 0%, 50%), hsl(0, 0%, 0%)); }
.gr90 { background: radial-gradient(hsl(0, 0%, 25%), hsl(0, 0%, 0%) 80%); }
.p70 { background: hsl(0, 0%, 30%); }
.weird { background-image: radial-gradient(#555, black); background-position: -80px -80px; background-size: 220px 220px;
}
.white { background: white; }
#c1 { height: 429px; margin: 10px auto; padding: 3px; width: 429px; }
#c2 { height: 423px; padding: 22.5px; width: 423px; }
#c3 { height: 368px; padding: 5px; ;width: 368px; }
#c4 { box-shadow: 0 0 3px black; height: 358px; padding: 2.5px; width: 358px; }
#c5 { height: 359px; padding: 10px; width: 359px; }
#c6 { height: 339px; padding: 2px; width: 339px; }
#c7 { height: 335px; padding: 3px; width: 335px; }
#c8 { height: 329px; padding: 2px; width: 329px; }
#c9 { height: 325px; padding: 3px; width: 325px; }
#c10 { height: 319px; padding: 2px; width: 319px; }
#c11 { height: 315px; padding: 19px; width: 315px; }
#c12 { height: 277px; padding: 4.5px; width: 277px; }
#c13 { height: 268px; padding: 27.5px; width: 268px; }
#c14 { box-shadow: 0 0 6px 3px white; height: 213px; position: relative; width: 213px; }
#c15 { box-shadow: 0 0 2px 2px black; height: 214px; padding: 2px; position: absolute; top: -3px; left: -3px; width: 214px;
}
#c16 { height: 216px; padding: 4px; position: static; width: 216px; }
#c17 { height: 208px; width: 208px; }
#c18 { box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 0.5); height: 208px; padding: 22px; position: relative; width: 208px;
}
#g1 { box-shadow: 0 0 3px 3px black, 10px 10px 10px rgba(255, 255, 255, 0.5); height: 160px; width: 160px; }
#g2 { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 5px black; height: 100px; position: absolute; top: 90px; right: 33px; -webkit-transform: rotate(40deg); width: 50px;
}
#g3 { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 5px black; height: 60px; position: absolute; top: 30px; left: 43px; -webkit-transform: rotate(40deg); width: 30px;
}
#g4 { box-shadow: inset 100px 100px rgba(255, 255, 255, 0.2); height: 358px; position: absolute; top: -75px; left: -75px; width: 358px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p>Inspired by <a href="https://bit.ly/QyVsIH">Vectortuts+ tutorial</a>.</p>
<div id="c1" class="g40"> <div id="c2" class="g60"> <div id="c3" class="g50"> <div id="c4" class="black"> <div id="c5" class="p70"> <div id="c6" class="g9060"> <div id="c7" class="p70"> <div id="c8" class="g9060"> <div id="c9" class="p70"> <div id="c10" class="g9060"> <div id="c11" class="g90"> <div id="c12" class="g80"> <div id="c13" class="weird"> <div id="c14" class="white"> <div id="c15" class="black"> <div id="c16" class="black"> <div id="c17" class="gr90"> <div id="c18"> <div id="g1"></div> <div id="g2"></div> <div id="g3"></div> <div id="g4"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Aperture-style lens - Script Codes CSS Codes

* { box-sizing: border-box; margin: 0 auto; padding: 0; }
body {	background: radial-gradient(#555, #333);
}
a { color: orange;
}
p { color: #e0e0e0; font-family: sans-serif; font-size: 14px; position: fixed; top: 2px; left: 2px;
}
div { border-radius: 50%; }
.black { background: black; }
.g40 { background: linear-gradient(-45deg, hsl(0, 0%, 70%), hsl(0, 0%, 0%)); }
.g50 { background: linear-gradient(135deg, hsl(0, 0%, 60%) 15%, hsl(0, 0%, 0%)); }
.g60 { background: linear-gradient(-45deg, hsl(0, 0%, 50%), hsl(0, 0%, 0%)); }
.g80 { background: linear-gradient(-45deg, hsl(0, 0%, 50%), hsl(0, 0%, 0%)); }
.g90 { background: linear-gradient(130deg, hsl(0, 0%, 30%), hsl(0, 0%, 0%)); }
.g9060 { background: linear-gradient(90deg, hsl(0, 0%, 50%), hsl(0, 0%, 0%)); }
.gr90 { background: radial-gradient(hsl(0, 0%, 25%), hsl(0, 0%, 0%) 80%); }
.p70 { background: hsl(0, 0%, 30%); }
.weird { background-image: radial-gradient(#555, black); background-position: -80px -80px; background-size: 220px 220px;
}
.white { background: white; }
#c1 { height: 429px; margin: 10px auto; padding: 3px; width: 429px; }
#c2 { height: 423px; padding: 22.5px; width: 423px; }
#c3 { height: 368px; padding: 5px; ;width: 368px; }
#c4 { box-shadow: 0 0 3px black; height: 358px; padding: 2.5px; width: 358px; }
#c5 { height: 359px; padding: 10px; width: 359px; }
#c6 { height: 339px; padding: 2px; width: 339px; }
#c7 { height: 335px; padding: 3px; width: 335px; }
#c8 { height: 329px; padding: 2px; width: 329px; }
#c9 { height: 325px; padding: 3px; width: 325px; }
#c10 { height: 319px; padding: 2px; width: 319px; }
#c11 { height: 315px; padding: 19px; width: 315px; }
#c12 { height: 277px; padding: 4.5px; width: 277px; }
#c13 { height: 268px; padding: 27.5px; width: 268px; }
#c14 { box-shadow: 0 0 6px 3px white; height: 213px; position: relative; width: 213px; }
#c15 { box-shadow: 0 0 2px 2px black; height: 214px; padding: 2px; position: absolute; top: -3px; left: -3px; width: 214px;
}
#c16 { height: 216px; padding: 4px; position: static; width: 216px; }
#c17 { height: 208px; width: 208px; }
#c18 { box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 0.5); height: 208px; padding: 22px; position: relative; width: 208px;
}
#g1 { box-shadow: 0 0 3px 3px black, 10px 10px 10px rgba(255, 255, 255, 0.5); height: 160px; width: 160px; }
#g2 { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 5px black; height: 100px; position: absolute; top: 90px; right: 33px; -webkit-transform: rotate(40deg); width: 50px;
}
#g3 { background: rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 5px black; height: 60px; position: absolute; top: 30px; left: 43px; -webkit-transform: rotate(40deg); width: 30px;
}
#g4 { box-shadow: inset 100px 100px rgba(255, 255, 255, 0.2); height: 358px; position: absolute; top: -75px; left: -75px; width: 358px;
}

Aperture-style lens - Script Codes JS Codes

/* --------------------
** --------INFO--------
** The code is not meant
** to be used as-is.
** I recommend that you
** change some things into
** classes, as it would
** mess up your page.
** --------------------
** ---NOTE ON CLASSES---
** The classes used are
** quite simple: 'g' is
** for gradient, and 'p'
** is for percent. The
** numbers, if 2 are the
** lightness percentage of
** the non-black colour,
** and if four are the angle
** and then the lightness %.
*/
Aperture-style lens - Script Codes
Aperture-style lens - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded September 30, 2022
Rating 3.5
Size 3,703 Kb
Views 14,168
Do you need developer help for Aperture-style lens?

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 Brown (_Billy_Brown) Script Codes
Name
Playing with FlexBox
Chaos
HMTL and CSS calendar
Pure CSS change stylesheet
Number game
Mandelbrot Fractal
Pure CSS image slider
Online Shop
Group Contact Form
Simple jQuery dice roller
Create amazing art & images 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!