Forem: Ground Tutorial

Simple Copy to Clipboard using JavaScript & CSS

Ground Tutorial — Tue, 15 Mar 2022 14:33:54 +0000

This tutorial will help you to know how to create Copy to Clipboard using JavaScript. Earlier I shared many more types of JavaScript Copy to Clipboard tutorials.

However, this design is relatively simple. If you are a beginner then this tutorial will help you a lot.

Copy to Clipboard JavaScript is a simple project that helps to copy the information contained in an input box or text area.

✅✅ Live Preview 👉👉 Copy to Clipboard JavaScript

This means you can use this type of project if you need to copy some of the text in a box. This Copy to Clipboard design can copy all the tests in that box with a single click.

JavaScript Copy to Clipboard

The projects I shared earlier were relatively difficult. In which a lot of JavaScript or JQuery was used. However, in this Copy to Clipboard I have used only two lines of JavaScript.

As a result, if you do not know much about JavaScript, you can understand how to make copy to clipboard html. First I created a box on the webpage.

In which we have created an input box using textarea. Here you can use the input function instead of the text area. Then there is a button that you can click to copy the information in the text.

Copy to Clipboard html code

I used HTML CSS and JavaScript to build it. I have added the basic information of this Copy to Clipboard project using the following HTML.

First I created an area. Then we created an input space using texturia. Has then created a button that has been used to create HTML's button function.

<div class="container">
   <textarea type="text" id="text">hi</textarea>

   <button onclick="copy('text')">Copy Text</button>
</div>

Design it with css code

Above we have added basic information using HTML. Now is the time to design this project using CSS. Very little CSS has been used here.

First the webpage was designed and I used the blue color of the web page background. Then I designed the box. The background of the box is white and the width of the box is 350px is used.

Here a border of 2 px is used around the textaria and the minimum height is 150px. I have designed the button at the end of it all. Button's background is blue and test color is white.

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body {
 background: rgb(6, 118, 185);
 text-align: center;
 align-items: center;
 justify-content: center;
}

.container {
 width: 350px;
 background: white;
 margin: 100px auto;
 padding: 15px;
 border-radius: 4px;
}

.container textarea {
 width: 100%;
 min-height: 150px;
 border: 2px solid rgb(11, 127, 205);
 padding: 4px;
 font-size: 16px;
}

.container button {
 padding: 11px 22px;
 background: rgb(17, 106, 198);
 color: white;
 border: none;
 border-radius: 3px;
 font-size: 17px;
 margin-top: 8px;
}

Activate Copy to Clipboard with JavaScript

I have done the basic design work of this JavaScript Copy to Clipboard. Now it's time to activate this copy box with JavaScript.

I have used only two lines of js code here. Below I have provided the required information for each line.

//Pass the id of the <input> element to be copied as a parameter to the copy()
let copy = (textId) => {
  //Selects the text in the <input> elemet
  document.getElementById(textId).select();
  //Copies the selected text to clipboard
  document.execCommand("copy");
};

Hopefully you have been able to create this Simple Copy to Clipboard project using the tutorial and source code above.

Earlier I shared many more tutorials on JavaScript Copy to Clipboard. Use the comment box below if you have any questions.

✅✅ Download Source Code 👉👉 JavaScript Copy to Clipboard

Floating Label Animation using HTML CSS (Free Code)

Ground Tutorial — Thu, 10 Mar 2022 18:21:08 +0000

If you want to know how to create Floating Label Animation then this tutorial will help you. Here I have shared the information on how to add Floating Label in the input box. Earlier I shared another tutorial where I added Floating Label in the login form.

Here I have shown how to create css Floating Label input box using HTML and CSS. Here I have used some amount of jquery. The input box we all use. Basically login form, registration form is the most used input.

✅✅ Live Preview 👉👉 Floating Label Animation

Labels are used in input boxes to create input box identities. When you click on the input box, the Label will move slightly upwards and the placehold will be visible.

HTML of the Floating Label input box

We have added the information required to create this Floating Label Animation using the following HTML code. Here I have used two input boxes.

The first input box to input the username and the second input box email id. Placeholds and labels are used in each input box.

<!--Basic area of the project-->
 <div class="container">
<!--Place to input the name-->
    <div class="input">
      <input type="text" id="name" class="inside-input" placeholder="Enter your name" />
      <label for="name">Name</label>
    </div>
<!--Place to input the email-->
    <div class="input">
      <input type="text" id="email" class="inside-input" placeholder="Enter your email" />
      <label for="email">Email</label>
    </div>

  </div>

Floating Label Animation CSS

First I did the basic design of the webpage and used the background color. Then I designed Basic Area which will have two input boxes.

The width of that area: 330px,height: 250px. Boxes depend on width: 100% and size padding. When you click on the input box, the label will move slightly upwards and the placehold will be visible.

 *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family:  sans-serif;
}
/* Basic design of webpage */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #40e0d0;
background: rgb(10, 164, 222);
color: #1d1f20;
}
/*Design of the basic structure of the project*/
.container {
display: flex;
justify-content: center;
flex-direction: column;
margin: 1rem auto;
background: rgba(255, 255, 255, 0.75);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
border-radius: 10px;
width: 330px;
height: 250px;
padding: 0 2rem 0 2rem;
border-radius: 5px;
text-align: center;
}
/* Design the places to input */
.input {
max-width: 300px;
position: relative;
}
.input:nth-child(1){
  margin-bottom: 50px;
}
input {
background-color: transparent;
position: relative;
border: 2px solid #333;
font-size: 1.1rem;
width: 100%;
padding: 10px 6px;
border-radius: 5px;
font-weight: 400;
outline: none;
transition: all 0.2s ease-in-out;
}
input.inside-input {
border: none;
border-bottom: 2px solid #333;
border-radius: 0;
}
/* The placeholder in the input box has been designed */
/*Arrangements have been made to hide the placeholder. For that I have used 'opacity: 0'.*/
input::placeholder {
color: #333;
transition: opacity 0.2s ease-out;
opacity: 0;
}
/* Placehold will be visible when you click in the input box. */
input:focus::placeholder {
transition: opacity 0.2s 0.1s ease-out;
opacity: 1;
}
/* The following code has helped to design the label */
label {
position: absolute;
pointer-events: none;
font-size: 1.3rem;
color: #333;
top: 10px;
left: 11px;
transition: all 0.2s ease-in-out;
}
/* When the input box is clicked, the label will move slightly upwards. */
input.onFocus + label {
color: #ff0061;
font-size: 1.2rem;
top: -28px;
left: 10px;
font-weight: 700;
}

Activate Floating Label with Jquery

Above we have added the required information to create this Floating Label Animation. Now it needs to be implemented using some amount of jQuery.

  $(".input input")
//The 'onFocus' class will be added when you click on the input box.
    .on("focus", function () {
      if (!$(this).hasClass("onFocus")) {
        $(this).addClass("onFocus");
      }
    })
//The 'onFocus' class will be removed when you click elsewhere.
    .on("blur", function () {
      if ($(this).val() === "" && $(this).hasClass("onFocus")) {
        $(this).removeClass("onFocus");
      }
    });

Hopefully you have been able to create floating level input boxes using the above codes.

Earlier I shared a tutorial on Login Form with Floating Label. If you want the code of Floating Label Animation css then use the link below.

✅✅ Download Source Code 👉👉 Floating label input box

Simple Transparent Login Form using HTML CSS

Ground Tutorial — Wed, 09 Mar 2022 19:53:41 +0000

You must have heard about Transparent Login Form which is much more interesting than normal login form. The only difference between the normal login form and the css transparent login form.

In the case of transparent login form html, the elements in the background are clearly visible. That means the background of the login form is completely transparent. It is much more attractive and beautiful than the general design.

✅✅ Live Preview 👉👉 Transparent Login Form

In this tutorial I have shown you how to create a simple transparent login form using HTML and CSS. Earlier I shared with you the tutorials of different types of login forms.

If you know Basic HTML CSS then you can create this Transparent Login Form html css.

Transparent Login Form HTML Code

This simple transfer login form has been created using the following html codes. Here I first gave all the information then designed by css. First we created the basic structure of the login form.

A heading has been created first in the Transparent Login Form. Then created two input boxes within an input area. The first input box is to input the email ID and the second input box is the password. Then there is a simple login button.

There are two social sharing buttons at the end of all. If you want to create this project (Transparent Login Form with HTML and CSS) then you can copy all the following HTML codes and use them in your html file.

<!--Basic structure of login form-->
<div class="content">
<!--heading -->
 <div class="text">Login Form</div>

  <form action="#">
<!--Place to input email-->
    <div class="field">
      <span class="fa fa-user"></span>
      <input type="text" placeholder="Email Id" required>
    </div>

<!--Place to input password-->
    <div class="field">
      <span class="fa fa-lock"></span>
      <input type="password" placeholder="Password">
    </div>
 <!--login button -->   
    <button>Log in</button>

    <div class="or">Or</div>
<!--social icon -->
   <div class="icon-button"> 
      <span class="facebook"><i class="fa fa-facebook"></i>  Facebook</span>
      <span><i class="fa fa-google"></i>  Google</span>
   </div>

  </form>
</div>

Transparent Login Form CSS

As you can see above, all the information has been added by the HTML code. Now it has to be designed by CSS code. Here I have used absolutely simple css. If you have a general idea about css then you can easily understand.

First I designed the webpage using some amount of css and used a background image in the webpage. You can change the image of your choice here. Then I created the basic structure of the Transparent Login Form.

The width: 330px and height of this login form depends on the amount of content. The background is completely transparent so shadow has been used here to understand the size of the element.

Then I designed the headings and input spaces. After all, I have designed the social sharing buttons. Backdrop-filter: blur (10px) has been used to blur the background of the buttons.

/*Basic design of webpage*/
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

 html{
  background: url("http://driving-tests.org/wp-content/uploads/2012/03/night-road.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px;
 }

body{
  display: grid;
  place-items: center;
  text-align: center;
  background-size: cover;
}
/*Basic design of login form*/
.content{
  width: 330px;
  border-radius: 10px;
  padding: 40px 30px;
  margin-top: 100px;
  box-shadow: -3px -3px 9px #aaa9a9a2,
              3px 3px 7px rgba(147, 149, 151, 0.671);
}
/*Design the headings*/
.content .text{
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 35px;
  color: rgb(247, 233, 233);
}
/*Design the input spaces*/
.content .field{
  height: 50px;
  width: 100%;
  display: flex;
  position: relative;
}

.field input{
  height: 100%;
  width: 100%;
  padding-left: 45px;
  font-size: 18px;
  outline: none;
  border: none;
  color: #e0d2d2;
  border: 1px solid rgba(255, 255, 255, 0.438);
  border-radius: 8px;
  background: rgba(105, 105, 105, 0);
}

.field input::placeholder{
  color: #e0d2d2a6;
}
.field:nth-child(2){
  margin-top: 20px;
}

.field span{
  position: absolute;
  width: 50px;
  line-height: 50px;
  color: #ffffff;
}
/* login button */
button{
  margin: 25px 0 0 0;
  width: 100%;
  height: 50px;
  color: rgb(238, 226, 226);
  font-size: 18px;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.438);
  border-radius: 8px;
  background: rgba(105, 105, 105, 0);
 margin-top: 40px;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}

.content .or{
  color: rgba(255, 255, 255, 0.733);
  margin-top: 9px;
}
/* social buttons */ 
.icon-button{
  margin-top: 15px;
}
.icon-button span{
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 6px;
  padding-bottom: 6px;
   color: rgba(244, 247, 250, 0.795);
 border-radius: 5px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.164);
    backdrop-filter: blur(10px);
}

.icon-button span.facebook{
  margin-right: 17px;
}

button:hover,
.icon-button span:hover{
  background-color: #babecc8c;
}

We hope you have been able to create the login form for this transparent using the codes above.

I have already shared a step-by-step tutorial on how to create a transparent login form. If you do not understand the code above then you can follow that tutorial.

If you want the source code of this Transparent Login Form css then use the link below.

✅✅ Source Code 👉👉 Transparent Login Form

Animated Login Form Using HTML and CSS

Ground Tutorial — Mon, 07 Feb 2022 11:41:58 +0000

In this article I have shown you how to create an animated login form using HTML and CSS. Earlier I shared with you the design of different types of login forms.

Border animation has been used in this case. The design of the animated login form that I have seen before is very complex. HTML CSS and JavaScript were used there.

However, this animated login form is very simple. Only border-color animation is used, for which only HTML and CSS are used.

Animated Login Form Using HTML CSS

The necessary information for the login form such as text, input boxes and buttons has been created using HTML. Forms have been designed using CSS and animations have been added.

Below is a video that will help you get a live demo of it. In this video I have shared the complete tutorial.

As you can see above, this is a simple login form. Where a heading is used first and then a username, a box created to input the password. Four color animations can be noticed on the border of this login form.

@Keyframes have been used to make this animation work. To make it, you must have a basic idea about HTML and CSS.

Related Post

Here I have given the required source code and tried to give a possible explanation of each code. If you want step by step tutorial then you can watch the video above.

1. HTML of Animated Login Form

The following HTML codes are used to generate the basic information of the login form. First I used four (span) which are used for border animation around this login form.

Then I used a heading. Then I created two input boxes to input the username and password. I used the input function of HTML to create the input boxes. Then there is a login button.

<form action="" class="form">
<!-- Border Animation -->
   <span></span>
   <span></span>
   <span></span>
   <span></span>
<!-- Login Form Area -->
 <div class="form-inner">
   <h2>LOGIN</h2>
<!-- Input Place -->
    <div class="content">
      <input class="input" type="text" placeholder="Username" />
      <input class="input" type="password" placeholder="Password" />
      <button class="btn">LOGIN</button></div>
   </div>
</form>

2. Animated Login Form CSS Code

Basic design of login form and animation has been added using the following CSS code. First I designed the webpage then the basic design of the animated login form.

I have added animation at the end of all. @Keyframes have been used to make the animation work. Four types of color animation have been used for the four aspects.

If you have a basic idea about keyframes, you can easily understand how the animations work.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Design the webpage */
body {
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #0c0116;
}
/* Basic structure of login form */
.form {
position: relative;
padding: 60px 15px;
width: 270px;
height: 350px;
background: #0c0116;
overflow: hidden;
box-shadow: 0px 0px 10px 0px rgb(116, 119, 114);
border-radius: 5px;
}
/* The main area of the login form */
.form-inner {
position: absolute;
height: 98%;
width: 98%;
top: 50%;
left: 50%;
background: #0c0116;
transform: translate(-50%, -50%);
}

.content {
height: 100%;
width: 100%;
padding: 25px;
}
/* Heading design of login form */
.form-inner h2 {
font-size: 25px;
color: #d7a3d7;
text-align: center;
padding-top: 35px;
}
/* Place to input the login form */
.input {
display: block;
padding: 12px 15px;
width: 100%;
left: 50%;
border-radius: 10px;
margin-top: 20px;
border: 1.5px solid rgb(109, 87, 121);
outline: none;
background: #19052c;
color: white;
}
/* Login button */
.btn {
cursor: pointer;
color: white;
margin-top: 40px;
width: 100%;
padding: 12px;
outline: none;
background: #800080;
border: none;
font-size: 18px;
border-radius: 10px;
transition: 0.4s;
}
.btn:hover {
background: #c907c9;
}
/* Border animation of login form */
.form span {
position: absolute;
height: 50%;
width: 50%;
}
/* Animation of the first line */
.form span:nth-child(1) {
background: #ffda05;
top: 0;
left: -48%;
animation: 5s span1 infinite linear;
animation-delay: 1s;
}

@keyframes span1 {
0% {
  top: -48%;
  left: -48%;
}
25% {
  top: -48%;
  left: 98%;
}
50% {
  top: 98%;
  left: 98%;
}
75% {
  top: 98%;
  left: -48%;
}
100% {
  top: -48%;
  left: -48%;
}
}
/* Animation of the second line */
.form span:nth-child(2) {
background: #00a800;
bottom: 0;
right: -48%;
animation: 5s span2 infinite linear;
}

@keyframes span2 {
0% {
  bottom: -48%;
  right: -48%;
}
25% {
  bottom: -48%;
  right: 98%;
}
50% {
  bottom: 98%;
  right: 98%;
}
75% {
  bottom: 98%;
  right: -48%;
}
100% {
  bottom: -48%;
  right: -48%;
}
}
/* Animation of the third line */
.form span:nth-child(3) {
background: #800080;
right: -48%;
top: 0px;
animation: 5s span3 infinite linear;
}

@keyframes span3 {
0% {
  top: -48%;
  left: -48%;
}
25% {
  top: -48%;
  left: 98%;
}
50% {
  top: 98%;
  left: 98%;
}
75% {
  top: 98%;
  left: -48%;
}
100% {
  top: -48%;
  left: -48%;
}
}
/* Animation of the fourth line */
.form span:nth-child(4) {
background: #ff0000;
bottom: 0;
right: -48%;
animation: 5s span4 infinite linear;
animation-delay: 1s;
}

@keyframes span4 {
0% {
  bottom: -48%;
  right: -48%;
}
25% {
  bottom: -48%;
  right: 98%;
}
50% {
  bottom: 98%;
  right: 98%;
}
75% {
  bottom: 98%;
  right: -48%;
}
100% {
  bottom: -48%;
  right: -48%;
}
}

Hopefully you can create this animated login form using the code above. If there is any difficulty then you can definitely let me know by commenting.

If you want you can download all the source code to create this animated login form.