A Pen by Greg Babula

Thumbnail
This awesome code was written by gbabula, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gbabula ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Greg Babula</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form action="." method="post" class="input-wrap">
  <input 
    type="text"
    name="userNameInput" 
    class="input user__input"
    maxlength="12" 
    pattern="/^[a-z]+$/" 
    placeholder="test"
    autocomplete="off"
    spellcheck="false"
    required
  /> 
</form>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/gbabula/a-pen-by-greg-babula-gvxkc */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  font: normal normal 16px/1.5em arial, sans-serif;
}

body {
  background-image: radial-gradient(50% 50%, circle cover, #333, #010101);
  font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  font-size: 1.2em;
}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
  background: transparent;
  border: none;
  color: #f3f3f3;
}
input[type="color"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input:not([type])::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #f3f3f3;
}
input[type="color"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="datetime-local"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input:not([type])::-moz-placeholder, textarea::-moz-placeholder {
  color: #f3f3f3;
}
input[type="color"]:-moz-placeholder, input[type="date"]:-moz-placeholder, input[type="datetime"]:-moz-placeholder, input[type="datetime-local"]:-moz-placeholder, input[type="email"]:-moz-placeholder, input[type="month"]:-moz-placeholder, input[type="number"]:-moz-placeholder, input[type="password"]:-moz-placeholder, input[type="search"]:-moz-placeholder, input[type="tel"]:-moz-placeholder, input[type="text"]:-moz-placeholder, input[type="time"]:-moz-placeholder, input[type="url"]:-moz-placeholder, input[type="week"]:-moz-placeholder, input:not([type]):-moz-placeholder, textarea:-moz-placeholder {
  color: #f3f3f3;
}
input[type="color"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="month"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="time"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="week"]:-ms-input-placeholder, input:not([type]):-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #f3f3f3;
}
input[type="color"]:invalid, input[type="date"]:invalid, input[type="datetime"]:invalid, input[type="datetime-local"]:invalid, input[type="email"]:invalid, input[type="month"]:invalid, input[type="number"]:invalid, input[type="password"]:invalid, input[type="search"]:invalid, input[type="tel"]:invalid, input[type="text"]:invalid, input[type="time"]:invalid, input[type="url"]:invalid, input[type="week"]:invalid, input:not([type]):invalid, textarea:invalid {
  color: red;
}

input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover, textarea:hover {
  background: rgba(255, 255, 255, 0.1);
}

input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus {
  background: rgba(255, 255, 255, 0.1);
}
input[type="color"]:focus:invalid, input[type="date"]:focus:invalid, input[type="datetime"]:focus:invalid, input[type="datetime-local"]:focus:invalid, input[type="email"]:focus:invalid, input[type="month"]:focus:invalid, input[type="number"]:focus:invalid, input[type="password"]:focus:invalid, input[type="search"]:focus:invalid, input[type="tel"]:focus:invalid, input[type="text"]:focus:invalid, input[type="time"]:focus:invalid, input[type="url"]:focus:invalid, input[type="week"]:focus:invalid, input:not([type]):focus:invalid, textarea:focus:invalid {
  color: red;
}

.input-wrap {
  background: rgba(255, 255, 255, 0.2);
  margin: 0;
  padding: 0;
  width: 100%;
}
.input-wrap .input {
  display: block;
  font-size: 2.2em;
  font-style: oblique;
  margin: 5% auto 0 auto;
  outline: none;
  padding: 2em;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -moz-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  width: 100%;
}


/*Downloaded from https://www.codeseek.co/gbabula/a-pen-by-greg-babula-gvxkc */
/*

  MagicInput

    Desc. WIP
    By Greg Babula

*/


'use strict';


var body = document.querySelector('body'),
    userInput = body.querySelector('.input');


var MagicInput = (function() {
  var attachEvents = function(el) {
    el.addEventListener('input', function() {
      console.log('detected input');
    }, false);
  };
  
  var init = function(el) {
    this.attachEvents(el);
  };
  
  return {
    attachEvents: attachEvents,
    init: init
  }
}());


MagicInput.init(userInput);

Comments