CSS HTML Form With Glass Effect

HTML Form is the most important part of HTML language. basically, we use a form for data insertion and for data updating. good form design creates good effect.

HTML Form is the necessary part of HTML language. basically, use HTML form for data insertion and for data deletion. so if your form is a good design then it is created a good effect on the user. therefore good design is the most important factor of any HTML component. in this article, I share with you how we can create transparently login form using HTML and CSS language. first, I want to show you what type of design we are creating in this article so below is the form design.

html form

Download HD Quality image

First, we need to download HD quality image simply go to Pixabay website and search for your favorite image there and after that download the image.
Now open your favorite text editor in my case is the sublime editor and create an index.html page, now copy the entire code and paste in style tag area.

[<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Form with Glass Effect</title> <style type="text/css"> body{ background-image: url('backg.jpg'); background-size: cover; } .aa{ width: 300px; height: 260px; background-color: rgba(0,0,0,0.5); margin: 0 auto; margin-top: 40px; padding-top: 10px; padding-left: 50px; -webkit-border-color: 15px; -moz-border-color: 15px; -ms-border-color: 15px; -o-border-color: 15px; border-color: 15px; color:white; font-weight: bolder; -webkit-box-shadow: inset -4px -4px rgba(0,0,0,0.5); box-shadow: inset -4px -4px rgba(0,0,0,0.5); font-size: 18px; } .aa input[type="text"]{ width: 200px; height: 35px; border:0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding-left: 5px; } .aa input[type="password"]{ width: 200px; height: 35px; border:0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding-left: 5px; } .aa input[type="submit"]{ width: 200px; height: 35px; border:0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: skyblue; font-weight: bolder; }</style> </head> <body> <div class="aa"> <h2>Login</h2> <form> <input type="text" placeholder="Enter Your Username"><br><br> <input type="password" placeholder="Enter Your password"><br><br> <input type="submit" value="Submit"><br> </form><!-- close form --> </div><!-- close aa --> </body> </html>]
Now save your file and open your file in a browser to see the code preview, for more information watch the video. 






Conclusion

HTML Form in progress

COMMENTS

Name

bootstrap,1,CSS,6,Example,3,HTML,6,login,1,mysql,3,PHP,5,
ltr
item
webtipstricks: CSS HTML Form With Glass Effect
CSS HTML Form With Glass Effect
HTML Form is the most important part of HTML language. basically, we use a form for data insertion and for data updating. good form design creates good effect.
https://4.bp.blogspot.com/-MhiXzTf17IY/WZlih7rmrmI/AAAAAAAABUE/JKeTioRrfPE5P-r_zeKkKgJoNJGGy97dgCEwYBhgL/s640/html%2Bform.png
https://4.bp.blogspot.com/-MhiXzTf17IY/WZlih7rmrmI/AAAAAAAABUE/JKeTioRrfPE5P-r_zeKkKgJoNJGGy97dgCEwYBhgL/s72-c/html%2Bform.png
webtipstricks
http://www.webtipstricks.com/2017/08/css-html-form-with-glass-effect.html
http://www.webtipstricks.com/
http://www.webtipstricks.com/
http://www.webtipstricks.com/2017/08/css-html-form-with-glass-effect.html
true
4027471107773963481
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy