CSS to achieve landing page Transparency example

Source: Internet
Author: User

A few days ago thinking about practicing transparency, the result set foot on a variety of no return.

Let's start with a simple two-sentence transparency:
Background:rgba (255, 255, 255, 0.3);

The last one here is transparency, with a full value of 1, which means that opaque 0 represents full transparency.

The transparency problem solves easily, then attempts to adjust the button and the InputBox to the same size time but encountered the question, in order to be beautiful, I set up in the InputBox inside the padding, attempts to put the text to the right by some, in order to play the esthetic function, The result padding is not in the width, in other words, you may need to calculate the width you want, but this is clearly contrary to the principle of percentage positioning.

About this, you can see here again: Box model-Learn CSS layout

Then the craftsman wrote an example to me under my bitter Request: landing page

Homeopathy read a few found a lot of good goods: Box-sizing:border-box, this can solve our calculation of the width of the problem, in the W3school and ff out of the layout tutorial are recorded.

Border-box:

The width and height of the element determines the bounding box of the element.
That is, any inner margin and border that you specify for an element will be drawn within the width and height you have set.
The width and height of the content can be obtained by subtracting the border and the inner margin from the set width and height respectively.

If you need to cancel, use unset (or Content-box).

Then say about Transform,transform is CSS3, but in terms of expressiveness, but not just positioning, you can see, he can also rotate, xyz three directions can be, but magical.

Transform:translatey (-38.2%); This sentence is the Y axis up to 38.2% (relative to oneself), transform?? /p>

Example


<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Login Page </title>
<style type= "Text/css" >
HTML, Body {
margin:0 Auto;
padding:0;
height:100%;
}

Body {
Background-image:url (' bg.jpg ');
}

. container.duel {
width:100%;
height:100%;
/*background:rgba (255, 255, 255, 0.2);
*/  }

. container {
margin:0 Auto;
padding:0;
}

H1 {
margin:0 Auto;
padding:0;
}

. input-box-line {
margin:20px Auto;
padding:100px;
width:15%;
/* border:2px solid #fff;
border-radius:5px;
Background:rgba (255, 255, 255, 0.2);
}

. input-box-line>h1 {
Margin-top: -20px;
margin-bottom:20px;
Text-align:center;
font-family: ' Microsoft Yahei ';
}

Input[type=text], Input[type=password] {
Color: #fff;
font-family: ' Microsoft yahei Light ';
MARGIN:5PX Auto;
/* padding-left:20px;
* * DISPLAY:BLOCK;
border:1px solid #fff;
border-radius:5px;
Background:rgba (255, 255, 255, 0);
height:40px;
width:100%;
}

Input[type=button], Input[type=submit] {
Color: #fff;
font-family: ' Microsoft yahei Light ';
MARGIN:5PX Auto;
Display:block;
border:1px solid #fff;
border-radius:5px;
Background:rgba (255, 255, 255, 0);
height:40px;
width:100%;
}

  input[type=button]:hover, Input[type=submit]:hover {
   background:rgba (255, 255 , 255, 0.3);
  }
 </style>
<body>
 <div class= "Container Duel"
 & Nbsp;<div class= "Input-box-line" "
   <input type=" text "name=" Usrname "placeholder=" username ""
   <input type= "password" name= "password" placeholder= "password"
    <input type= "Submit" value= "Login"
   <input type= "button" value= "registration"
   </div>
 </div>
</body>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.