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.

Cool CSS Form with Glass Effect

A form is an important component of the dynamic website. basically, use HTML form for data insertion and for data deletion. to attract the user you need to design eye-catch for, therefore good design is the most important factor of any HTML component. In this today article, I share with you eye-catch transparent form using HTML and CSS 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, download HD quality image so go to  Pixabay website and search for your favorite image there and after that download the image.
index.html
[<!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>]



Conclusion

HTML Form in progress

COMMENTS

BLOGGER: 2
Loading...
Name

ajax,1,HTML & CSS,12,PHP,7,
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://3.bp.blogspot.com/-IyUCPVXvOiE/WtR5PKXNgnI/AAAAAAAABjE/ZQyfbt7sX9Qt_Y4K9UEZi-FLsLowekMDgCLcBGAs/s640/html%2Bcss%2Bform-min.png
https://3.bp.blogspot.com/-IyUCPVXvOiE/WtR5PKXNgnI/AAAAAAAABjE/ZQyfbt7sX9Qt_Y4K9UEZi-FLsLowekMDgCLcBGAs/s72-c/html%2Bcss%2Bform-min.png
webtipstricks
https://www.webtipstricks.com/2017/08/css-html-form-with-glass-effect.html
https://www.webtipstricks.com/
https://www.webtipstricks.com/
https://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