CSS UI Set

Developer
Michael Goldspinner
Size
6,786 Kb
Views
48,576
  1. CSS UI Set Previews
  2. CSS UI Set HTML Codes
  3. CSS UI Set CSS Codes
  4. CSS UI Set JS Codes

How do I make an css ui set?

What is a css ui set? How do you make a css ui set? This script and codes were developed by Michael Goldspinner on 07 July 2022, Thursday.

CSS UI Set Previews
IQ Test

CSS UI Set - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS UI Set</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <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> <navigation>	<a></a>	<li id="form">Form</li>	<li id="element">Elements</li>	<li id="icon">Icons</li>
</navigation>
<div class="sec">	<div class="wrap blk-label">	Form	</div>
<div class="wrap form">	<h2>Title</h2>	<label>Textfield</label>	<div class="field">	<input type="text" name="email" placeholder="Type Here"><div class="error"></div>	</div>	<label>Textarea</label>	<div class="field">	<textarea placeholder="Here is some more Placeholder text using the fabulous and new HTML attribute!"></textarea>	</div>	<input type="submit" class="submit-2" value="Submit">	<!--<input type="submit" class="submit-1">-->
</div>
</div>
<div class="sec current">	<span style="text-align: center;">	<div class="wrap blk-label"> <<!---->p<!---->> </div>	</span>	<div class="wrap element p-condensed">	<p>Now there was a Pharisee, a man named Nicodemus who was a member of the Jewish ruling council. He came to Jesus at night and said, “Rabbi, we know that you are a teacher who has come from God. For no one could perform the signs you are doing if God were not with him.”</p>
<p>Jesus replied, “Very truly I tell you, no one can see the kingdom of God unless they are born again.”</p>
<p>“How can someone be born when they are old?” Nicodemus asked. “Surely they cannot enter a second time into their mother’s womb to be born!”</p>
<p>Jesus answered, “Very truly I tell you, no one can enter the kingdom of God unless they are born of water and the Spirit. Flesh gives birth to flesh, but the Spirit gives birth to spirit. You should not be surprised at my saying, ‘You[c] must be born again.’ The wind blows wherever it pleases. You hear its sound, but you cannot tell where it comes from or where it is going. So it is with everyone born of the Spirit.”</p>	<p>“How can this be?” Nicodemus asked.</p>
<p>“You are Israel’s teacher,” said Jesus, “and do you not understand these things? Very truly I tell you, we speak of what we know, and we testify to what we have seen, but still you people do not accept our testimony. I have spoken to you of earthly things and you do not believe; how then will you believe if I speak of heavenly things? No one has ever gone into heaven except the one who came from heaven—the Son of Man. Just as Moses lifted up the snake in the wilderness, so the Son of Man must be lifted up, that everyone who believes may have eternal life in him.</p>	</div>
</div>
<div class="sec">
<div class="wrap blk-label">Arrows</div>
<div class="wrap icon">	<div class="arrow a-l"></div>	<div class="arrow a-r"></div>
</div>	<div class="wrap blk-label">Radios</div>
<div class="wrap icon">	<input type="radio" name="one" class="radio"></input>	<input type="radio" name="one" class="radio"></input>	<input type="radio" name="one" class="radio"></input>	<input type="radio" name="one" class="radio"></input>	<input type="radio" name="one" class="radio"></input>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS UI Set - Script Codes CSS Codes

body { position: absolute; background-color: #eee; width: 100%; height: 100%; margin: 0;
}
navigation { display: block; overflow: hidden; background-color: #222; border-bottom: solid 5px #a22; font: bold 15pt Giorgio, sans-serif; text-align: center; color: white; width: 100%; height: 9%;
}
navigation a { position: relative; display: inline-block; width: 0px; height: inherit; vertical-align: middle;
}
navigation li { cursor: pointer; list-style: none; display: inline-block; padding: 28px; /* margin: 10px */
}
navigation li:hover { background-color: #eee; color: #d00;
}
navigation li:active { background-color: #aaa;
}
.sec { transition: left 1s; position: absolute; display: block; width: 100%; height: 90%; left: -100%;
}
.wrap { position: relative; display: block; overflow: hidden; height: auto; padding: 25px; top: 100px;
}
.blk-label { position: relative; display: block; background-color: #fff; border: solid 2px #ddd; border-bottom: none; font: normal 1.5em/1 Giorgio, sans-serif; color: #888; width: 150px; height: 15px; padding: 10px; padding-bottom: 25px; margin: 0 auto; margin-bottom: -30px; transform: translateX(-110px);
}
.current { left: 0%;
}
.form { z-index: 10; background-color: #fff; /* border: solid 5px #800 */ border-radius: 15px; text-align: center; color: #444; width: 350px; margin: 25px auto;
}
.form > * { display: inline-block; float: left; clear: left; margin: 5px 25px;
}
.form h2 { text-align: center; font: normal 25pt Giorgio, sans-serif; width: 85%;
}
.form label { font: normal 15pt Giorgio, sans-serif; margin-top: 20px;
}
.field { display: flex; overflow: hidden; width: 300px; height: auto;
}
input[type="text"] { -webkit-appearance: none; transition: border 0.3s, height 0.3s; overflow: scroll; display: inline-block; display: flex; border: solid 1px transparent; vertical-align: middle; color: #444; width: 92.5%; height: 35px; padding: 10px 10px; margin: 5px 0;
}
input[type="text"]:hover { transition: border 0.2s; border: solid 1px #aaa;
}
input[type="text"]:focus { transition: border 0.3s, height 0.4s; outline: 0; border: solid 0px transparent; border-bottom: solid 5px #a22; width: 93%; height: 31px;
}
textarea { -webkit-appearance: none; transition: border 0.3s; overflow: hidden; display: inline-block; display: flex; border: solid 1px transparent; vertical-align: middle; color: #444; width: 100%; height: 100px;
}
textarea:hover { transition: border 0.2s; border: solid 1px #aaa;
}
textarea:focus { transition: border 0.3s, height 0.4s; outline: 0; border: solid 0px transparent; border-bottom: solid 5px #a22;
}
textarea:active { transition: height 0s;
}
.correct { transition: margin 0.5s; display: inline-block; display: flex; position: relative; overflow: hidden; float: left; background-color: #4b4; text-align: center; font: bold 12pt Giorgio, sans-serif; color: #fff; min-width: 80px; width: 80px; height: 100%; padding: 20px 10px; margin: 5px 0px; margin-right: -130px; right: 0px;
}
.correct:after { content: "Good"; overflow: hidden; width: 80px;
}
.error { transition: margin 0.5s; display: inline-block; display: flex; position: relative; overflow: hidden; float: left; background-color: #a22; text-align: center; font: bold 12pt Giorgio, sans-serif; color: #fff; min-width: 80px; width: 80px; height: 100%; padding: 20px 10px; margin: 5px 0px; margin-right: -130px; right: -1px;
}
.error:after { content: "Try Again"; overflow: hidden; width: 80px;
}
.on { transition: margin 0.5s; margin-right: 0px;
}
.submit-1 { -webkit-appearance: none; cursor: pointer; transition: border 0.7s, transform 0.5s, box-shadow 0.5s, background-color 0.5s; box-shadow: 0px 5px 10px -4px #222; background-color: #222; border: solid 0px #a22; border-bottom: solid 5px #444; border-radius: 10px; font: normal 15pt Giorgio, sans-serif; color: white; width: 150px; padding: 10px 20px; transform: translateY(0px);
}
.submit-1:hover { box-shadow: 0px 15px 15px -10px #900, 0px 10px 15px 5px #666; /* box-shadow: 0px 10px 15px 5px #666 */ background-color: #a22; border-bottom: solid 5px #333; transform: translateY(-10px);
}
.submit-1:focus { outline: 0;
}
.submit-2 { -webkit-appearance: none; cursor: pointer; position: relative; transition: color 0s, border 0s, background-color 0.2s, border-radius 1.5s, width 0.5s, left 0.5s; transition-delay: 0.3s; background-color: transparent; border: solid 0px #a22; border-bottom: solid 5px #a22; border-radius: 0px; font: normal 15pt Giorgio, sans-serif; width: 110px; padding: 10px 20px; left: 27%;
}
.submit-2:hover, .submit-2:focus { transition: background-color 0.5s, border-radius 0.5s, width 0.5s, transform 0.5s, left 0.5s; transition-delay: 0s; background-color: #a22; border-bottom: solid 5px #333; border-radius: 10px; color: white; width: 300px; left: 0%;
}
.submit-2:focus { outline: 0;
}
.submit-2:active { transition: background-color 0.2s; background-color: #800;
}
.form, .element, .icon { box-shadow: 2px 3px 10px 0px #aaa, 7px 5px 20px 2px #ddd;
}
.icon, .element { z-index: 9; background-color: #fff; width: 400px; height: auto; margin: 25px auto; margin-bottom: 50px;
}
.arrow { transition: background-color 0.1s, border 0.5s; cursor: pointer; background-color: #a22; border: solid 0px transparent; border-right: solid 0px; border-radius: 10px; width: 50px; height: 50px;
}
.arrow:before { transition: width 0.5s; z-index: -1; position: relative; overflow: hidden; display: block; background-color: #fff; font: normal 1em Giorgio, sans-serif; width: 25px; padding: 17px 10px;
}
.arrow:hover:before { width: 100px;
}
.arrow:active { background-color: #800;
}
.a-l { float: left; background-image: url(http://www.michaelgoldspinner.website/arrow-left.png); background-size: 25px; background-repeat: no-repeat; background-position: 12.5px, 50%; border-top-right-radius: 0px; border-bottom-right-radius: 0px;
}
.a-l:before { float: left; content: "Left"; text-align: right; border-right: solid 10px #a22;
}
.a-r { float: right; background-image: url(http://www.michaelgoldspinner.website/arrow-right.png); background-size: 25px; background-repeat: no-repeat; background-position: 12.5px, 50%; border-top-left-radius: 0px; border-bottom-left-radius: 0px;
}
.a-r:before { float: right; content: "Right"; border-left: solid 10px #a22;
}
.radio:nth-of-type(2) { /* margin: 0 -70px */
}
.radio { transition: background-color 0.5s, border 0.2s; -webkit-appearance: none; display: inline-block; overflow: hidden; border-radius: 50%; border: solid 1px #eee; width: 30px; height: 30px; margin: 0 5.5%;
}
.radio:before { content: ""; display: block; position: absolute; background-color: #a22; width: 30px; height: 3px; transform: translate(-5%, 40px);
}
.radio:after { content: ""; display: block; position: relative; background-image: url(http://www.michaelgoldspinner.website/check.png); background-size: 70%; background-position: 50%, 50%; background-repeat: no-repeat; width: 100%; height: 100%;
}
.radio:hover { transition: background-color 0.5s, border 0.2s; background-color: transparent; border: solid 1px #aaa;
}
.radio:checked { background-color: #a22; border: solid 1px #a22; outline: 0;
}
.radio:focus { outline: 0;
}
p { cursor: pointer; font: normal 1em/1.3 Kalinga, sans-serif; margin-bottom: 2em;
}
.p-condensed { overflow-y: scroll; max-height: 200px;
}
.highlight { opacity: 0.4;
}

CSS UI Set - Script Codes JS Codes

$('p').mouseenter(function() {	$(this).siblings().addClass('highlight');
}).mouseleave(function() {	$(this).siblings().removeClass('highlight'); });
$('navigation li').click(function() {	var tItem = $(this).attr('id');	var Item = $('div.wrap.'+tItem+'').parent();	$('div.sec').removeClass('current');	Item.addClass('current');
})
$('input').on('change', function() {	var item = $(this);	var value = item.val();	var error_t = item.css('color', '#a22');	var error_un = item.css('color', 'inherit');	var email = value.split('@');	// is email?	if (email.length >= 2) {	var emailend = email[1].substr((email[1].length - 4), email[1].length);	// have email?	if (email.length < 3) {	// have .com?	if (emailend != '.com') { $(this).css('color', '#a22').next().removeClass('correct').addClass('error on'); } else { $(this).css('color', '#2b2').next().removeClass('error').addClass('correct on'); }	}	else { error_t; }	}	else { /*$(this).next().css('margin-right', '-100px'); */	setTimeout(function(){ $('input[name="email"]').next().removeClass('on correct error'); }, 500);	}
})
/*var int = setInterval(function(){
var textfield = $('input[name="email"]');
var text = textfield.val();
console.log(text);
if (text != 'Michael') {	textfield.css('color', '#a22');
} else {	textfield.css('color', 'inherit');
}
}, 500);*/
CSS UI Set - Script Codes
CSS UI Set - Script Codes
Home Page Home
Developer Michael Goldspinner
Username emgo
Uploaded July 07, 2022
Rating 3
Size 6,786 Kb
Views 48,576
Do you need developer help for CSS UI Set?

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!

Michael Goldspinner (emgo) Script Codes
Name
Fundamental Flex-Box Menu
Media Slider
Interactive Birthday Card
Resolving div Overflow
Bible Reader Concept
WebOS style navigation WIP
CSS Website Container
Scrolling Sidebar
Database Model - Bible
W3Schools Forms Example
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!