Showing posts with label Opacity. Show all posts
So you might have stumbled across quite fancy looking form fields  and would have wondered how does this stuff actually work.
So we are going to start by making a simple form field which I made for one of my Login form(Click here to have a look at the form),the image has been attached below so you could get a basic idea what we would actually be making in this article.

Great Stuff? huh? 
Okay so firstly we are going to work on the initial state of the form field which would be when the form field is out of focus.Before doing anything else we should ofcourse make a form field in our html the code for which is given below.

<label for="username">Username:</label>
<input type="text" id="username" placeholder="Your Name">


Now let's get back to editing it via CSS,lets get started by adding an image to our form field for this purpose we would use background image,note that we would be customizing input#username which would mean that we are customizing our input field whose id is username

input#username {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
background-size:25px 80%;
text-indent: 32px;
}




Related Articles:

  






So what I actually did here is use the image from the link,added no repeat to it because of the fact that I didn't want my image to be repeated again and again through out the text field,for the positioning of the image I used background-position,background-size for ofcourse the size of the background image and the reason for the text-indent is that I don't want my text or placeholder to overlap the image therefore I moved it a bit using text-indent.

So now my form field looks like this


Now lets edit the background and stuff,for this purpose we would be adding these lines to our code


background-color:rgba(255,255,255,0.1);

If you want to understand how rgba works Click Here.

Adding the above line would make our field look like this

Now we would remove the borders by using

 border-style:none;

It becomes this

Now if you want you could make the placeholder text bolder using

 font-weight:bold;

We get a form field which looks something like this


input#username {
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
text-indent: 32px;
background-color:white;
background-color:rgba(255,255,255,0.1);
background-size:25px 80%;
font-weight:bold;
border-style:none;
}

If you want your form field to look like this even while you are typing text and stuff in it,your work is done and you can leave this article but for those who wants to change how it look when you click it you need to read further,so now what we would be doing is customizing the form field when it is active or when it is in focus for this we would use

input#username:active,input#username:focus{


}

So,now I want to change the color of form field on click so I would add

background-color:white;

also I would like to remove that image from the form field on click so for this purpose I used 

background-image:none;

and also I changed the font from bold to normal style using

font-weight:normal;


So the code when input is on focus or active becomes:


input#username:active,input#username:focus{
background-color:white;
background-image:none;
font-weight:normal;

}


The overall code becomes:

input#username {
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
text-indent: 32px;
background-color:white;
background-color:rgba(255,255,255,0.1);
background-size:25px 80%;
font-weight:bold;
border-style:none;
}

input#username:active,input#username:focus{
background-color:white;
background-image:none;
font-weight:normal;

}



Now if you want to add smooth transition effects add the following lines to input#username

-webkit-transition:all 0.5s ease;
 -moz-transition:all 0.5s ease 0s;

So my final code becomes


input#username {
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3oGQ1X7N9LStvvNs1bv7jvSCi00VN8caJ19ezuMqqDLzPK1T4wZH1SbleAHjDiSdSVupu-7Dg14x2PgYrOIMO6NSdO67f01x1TpS-RVZY8ynox2O0AWf2VCKZ4CLYLJcfhI83THLoBM/s1600/user.png);
background-repeat: no-repeat;
background-position:2% 50%;
text-indent: 32px;
background-color:white;
background-color:rgba(255,255,255,0.1);
background-size:25px 80%;
font-weight:bold;
border-style:none;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease 0s;
}

input#username:active,input#username:focus{
background-color:white;
background-image:none;
font-weight:normal;

}

Using this method you can easily customize your form field,you can change color of text,font,text-shadow,box-shadow etc. The possibilities are endless,the only limitation is your mind.

Post your pieces of work in the comment section below.


If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page
Looking at various websites out there we stumble upon parts of the web which are semi transparent.

The Problem

Lets look at the following example

<div style="opacity:0.5;background-image:url(......);">
          <div><p> Checking Transparency</p></div>
</div>

So what' going to happen here? Would this work?
The answer is yes, but there is a con to it,as we all know that child elements adopt the properties of the parent elements so in this case the opacity for the child div which displays the text would also be changed to 0.5.

So now the real question,how to overcome this?

Your solution would be something like this

<div style="opacity:0.5;background-image:url(......);">
          <div style="opacity:1;"><p> Checking Transparency</p></div>
</div>


But  this wouldn't work either because of the fact that the properties of parent element are given the most property.

The Solution

I have come across a number of solutions , I would be mentioning some of them down in this article

1.Separate div for Background

So this might not be the easiest method but this is what I used to do at the beginning when I just got started(Because I was too lazy to google regarding how to overcome this problem)

Here's the code which will help you understand how's this working

<div>
     <div style="background-image:url(......);opacity:0.5;">
     </div>
     <div> <p>We have a text with no transparency</p></div>
     <.div>
</div>


So what did we actually here?
Simple enough we didn't apply the opacity to parent element ,instead we just applied opacity to its child(which is the sibling to our element with text) ofcourse the properties of one sibling doesn't apply on another one,so yes now we have a background in a separate div which is a sibling to our div with text so the opacity of div with text is 1 now.

Note:There is a reason why we made a div with text after the div with background the reason for that is that our code runs from top to bottom so in this case the browser first applies the image then it shows the text over it, if we used the div with text before the div with background the image would come over our text.

2.RGBA Method

Another method we could use is RGBA method it looks something like this

<div style="opacity:rgba(0,0,0,0.5);">
      <div><p>Text with no transparency</p></div>
</div>

So in this case the last part of our rgba which is 0.5 is the opacity to the background of parent element,the con to this method is that the older version of internet explorer doesnt support this method.
In order to overcome this use this in your stylesheet

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cff66000,endColorstr=#4cff66000);





So we see an 8 digits hex code here where first 2 digits represent opacity,the second two digits represent red and so on but to apply opacity in this case you would need to use a hex calculator from here(make sure you multiply from hex into hex and answer should also be in hex):



Click here



So if i want an opacity of 0.3 I would multiply 0.3 * 225

and the answer i would get would be 66f I added 66 into the first two places in my 8 digit hex code and hola i now have a div with opacity 0.3.



Other Articles:





















If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page






































Subscribe to:
Posts (Atom)