Flat-ish UI Login Element

Developer
Patrick
Size
2,722 Kb
Views
12,144
  1. Flat-ish UI Login Element Previews
  2. Flat-ish UI Login Element HTML Codes
  3. Flat-ish UI Login Element CSS Codes
  4. Flat-ish UI Login Element JS Codes

How do I make an flat-ish ui login element?

Flat-ish UI for a login box.. What is a flat-ish ui login element? How do you make a flat-ish ui login element? This script and codes were developed by Patrick on 21 November 2022, Monday.

Flat-ish UI Login Element Previews
IQ Test

Flat-ish UI Login Element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat-ish UI Login Element</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div><label for="user" class="fontawesome-user"></label><input type="text" id="user" placeholder="Username"></div> <div><label for"pass" class="fontawesome-lock"></label><input type="password" id="pass" placeholder="Password"><button type="submit" class="fontawesome-arrow-right"></button>
</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>

Flat-ish UI Login Element - Script Codes CSS Codes

@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400');
@import url('http://weloveiconfonts.com/api/?family=fontawesome');
* { box-sizing: border-box; }
*:focus { outline: none; }
html { font-size: 10px; }
body { margin: 50px; font: 1.2rem 'Open Sans', sans-serif; background: linear-gradient(45deg, #292931 25%, #2f2f38 25%, #2f2f38 50%, #2f2f38 50%, #292931 50%, #292931 75%, #2f2f38 75%); background-size: 64px 64px; }
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; }
.container { position: relative; width: 300px; padding: 15px; margin: 0 auto; background: #423142; border: 0; border-top-width: 3px; border-image: -webkit-linear-gradient(left, #ad6bad 0%, #f7f7c5 25%, #8cced4 50%, #de306e 75%, #ad6bad 100%) 1%; } .container:after { content: ""; position: absolute; top: 100%; border-top: 15px solid #423142; border-left: 15px solid transparent; border-right: 15px solid transparent; }
/*.container > div { background: green; }*/ .container > div:before, .container > div:after { display: table; content: ""; } .container > div:after { clear: both; }
.container > div:first-child { margin-bottom: 10px; }
label, input, button { display: block; float: left; height: 35px; padding: 0; line-height: 35px; border: none; }
label { width: 35px; text-align: center; border-radius: 3px 0 0 3px; color: #847384; background: #dedede; -webkit-transition: all .3s; transition: all .3s; } label:hover { cursor: pointer; }
input[type="text"] { width: 235px; padding: 5px; border-radius: 0 3px 3px 0; }
input[type="password"] { width: 200px; padding: 5px; }
button[type="submit"] { width: 35px; text-align: center; border-radius: 0 3px 3px 0; color: #fff; background: #ad6bad; text-shadow: rgba(0,0,0,.5) 0 -1px; -webkit-transition: all .3s; transition: all .3s; } button[type="submit"]:hover { cursor: pointer; background: #94d6a1; }
/*input:focus { background: red; }*/
.highlight { color: #fff; background: #e62163; }

Flat-ish UI Login Element - Script Codes JS Codes

// inspired by http://dribbble.com/shots/344627-Sign-In
// stripe bg code lifted from @0x04 =)
// * still a work in progress as many elements/animations are still not implemented
$('.container').delegate('*','focus blur', function() { var inputOn = $(this); setTimeout(function() { inputOn.prev('label').toggleClass('highlight', inputOn.is(':focus')); }, 0 );
});
Flat-ish UI Login Element - Script Codes
Flat-ish UI Login Element - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3.5
Size 2,722 Kb
Views 12,144
Do you need developer help for Flat-ish UI Login Element?

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!

Patrick (hinducows) Script Codes
Name
Sloppy Panels
Overlay Drop Description
CSS Filters
Menu Overlay
3D Transforms
Flat UI Element
Fixed Scrolling Backgrounds
Simple Button
JQuery CSS Transition Content Slide-In
Item Display
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!