How do I recreate a web form like this without reducing the opacity of form elements?

Question

I want to create a form similar to this on my website. Unfortunately, when I lower the opacity of the div conaining my form elements, the e-mail, password, and text all reduce in opacity as well. How can I make a form like this where only the surrounding box is see-through, but my login elements, title, and buttons are not?

Why don't you just inspect the style on that form and see how it was done? — Philip Ramirez, Apr 18 '15 at 00:38
I found this pic on Google images and am using it for inspiration purposes. I would like to recreate the styling effects, but unfortunately don't know what website it comes from. — danp, Apr 18 '15 at 00:49

score 0 · Answer 1 · answered Apr 18 '15 at 00:40

0

You can set the opacity of the background div using rgba. For example:

.form-container { background: rgba(0, 0, 0, 0.5); }

The last parameter for rgba is the alpha value and controls the transparency of the background.

answered Apr 18 '15 at 00:40

subeeshb

478
4
10

score 0 · Answer 2 · edited May 23 '17 at 11:44

The surrounding box is not actually "see through" - you'll notice it actually contains a blurred version of the page's background image in addition to a lightened effect.

I feel the best way to achieve this, at the cost of dev-time, is to create two background images (the page's background, and a blurred, lightened version of the same in Photoshop) and set the background-image of the elements accordingly. You can use CSS's new calc function to help keep the images aligned if you're doing any advanced trickery.

The simpler approach, though considerably more CPU intensive on the web-browser and not supported by browsers older than a few years is to use CSS's blur filter. This is documented here: How to apply a CSS 3 blur filter to a background image

Philip Ramirez · Answer 3 · 2015-04-18T01:07:23.660

0

The way I've always done this has been...

<div class="overlay">
  <div class="overlay-content">
      <h2>Whatever</h2>
      <form><!-- foo --></form>
  </div>
</div>

.overlay-content has a bg color (white to lighten, black to darken) such as background-color: rgba(0,0,0,0.3); with a transparency value.

edited Apr 18 '15 at 01:07

answered Apr 18 '15 at 00:46

Philip Ramirez

2,972
1
16
16

score 0 · Accepted Answer · answered Apr 18 '15 at 01:02

Create a div with background:rgba( 255, 255, 255, 0.3 ); and than simply add the inputs which than could look somehow like this:

.login_wrapper {
    width:300px;
    height:375px;
    background: rgba( 255, 255, 255, 0.3 );
    margin:0 auto;
}
.login_wrapper h1 {
    padding-top:30px;
    text-align:center;
    color:#fff;
}
.login_wrapper input[type=text] {
    width:80%;
    height: 25px;
    margin-left: 10%;
    margin-top: 10px;
}

body {
    height: 100%;
    width: 100%;
    background:url("https://unsplash.imgix.net/photo-1428591501234-1ffcb0d6871f?dpr=2&fit=crop&fm=jpg&q=75&w=1050");
    background-size:cover;
}

<div class="login_wrapper">
    <h1>Create Account</h1>
    <input type="text"/>
    <input type="text"/>
    <input type="text"/>
</div>

I think you now get the idea.

How do I recreate a web form like this without reducing the opacity of form elements?

4 Answers4