1

我想编写 CSS 和 HTML 来从 psd 文件制作这个输入论坛在此处输入图像描述

我有几个问题要问：

首先，我剪掉了背景（没有其他图形元素）。标题的样式很简单。我发现输入文本很困难：我希望当用户单击矩形时，文本和图标会消失。

这是我的CSS代码：

input{
    background: url('input-bg.png') no-repeat;
    border: none;
    width: 303px;
    height: 36px;
}
#username{
    background: url('user-icon.png') no-repeat left;
}
#password{
    background: url('password-icon.png') no-repeat left;
}

其中 input-bg.png 是以下图像： 在此处输入图像描述

<div id="form-login"><img id="member-icon" src="member-icon.png" />
    <h2>Member login</h2>
    <ul>
        <li><input type="text" id="username" placeholder="User Name"/></li>
        <li><input type="password" id="password" placeholder="Password" /></li>
    </ul>
</div>

问题是小图标没有显示，因为输入文本的背景定义覆盖了它们。有一个简单的方法可以解决这个问题吗？

有一种简单的方法可以重现右边的发光效果吗？我曾想过将 z-index 的值设置为高于其他元素的效果，但显然如果单击表单右侧的按钮或 inputtext 则会出现问题。有什么建议吗？

4

4 回答 4

5

我在想是否真的可以用 CSS width 制作这个表单gradient，所以我试了一下。

结果如下：演示

和图片中的形式不太一样，嘿嘿！我不是网页设计师。通过一些 CSS 天才的改进，你可以让它看起来和图片中的一模一样。

将?图标替换为您想要的图标。

HTML

<div class="container"> <!-- Unnecessary tag -->
    <div class="form">
        <div class="header">
            Member Login
        </div>
        <div class="body">
            <form>
                <input type="text" placeholder="Username">
                <input type="password" placeholder="Password">
                <input id="rememberme" type="checkbox">
                <label for="rememberme">Remember</label>
                <input type="submit" value="Login Now">
            </form>
        </div>
    </div>
</div>

CSS

body {
    font-family: helvetica, sans-serif;
}

@font-face {
    font-family: 'icons';
    src: url('icons.ttf')  format('truetype');
}

div, input {
    box-sizing: border-box;
}

.container {
    width: 500px;
    height: 350px;
    padding: 35px 0;
    background: -webkit-linear-gradient(left, #C2DD9A, #F5FBF0 50%, #C2DD9A); 
}

.form {
    width: 365px; height: 274px;
    margin: auto;
    background: rgba(0,0,0,.23);
    padding: 2px;
}

.header {
    height: 44px;
    line-height: 44px;
    padding-left: 30px;
    font-size: 20px;
    background: url('http://i.imgur.com/s0O9hy0.png') 325px center no-repeat, -webkit-linear-gradient(top, rgb(253,253,253), rgb(198,203,199));
}

form {
    margin: 0 31px;
}

input[type=text], input[type=password] {
    display: block;
    width: 100%;
    height: 38px;
    padding-left: 38px;
    background: url('http://i.imgur.com/s0O9hy0.png') 10px center no-repeat, -webkit-linear-gradient(45deg, #404040 0%, #404040 60%, #535353 60%, #494949);
    color: #AAA;
    border: 1px solid black;
    transition: box-shadow .3s;
}

input[type=text]:focus, input[type=password]:focus {
    outline: 0;
    box-shadow: inset 0 0 8px rgba(226,239,207,.7);
}

input[type=text] { margin-top: 36px; margin-bottom: 26px; }

input[type=password] { margin-bottom: 36px; margin-top: 26px; }

input[type=checkbox] {
    -webkit-appearance: none;
    width: 11px; height: 11px;
    border-radius: 10px;
    background: rgba(0,0,0,.5);
    margin: 0 5px;
}

input[type=checkbox]:checked {
    background: -webkit-radial-gradient(center center, circle, white 0%, white 30%, rgba(0,0,0,.5) 50%);
}
input[type=checkbox] + label {
    color: white;
    font-size: 15px;
    padding-bottom: 3px;
}

input[type=submit] {
    float: right;
    width: 134px; height: 31px;
    border: 1px solid #B7DA7C;
    background: url('http://i.imgur.com/s0O9hy0.png') 15px center no-repeat, -webkit-linear-gradient(top, #99CC4B, #73A52C);
    font-weight: bold;
    color: white;
    text-align: right;
    padding-right: 22px;
}

input[type=submit]:active {
    box-shadow: inset 0 -3 5px rgba(0,0,0,.5);
    background: -webkit-linear-gradient(top, #649126, #7DB731);
}
于 2013-05-31T03:11:07.620 回答
1

使用 before 语句怎么样？

input#username:before{
    content: url('user-icon.png');
}

http://www.w3schools.com/cssref/sel_before.asp

于 2013-05-31T00:15:28.527 回答
0

只剪掉阴影，使其成为绝对定位的 div，右：0; （假设父级是表单框）

由于阴影框下的元素不可点击（您将有一个矩形来显示三角形），因此您必须在阴影框上方制作不可见的 div，以便将输入框聚焦在点击上。

z-index 的顺序如下：

  1. 输入框
  2. 遮阳箱
  3. 单击时将焦点发送到输入框的不可见 div

这就是我首先想到的。

于 2013-05-31T00:31:46.117 回答
0

最简单的解决方案是将图标和发光样式添加到输入背景中（每个输入都不同），然后将 padding-left 添加到输入中。KISS 规则 ;)

于 2013-05-31T00:11:49.980 回答