While developing a WordPress template for one of my friends, he asked to have a business form over a transparent background. Though his sentence framing was not clear, his intention was to show the HTML form over a moving banner with a semitransparent background. If the form simply displays over an image, it will create readability issues. He knows, users will not use the form with readability issues and that is why he wants a semi-transparent background which will not disturb the beauty of moving banner but at the same time make the form readable. This tutorial explains the steps to create a semi (if you want, fully transparent ) background on HTML pages using CSS. Have a look at the form below.
This is a simple business form created using HTML and CSS. All it does is to collect visitors business name, email address, phone number and the real name. Though it is a simple form, some users find it irritating as the background image is a distraction while filling the form. By setting a semi-transparent background in CSS, we can make this form look better. To see the difference have a look at the image below.
Now compare these two forms. The semi-white background doesn't ruin the beauty of the background image and at the same time makes the HTML form looks better.
The logic is very simple.
Note: While giving background-color, you must use RGB format. If you use HEX color code, the opacity will be applied to the form, not to the background.
In the DIV 'bannerform' we must use the following code.
Here I use 0.4 of opacity out of 1. If 1 is used instead of 0.4, you can see a white background.
See what happens if we use opacity 1.
See the difference? The entire DIV background becomes white. Note the point rgba(255, 255, 255) is equivalent to #ffffff which means white color. If you want to set the semi-transparent green color you should use the below code.
If it is blue instead of white and green, the RGB code is,
Resources
This is a simple business form created using HTML and CSS. All it does is to collect visitors business name, email address, phone number and the real name. Though it is a simple form, some users find it irritating as the background image is a distraction while filling the form. By setting a semi-transparent background in CSS, we can make this form look better. To see the difference have a look at the image below.
Now compare these two forms. The semi-white background doesn't ruin the beauty of the background image and at the same time makes the HTML form looks better.
How to Place a Semi-Transparent background layer behind a Form
The logic is very simple.
- Create a DIV which cover the form
- Set the background color to the DIV
- Set Opacity
Note: While giving background-color, you must use RGB format. If you use HEX color code, the opacity will be applied to the form, not to the background.
<div class="bannerform">
<form>
<input type="text" placeholder="BUSINESS NAME" class="form1"/>
<input type="email" placeholder="EMAIL" class="form2" />
<input type="text" placeholder=" PHONE" class="form1" />
<input type="email" placeholder="NAME" class="form2" />
<input type="submit" value="Submit" class="submitbutton" />
</form>
</div>
<form>
<input type="text" placeholder="BUSINESS NAME" class="form1"/>
<input type="email" placeholder="EMAIL" class="form2" />
<input type="text" placeholder=" PHONE" class="form1" />
<input type="email" placeholder="NAME" class="form2" />
<input type="submit" value="Submit" class="submitbutton" />
</form>
</div>
In the DIV 'bannerform' we must use the following code.
background: rgba(255, 255, 255, 0.4);
Here I use 0.4 of opacity out of 1. If 1 is used instead of 0.4, you can see a white background.
background: rgba(255, 255, 255, 1);
See what happens if we use opacity 1.
See the difference? The entire DIV background becomes white. Note the point rgba(255, 255, 255) is equivalent to #ffffff which means white color. If you want to set the semi-transparent green color you should use the below code.
background: rgba(0, 255, 0, 0.4);
If it is blue instead of white and green, the RGB code is,
background: rgba(0, 0, 255, 0.4);
Resources
- To find the RGB color chart, visit the link below.
http://www.rapidtables.com/web/color/RGB_Color.htm
- Error: Element Style is Missing Required Attribute Scoped
- Element div not Allowed As Child of Element Span in this Context
- Prevent Malicious User Inputs In PHP Form
No comments:
Post a Comment