Scifi-style Interative Form

Developer
AaronChuo (小狂)
Size
4,566 Kb
Views
40,480
  1. Scifi-style Interative Form Previews
  2. Scifi-style Interative Form HTML Codes
  3. Scifi-style Interative Form CSS Codes
  4. Scifi-style Interative Form JS Codes

How do I make an scifi-style interative form?

Implement web form by using Sass/HTML tricks, and without jQuery / JavaScript, keeping native behaviors.. What is a scifi-style interative form? How do you make a scifi-style interative form? This script and codes were developed by AaronChuo (小狂) on 11 September 2022, Sunday.

Scifi-style Interative Form Previews
IQ Test

Scifi-style Interative Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scifi-style Interative Form</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="scifiUI"> <form> <!--Text input--> <div class="inline"> <label for="textInput">Text Input</label> <input type="text" id="textInput"> </div> <!--Radios--> <div class="inline"> <div class="radioWrapper"> <input type="radio" name="radio" id="radioA" checked> <label for="radioA">Radio A</label> </div> <div class="radioWrapper"> <input type="radio" name="radio" id="radioB"> <label for="radioB">Radio B</label> </div> <div class="radioWrapper"> <input type="radio" name="radio" id="radioC"> <label for="radioC">Radio C</label> </div> </div> <!--Checkboxes--> <div class="inline"> <div class="checkboxWrapper"> <input type="checkbox" name="checkbox" id="checkboxA"> <label for="checkboxA">Checkbox A</label> </div> <div class="checkboxWrapper"> <input type="checkbox" name="checkbox" id="checkboxB" checked> <label for="checkboxB">Checkbox B</label> </div> <div class="checkboxWrapper"> <input type="checkbox" name="checkbox" id="checkboxC" checked> <label for="checkboxC">Checkbox C</label> </div> </div> <!--Selector--> <div class="inline"> <div class="selectWrapper"> <select id="selector" name="selector"> <option value="option1" selected disabled>Please choose..</option> <option value="option2">Option 1</option> <option value="option3">Option 2</option> <option value="option4">Option 3</option> <option value="option5">Option 4</option> <option value="option6">Option 5</option> <option value="option7">Option 6</option> <option value="option8">Option 7</option> </select> <i></i> </div> </div> <!--Button--> <div class="inline"> <button type="button">Button</button> </div> </form>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scifi-style Interative Form - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Rajdhani:300);
html, body { background: url(http://aaronchuo.cc/assets/images/ironwall.jpg) #212121 top center no-repeat; background-size: 100% 100%; width: 100%; height: 100%; font-family: 'Rajdhani', sans-serif; letter-spacing: .1em;
}
.scifiUI { width: 600px; margin: 50px auto; font-size: 18px; color: #00bebe;
}
.scifiUI * { -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; outline: none;
}
.scifiUI :before,
.scifiUI :after { -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; content: '';
}
.scifiUI .inline { display: block; width: 100%; margin: 20px 0;
}
.scifiUI .inline label { padding-right: 5px;
}
.scifiUI input[type=text] { height: 50px; border: 1px solid #00bebe; padding: 0 10px; background: transparent;
}
.scifiUI input[type=text]:hover { box-shadow: 0 0 8px #00bebe inset, 0 0 8px #00bebe; border: 1px solid #00dcdc;
}
.scifiUI input[type=text]:focus { box-shadow: 0 0 20px #00dcdc inset, 0 0 10px #00dcdc, 0 0 20px white; border: 1px solid #00dcdc; background: #00dcdc; color: #212121;
}
.scifiUI .radioWrapper { display: inline-block; overflow: hidden; position: relative; width: 20%;
}
.scifiUI .radioWrapper input[type=radio] { position: absolute; top: -100%;
}
.scifiUI .radioWrapper input[type=radio] ~ label { display: block; width: 100%; height: 50px; line-height: 50px; padding-left: 35px; text-align: left; cursor: pointer;
}
.scifiUI .radioWrapper input[type=radio] ~ label:before { border-radius: 50%; display: block; position: absolute; top: 13px; left: 5px; width: 20px; height: 20px; border: 1px solid #00bebe;
}
.scifiUI .radioWrapper input[type=radio] ~ label:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; border-radius: 50%; display: block; position: absolute; top: 0; left: 0; width: 60%; height: 100%;
}
.scifiUI .radioWrapper input[type=radio]:hover ~ label { color: #00dcdc;
}
.scifiUI .radioWrapper input[type=radio]:hover ~ label:before { box-shadow: 0 0 8px #00bebe inset, 0 0 8px #00bebe; border: 1px solid #00dcdc;
}
.scifiUI .radioWrapper input[type=radio]:checked ~ label { color: #00dcdc;
}
.scifiUI .radioWrapper input[type=radio]:checked ~ label:before { box-shadow: 0 0 8px #00bebe inset, 0 0 8px #00bebe; border: 1px solid #00dcdc;
}
.scifiUI .radioWrapper input[type=radio]:checked ~ label:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; box-shadow: 0 0 20px #00dcdc inset, 0 0 10px #00dcdc, 0 0 20px white; border: 1px solid #00dcdc; background: #00dcdc; top: 18px; left: 10px; width: 10px; height: 20%;
}
.scifiUI .checkboxWrapper { display: inline-block; overflow: hidden; position: relative; margin-right: 15px;
}
.scifiUI .checkboxWrapper input[type=checkbox] { position: absolute; top: -100%;
}
.scifiUI .checkboxWrapper input[type=checkbox] ~ label { display: block; width: 100%; height: 40px; line-height: 40px; padding-left: 35px; text-align: left; cursor: pointer;
}
.scifiUI .checkboxWrapper input[type=checkbox] ~ label:before { display: block; position: absolute; top: 7px; left: 5px; width: 20px; height: 20px; border: 1px solid #00bebe;
}
.scifiUI .checkboxWrapper input[type=checkbox] ~ label:after { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; box-shadow: 1px -7px 5px 3px #00bebe, 5px 5px 5px 3px #00dcdc; display: block; position: absolute; top: 7px; left: 5px; width: 20px; height: 20px;
}
.scifiUI .checkboxWrapper input[type=checkbox]:hover ~ label { color: #00dcdc;
}
.scifiUI .checkboxWrapper input[type=checkbox]:hover ~ label:before { box-shadow: 0 0 8px #00bebe inset, 0 0 8px #00bebe; border: 1px solid #00dcdc;
}
.scifiUI .checkboxWrapper input[type=checkbox]:checked ~ label { color: #00dcdc;
}
.scifiUI .checkboxWrapper input[type=checkbox]:checked ~ label:before { box-shadow: 0 0 8px #00bebe inset, 0 0 8px #00bebe; border: 1px solid #00dcdc;
}
.scifiUI .checkboxWrapper input[type=checkbox]:checked ~ label:after { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; box-shadow: 0 0 20px #00dcdc inset, 0 0 10px #00dcdc, 0 0 20px white; border: 1px solid #00dcdc; background: #00dcdc; top: 14px; left: 10px; width: 10px; height: 10px;
}
.scifiUI .selectWrapper { overflow: hidden; position: relative; width: 1200px; height: 50px; border-left: 5px solid #00bebe;
}
.scifiUI .selectWrapper:hover { box-shadow: 0 0 20px #00dcdc inset, 0 0 10px #00dcdc, 0 0 20px white; border: 1px solid #00dcdc; background: #00dcdc; width: 200px; height: 50px;
}
.scifiUI .selectWrapper:hover select { color: #212121;
}
.scifiUI .selectWrapper:hover select + i { border-top-color: #212121;
}
.scifiUI .selectWrapper i { position: absolute; top: 18px; left: 10px; width: 0; height: 100%; border-top: 15px solid #00bebe; border-left: 10px solid transparent; border-right: 10px solid transparent;
}
.scifiUI .selectWrapper select { -moz-appearance: none; -webkit-appearance: none; box-shadow: none; position: absolute; width: 200px; height: 100%; padding-left: 40px; border: 0; outline: 0; background: none; z-index: 99; cursor: pointer;
}
.scifiUI button { overflow: hidden; position: relative; width: 200px; height: 50px; border: 1px solid #00bebe; background: rgba(0, 190, 190, 0.2);
}
.scifiUI button:hover { box-shadow: 0 0 8px #00bebe inset, 0 0 8px #00bebe; border: 1px solid #00dcdc; color: #00dcdc; background: rgba(0, 220, 220, 0.3);
}

Scifi-style Interative Form - Script Codes JS Codes

/* This implement don't need Javascript */
Scifi-style Interative Form - Script Codes
Scifi-style Interative Form - Script Codes
Home Page Home
Developer AaronChuo (小狂)
Username aaronchuo
Uploaded September 11, 2022
Rating 3.5
Size 4,566 Kb
Views 40,480
Do you need developer help for Scifi-style Interative Form?

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!

AaronChuo (小狂) (aaronchuo) Script Codes
Name
Chopper by pure CSS, no image, no javascript
The Heart
Animated Donut Chart
Poached Egg by pure CSS
Radar Scanner
Glitch Image
Gradient Circle Spinner
Ramen by pure CSS
Gradient Color Spin
Fly to Future
Create amazing blog posts 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!