:strip_icc():strip_exif()/u/23263/crop619cf05922b03_cropped.jpg?f=community)
Ik heb issue waar ik even niet uit kom. en wellicht kan iemand me op de juiste weg helpen
ik heb onderstaande login pagina en css opmaak.
de bedoeling is dat ik een achtergrond plaatje op de login pagina zet. en dat lukt.
wil ik echter ook een blur toevoegen, dan blurred de hele pagina inclusief het formulier.
en juist het formulier moet niet geblurred worden.
waarschijnlijk omdat ik de blur op de body toe pas. alleen dat deed ik omdat dan de hele pagina de achtergrond krijgt. probeer ik het bijvoorbeeld in de HTML tag dan komt er als het ware een gat in het plaatje waarin het formulier zit.
heeft iemand een idee hoe ik dat voor elkaar kan krijgen?
:not geprobeerd echter lukt het me daarmee niet het formulier de excluden. op de een of andere manier blurred dan alleen het formulier en de achtergrond juist weer niet
ik heb onderstaande login pagina en css opmaak.
de bedoeling is dat ik een achtergrond plaatje op de login pagina zet. en dat lukt.
wil ik echter ook een blur toevoegen, dan blurred de hele pagina inclusief het formulier.
en juist het formulier moet niet geblurred worden.
waarschijnlijk omdat ik de blur op de body toe pas. alleen dat deed ik omdat dan de hele pagina de achtergrond krijgt. probeer ik het bijvoorbeeld in de HTML tag dan komt er als het ware een gat in het plaatje waarin het formulier zit.
heeft iemand een idee hoe ik dat voor elkaar kan krijgen?
:not geprobeerd echter lukt het me daarmee niet het formulier de excluden. op de een of andere manier blurred dan alleen het formulier en de achtergrond juist weer niet
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login - Spwm</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="login">
<p><?php include 'message.php'; ?></p>
<p> </p>
<form action="index.php" method="post" name="loginform">
<fieldset class="clearfix">
<p><span class="fontawesome-user"></span><input type="text" value="Username" name="user_name" class="username" onBlur="if(this.value == '') this.value = 'Username'" onFocus="if(this.value == 'Username') this.value = ''" required></p>
<p><span class="fontawesome-lock"></span><input type="password" value="Password" name="user_password" class="password" onBlur="if(this.value == '') this.value = 'Password'" onFocus="if(this.value == 'Password') this.value = ''" required></p>
<p><input type="submit" name="login" value="Sign In"></p>
</fieldset>
</form>
<p>Support and Feedback? <a href="mailto:example@tt.com?subject=Support and Feedback" style="text-decoration:none"><span class="fontawesome-arrow-right"></span></a></p>
</div> <!-- end login -->
</body>
</html> |
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| /* ---------- GENERAL ---------- */
body {
background: url(http://ginva.com/wp-content/uploads/2012/07/city-skyline-wallpapers-008.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: blur(5px);
z-index: 0;
}
a {
color: #eee;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
input {
border: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
line-height: 1.5em;
padding: 0;
-webkit-appearance: none;
}
p {
line-height: 1.5em;
}
.clearfix { *zoom: 1; } /* For IE 6/7 */
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after { clear: both; }
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 280px;
}
#login form span {
background-color: #363b41;
border-radius: 3px 0px 0px 3px;
color: #606468;
display: block;
float: left;
height: 50px;
line-height: 50px;
text-align: center;
width: 50px;
} |
:strip_exif()/u/67342/tnet3.gif?f=community)
/u/373849/cowava2.png?f=community)
:strip_icc():strip_exif()/u/224328/image.jpg?f=community)
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
:strip_icc():strip_exif()/u/21924/crop63d689bec88fd_cropped.jpg?f=community)
:strip_icc():strip_exif()/u/32546/crop5e623cef01555.jpeg?f=community)
