Ground Tutorial - Best place for Beginners

Limit Character is a common feature in the input box. Whenever we see this type of JavaScript Character Limit in the input box of any type of website. The biggest example of this is Twitter. Here I have created a limit character input box. Html, CSS, and javascript are used to create. Although you can create Limit Character using the max length attribute of HTML. Limit Character In Input Field However, even if you use the maxlength attribute , you will not be able to input more than that limit in the input box. But in this case, you can input as much as you want. When your input character exceeds the limit, a kind of error will appear. Here I have used the Character's limit of 50. When you input more than 50 characters, the color of the border will change. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . As you can see above, this is a simple Javascript Limit Characters . A box has been created on the webpage. An input box has been created i

This is a simple pop-up login form created using HTML and CSS. The login form we all use on different websites. However, CSS Popup Login Form is used in many places. I have already shown you how to create an automatic popup window using JavaScript. However, this Popup Login Form has to be opened manually. There is a button on the home page that can be clicked to see the popup. There is a form in the Popup Form which can be hidden by clicking on it. Popup Login Form in HTML CSS Popup Login Form HTML CSS has a cancel button first. Then there's a heading, two input boxes, a login button, and some links.   No JavaScript or JQuery was used to activate this popup. This Popup Login Form has been created using pure HTML and CSS. See the Pen Popup Login form by Foolish Developer ( @fghty ) on CodePen . Hope you like the live preview above. Below I have shared all the code that you can copy to create this Popup Form . To create it, you first need to create an HTML and C

Here you will find the 12 Best Transparent Login Form designs. There are different types of login forms. The transparent form is one of them.  The CSS Transparent Login Forms here are beautiful and perfect for use anywhere. You can get a preview and source code of each of these designs here. 1. Transparent login form This Transparent Login Form is very simple. No color effects or animations were used. A beautiful background image has been used. Then a small box was created with a somewhat transparent background.  However, light black color has been used in the background. It has a profile image and two inputs. The first place to input is to input the email ID. The second place is to input the password.  Then there is a button that will log in by information. In the end, there is the option of forgetting the password. All in all, this is a simple and beautiful transfer login form . Demo Download 2. Transparent Login Form with floating Placeholder This login form desi

Here I have created a collection with 13 CSS Gradient Borders . CSS Border Animation is used in different places. Border plays an important role in making any element attractive. If you are looking for the Best Gradient Border Animation then you are at the right place. Here is a complete selection of each animation made by pure CSS. 1. CSS Border Animation See the Pen CSS Border Animation by Shantanu Jana ( @shantanu-jana ) on CodePen . If you want to use animated Gradient color on the border then this will be most suitable for you. Extraordinary CSS Gradient color has been used on the border here. I have already shared a step-by-step tutorial on this design.  Shadow is used with the color of the border which is animated. Those border shadows are changing color from time to time. Only CSS Gradient Borders created using HTML and CSS can be used for any purpose. Link: Demo / Source Code 2. Gradient Border CSS See the Pen [PURE CSS] border animation without svg b

In this article, you will learn how to know the user operating system with the help of JavaScript. Many times the user needs to know the operating system in different projects.  For example, suppose a user wants to download an application from your website. Many applications are different for different operating systems. So which version to download depends on the user's OS. This is a very simple project which can easily detect the user's operating system by JavaScript . But for this, you need to know some JavaScript . Detect User Operating System in JavaScript Its design is very simple. A simple box has been created on the webpage. The name of the OS that will open the webpage by the operating system can be seen here. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . 1. A place to see the results of OS First, a box is created using the button tag. Although you can create boxes with any tag instead of this button. <button id="download

Rotating Border Animation is a common web element that is used in many different places. This type of border animation can be used in various buttons, login forms, profile cards, etc. There is no substitute for this type of Rotating Border Animation to enhance the beauty. You can create this kind of simple animation using Pure CSS. Four colors have been used for the 4 edges of the box. These colors revolve around the elements. If you want to know how these are made then this tutorial will help you. Rotating Border Animation CSS Here I have given three sections. First I gave a preview which is above. From this preview, you can learn how it works. Then I gave a step-by-step tutorial.  And at the end of all, there is a button with the help of which you can directly download the code needed to create this Rotating Border Animation CSS . See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . Now the question arises in your mind about how it was made. So let u

Here you will learn how to create Realistic Image Reflections using CSS and HTML. Here I have used an image and created a reflection of that image which can be seen at the bottom of the image.  This CSS Image Reflection will look absolutely Realistic, that is, it will look as if the shadow of the image has fallen down. If you want to use an image on any of your web pages and make it a little more interesting then you can use this type of CSS Realistic Image Reflection . You only need to use one line of CSS to create this reflection. How to Create Image Reflection in CSS Here I have tried to explain to you very well how to add Realistic Reflection to the image . First I added the image using one line of HTML.  Then I designed the image using CSS. Then I added this Reflection at the bottom of the image using only one line CSS. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . If you want, you can download all the source code with the help of the bu