Matteo Namoti

Matteo Namoti

1562917700

CSS Input Label Animation | HTML Form Placeholder Above Inputs

I am sure that you know what is Form’s label & placeholder. In HTML, the <label> tag is used to create labels for items in a user interface, & The placeholder attribute specifies a short hint that describes the value of an input field. Now question is that, can we use a single label for a placeholder also? Yes, we can use an <label> as a label & as a Placeholder.

Today you will learn to create an Input label animation. Which behave like a placeholder but when you click on the input field then its shift on above the input & became a label. Old days are gone when peoples used placeholder & label together in a form. You can use this on your website because this is the latest & on trend.

So, Today I am sharing CSS Input Label Animation. In other words, An HTML Form Placeholder Which Goes Above The Inputs On Click. I have used jQuery with HTML & CSS, We also can use Pure JS but jQuery is very easy. I have used jQuery for add & remove a single class from HTML element, Left all major works done in CSS HTML.

If you are thinking now how this input label & placeholder animation actually is, then see the preview given below.

Preview Of HTML Form Placeholder Above Inputs

See this video preview to getting an idea of how this project’s animation looks like.


Now you can see this visually. If you like this, then get the source code of its.

CSS Input Label Animation Source Code

Before sharing source code, let’s talk about this. In the HTML section, I have created 3 inputs with their own label, to declare each label for input I used ID & FOR. Example:

<label for="FirName">First Name</label>
<input id="FirName" type="text" class="styl"/>

In the same way, created 2 other inputs, you can create many inputs as your requirement. The class= "styl"is a temporary class which will change by jQuery. In CSS file I have placed the label middle of input, that looks like a placeholder. When you click on the input then the label’s text goes upper side or above the input.

After that, I have created a class named ‘active‘ In this class, I placed the label by -25 pixels on top. It goes on top with some delay using the CSS transition. Now jQuery (get) replaces the ‘styl‘ class with this ‘active‘ class. That’s it the whole concept.

For creating this input label animation, you have to create 3 files. First for HTML, second for CSS, & third for JS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>CSS Input Label Animation | Webdevtrick.com</title>
 
  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
 
  
</head>
 
<body>
<div class="main">
  <h1>CSS Label Animation</h1>
  <div>
    <label for="FirName">First Name</label>
    <input id="FirName" type="text" class="styl"/>
  </div>
 
  <div>
    <label for="LasName">Last Name</label>
    <input id="LasName" type="text" class="styl"/>
  </div>
  
  <div>
    <label for="Massag">Your Massage</label>
    <input id="Massag" type="text" class="styl"/>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
    <script  src="function.js"></script>
 
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
* {
  letter-spacing: 3px;
  font-family: 'Alegreya Sans SC', sans-serif;
}
body {
  color: white;
  background-color: #f05855;
}
 
h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}
 
div.main {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}
 
div.main div {
  position: relative;
  margin: 40px 0;
}
 
label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: #f05855;
  -webkit-transition: top .2s ease-in-out,  font-size .2s ease-in-out;
  transition: top .2s ease-in-out,  font-size .2s ease-in-out;
}
 
.active {
  top: -25px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
}
 
input[type=text] {
  width: 100%;
  padding: 20px;
  border: 2px solid white;
  font-size: 20px;
  font-weight: 800;
  background-color: #f05855;
  color: white;
}
 
input[type=text]:focus {
  outline: none;
}

function.js

Now create a JavaScript file named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.com )  **/
$('input').on('focusin', function() {
  $(this).parent().find('label').addClass('active');
});
 
$('input').on('focusout', function() {
  if (!this.value) {
    $(this).parent().find('label').removeClass('active');
  }
});

That’s It. Now you have successfully created CSS Input Label Animation, An HTML Form Placeholder Which Goes Above Inputs On Click.

Thanks For Visiting, Keep Visiting.

Originally published on https://webdevtrick.com

#css #css3 #html5 #html #jquery

What is GEEK

Buddha Community

CSS Input Label Animation | HTML Form Placeholder Above Inputs
anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Alisha  Larkin

Alisha Larkin

1617789060

HTML Tutorial For Beginners

The prospect of learning HTML can seem confusing at first: where to begin, what to learn, the best ways to learn — it can be difficult to get started. In this article, we’ll explore the best ways for learning HTML to assist you on your programming journey.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents meant to be displayed in a web browser. Along with Cascading Style Sheets (CSS) and JavaScript, HTML completes the trio of essential tools used in creating modern web documents.

HTML provides the structure of a webpage, from the header and footer sections to paragraphs of text, videos, and images. CSS allows you to set the visual properties of different HTML elements, like changing colors, setting the order of blocks on the screen, and defining which elements to display. JavaScript automates changes to HTML and CSS, for example, making the font larger in a paragraph when a user clicks a button on the page.

#html #html-css #html-fundamentals #learning-html #html-css-basics #html-templates

CSS Animation: translate3d, backdrop-filter, and Custom Tags

In this tutorial, we are going to learn:

  • how to create a smooth animation using the CSS transform translate3d prop.
  • why we’d want to use the cubic-bezier transition timing function and this function’s benefits.
  • how and why we use custom tags.
  • if you watch the video to the end, I also provide a bonus tip on using backdrop-filter to style some frost/blur style on background.

#css #css animation #css / style sheets #css animations #css background

anita maity

anita maity

1621077133

Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo


#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen

Matteo Namoti

Matteo Namoti

1562917700

CSS Input Label Animation | HTML Form Placeholder Above Inputs

I am sure that you know what is Form’s label & placeholder. In HTML, the <label> tag is used to create labels for items in a user interface, & The placeholder attribute specifies a short hint that describes the value of an input field. Now question is that, can we use a single label for a placeholder also? Yes, we can use an <label> as a label & as a Placeholder.

Today you will learn to create an Input label animation. Which behave like a placeholder but when you click on the input field then its shift on above the input & became a label. Old days are gone when peoples used placeholder & label together in a form. You can use this on your website because this is the latest & on trend.

So, Today I am sharing CSS Input Label Animation. In other words, An HTML Form Placeholder Which Goes Above The Inputs On Click. I have used jQuery with HTML & CSS, We also can use Pure JS but jQuery is very easy. I have used jQuery for add & remove a single class from HTML element, Left all major works done in CSS HTML.

If you are thinking now how this input label & placeholder animation actually is, then see the preview given below.

Preview Of HTML Form Placeholder Above Inputs

See this video preview to getting an idea of how this project’s animation looks like.


Now you can see this visually. If you like this, then get the source code of its.

CSS Input Label Animation Source Code

Before sharing source code, let’s talk about this. In the HTML section, I have created 3 inputs with their own label, to declare each label for input I used ID & FOR. Example:

<label for="FirName">First Name</label>
<input id="FirName" type="text" class="styl"/>

In the same way, created 2 other inputs, you can create many inputs as your requirement. The class= "styl"is a temporary class which will change by jQuery. In CSS file I have placed the label middle of input, that looks like a placeholder. When you click on the input then the label’s text goes upper side or above the input.

After that, I have created a class named ‘active‘ In this class, I placed the label by -25 pixels on top. It goes on top with some delay using the CSS transition. Now jQuery (get) replaces the ‘styl‘ class with this ‘active‘ class. That’s it the whole concept.

For creating this input label animation, you have to create 3 files. First for HTML, second for CSS, & third for JS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>CSS Input Label Animation | Webdevtrick.com</title>
 
  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
 
  
</head>
 
<body>
<div class="main">
  <h1>CSS Label Animation</h1>
  <div>
    <label for="FirName">First Name</label>
    <input id="FirName" type="text" class="styl"/>
  </div>
 
  <div>
    <label for="LasName">Last Name</label>
    <input id="LasName" type="text" class="styl"/>
  </div>
  
  <div>
    <label for="Massag">Your Massage</label>
    <input id="Massag" type="text" class="styl"/>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
    <script  src="function.js"></script>
 
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
* {
  letter-spacing: 3px;
  font-family: 'Alegreya Sans SC', sans-serif;
}
body {
  color: white;
  background-color: #f05855;
}
 
h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}
 
div.main {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}
 
div.main div {
  position: relative;
  margin: 40px 0;
}
 
label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: #f05855;
  -webkit-transition: top .2s ease-in-out,  font-size .2s ease-in-out;
  transition: top .2s ease-in-out,  font-size .2s ease-in-out;
}
 
.active {
  top: -25px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
}
 
input[type=text] {
  width: 100%;
  padding: 20px;
  border: 2px solid white;
  font-size: 20px;
  font-weight: 800;
  background-color: #f05855;
  color: white;
}
 
input[type=text]:focus {
  outline: none;
}

function.js

Now create a JavaScript file named ‘function.js‘ and put the codes.

/** Code By Webdevtrick ( https://webdevtrick.com )  **/
$('input').on('focusin', function() {
  $(this).parent().find('label').addClass('active');
});
 
$('input').on('focusout', function() {
  if (!this.value) {
    $(this).parent().find('label').removeClass('active');
  }
});

That’s It. Now you have successfully created CSS Input Label Animation, An HTML Form Placeholder Which Goes Above Inputs On Click.

Thanks For Visiting, Keep Visiting.

Originally published on https://webdevtrick.com

#css #css3 #html5 #html #jquery