Chia sẻ TOP UI/UX Design Trends 2020 tuyệt đẹp cho người Front-End

byĐức Hiền Technical •tháng 9 05, 2020

5

Chào tất cả anh em đến với Blog của mình ngày hôm nay, hôm nay mình viết bài liên quan đến chia sẻ về UI/UX Design đang là Trend 2020. Chiều hôm nay mình tình cờ thấy Anh Trần Anh Tuấn là Admin của Blog EvonDev , Blog anh ấy chia sẻ về những kiến thức chuyên sâu về Frontend, ngày hôm nay cũng là ngày theo mình được biết là sinh nhật anh ấy thì phải hehe, nên anh ấy đã public chia sẻ một chủ đề mà rất được được anh em làm Frontend chú ý quan tâm đó là UI Design do anh ấy tự Code lại và đã chia sẻ trên nhóm J2 Team, nên hôm nay mình xin phép anh ấy chia sẻ trên Blog của mình để anh em nào cần thì vào xem nhé! Và không dài dòng nữa chúng ta bắt đầu chiêm ngưỡng những TOP UI rất tuyệt để đi làm hoặc một dự án nào đó.

#1. Login Form

Đây là Code HTML các bạn đưa vào nhé


<head>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossOrigin="anonymous" />
</head>

<form class="login-form" autocomplete="off" action="#">
    <input type="email" name="email" placeholder="Email" />
    <div class="input-icon">
        <input type="password" name="email" placeholder="Password" />
        <i class="fa fa-eye show-password"></i>
    </div>
    <a href="#" class="forgot">Forgot password?</a>
    <button>Sign in</button>
</form>

Code CSS:

  
  :root {
    --primary: #08aeea;
    --secondary: #13D2B8;
    --purple: #bd93f9;
    --pink: #ff6bcb;
    --blue: #8be9fd;
    --gray: #333;
    --font: "Poppins", sans-serif;
    --gradient: linear-gradient(40deg, #ff6ec4, #7873f5);
  }


  input,
  button,
  textarea,
  select {
    font-family: var(--font);
    font-size: 1.4rem;
    font-weight: 300;
    outline: none;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    -webkit-appearance: none;
  }

  button {
    cursor: pointer;
  }
  
          .login-form {
            max-width: 30rem;
            margin: 0 auto;
            padding: 1.5rem;
          }
          .login-form input {
            padding: 1.5rem;
            border: 1px solid #eee;
            color: #333;
            border-radius: 4px;
            margin-bottom: 1.5rem;
            display: block;
            width: 100%;
            transition: border 0.25s linear;
            font-weight: normal;
          }
          .login-form input:focus {
            border-color: var(--primary);
          }
          .login-form .forgot {
            display: inline-block;
            text-transform: uppercase;
            color: #333;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
          }
          .login-form button {
            width: 100%;
            padding: 1.5rem;
            border-radius: 4px;
            color: white;
            background-color: var(--primary);
            text-transform: uppercase;
          }
          .login-form .input-icon {
            position: relative;
          }
          .login-form .input-icon input {
            padding-right: 4rem;
          }
          .login-form .input-icon i {
            position: absolute;
            top: 50%;
            right: 1.5rem;
            transform: translateY(-50%);
            color: #ccc;
            cursor: pointer;
          }

Code JS:

		const loginForm = document.querySelector(".login-form");
        const showPasswordIcon =
          loginForm && loginForm.querySelector(".show-password");
        const inputPassword =
          loginForm && loginForm.querySelector('input[type="password"');
        showPasswordIcon.addEventListener("click", function () {
          const inputPasswordType = inputPassword.getAttribute("type");
          inputPasswordType === "password"
            ? inputPassword.setAttribute("type", "text")
            : inputPassword.setAttribute("type", "password");
        });

Và đây là sản phẩm khi chúng ta Code ra, thật chúng ta có Form tuyệt đẹp về UI đúng không nào! Các bạn yên tâm mình sẽ chia sẻ hết trong TUT này:

Live Preview Download

wdwdwdwdw

Related posts: