我该如何使用HTML和CSS重新创建这个设计？

Question

我希望从一些HTML/CSS大师那里得到一些有用的建议。我正在建立一个网站，帮助附近的人找到公寓。我和我的一位做图形设计的朋友合作，他创建了一些非常漂亮的模型，现在我正在用HTML/CSS实现它们。

我附上了一个筛选器的图像，并想知道应该如何创建它们。如果我使用CSS来样式化药丸形状的输入，它可能无法在所有浏览器上工作。我应该采取创建小的、重复的蓝色线条来形成输入背景的方法吗？

我不是要求有人为我编写代码，但我想知道是否有人有关于采用CSS或基于图片的方法构建看起来像附件模型的设计的建议。

- wlindner

---

@Dave Newton — 假设您希望它仅在实现CSS 3功能的浏览器上工作，并且曲线在不同按钮上的长度不同，因为它们根据按钮的宽度进行缩放。 - Quentin

@Quentin 末端是单独的图像。 - Dave Newton

@Quentin 我不明白你为什么这样想。虽然我指的是重复，而不是拉伸，但水平拉伸不会对垂直方向产生任何影响。 - Dave Newton

@Dave Newton - 我认为你说“stretched”是因为... - Quentin

@Quentin 但那些将是图像；我说的是不变的背景——紧贴在文本后面的部分。由于它们可以单独选择，所以它们显然是不同的“段落”。 - Dave Newton

Answer 1

这取决于你的受众。我只针对最新的浏览器进行开发，因此选择最新的CSS。在CSS中几乎可以实现任何事情。如果你必须支持旧版浏览器，则使用JS作为替代方案。

以下是我在约20分钟内使用纯CSS所做的内容。当然它可能会更好，但我不想再花更多的时间，只是想让你开始学习这种方法。

演示如下：http://jsfiddle.net/ThinkingStiff/PHTsb/ HTML:

<div id="bedrooms" class="button">
    <div id="walking">Walking</div>
    <div class="body">Bedroom</div>
    <div class="count">1</div>
    <div class="down">&#x25bc;</div>
</div>

CSS：

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Satisfy);

body
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQI12Pw8fH5X19fD8YMMAZIkAHGANEAiZwUkmznO8QAAAAASUVORK5CYII=);
}

#bedrooms
{
width: 146px;        
}

.button
{
background-color: #65c3e6;
background-image: linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -webkit-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -moz-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -o-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -ms-linear-gradient( 
    top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
border-bottom: 1px solid #4998b8;
border-radius: 22px;
border-top: 1px solid #cbeef7;
box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-webkit-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-moz-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-o-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-ms-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
color: white;
height: 36px;
margin: 30px 0 0 30px;
position: relative;
}

#walking
{
font: bold 24px Satisfy;
left: -17px;
letter-spacing: -2px;
position: absolute;
text-shadow: 3px 3px 3px rgba(69,69,69,.2), -1px 1px 1px rgba(69,69,69,.1);
top: -13px;
transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
}

.body
{
border-right: 1px solid #73c7e6;
display: inline-block;
font: normal 24px/24px Yanone Kaffeesatz;
height: 30px;
margin-left: 10px;
padding: 6px 8px 0 0;
text-shadow: 1px 1px 1px rgba(69,69,69,.2), -1px 1px 1px rgba(69,69,69,.1);
text-transform: uppercase; 
vertical-align: top;
}

.count
{
border-left: 1px solid #8fd4eb;
color: #185269;    
display: inline-block;
font: bold 16px/16px Helvetica, Arial;
height: 25px;
padding: 11px 6px 0 8px;
margin-left: 1px;
text-shadow: 1px 1px 1px rgba(255,255,255,.3), -1px 1px 1px rgba(255,255,255,.2);
vertical-align: top;
}

.down
{
color: #42778c;    
display: inline-block;
font: normal 14px/14px Helvetica, Arial;
height: 24px;
padding-top: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,.3), -1px 1px 1px rgba(255,255,255,.2);
vertical-align: top;
}

- ThinkingStiff

---

不错！但在Win 7上的FF浏览器中，向下箭头会从按钮中掉出。将卧室宽度增加到160px可以解决这个问题。 - Jon P

是的，我没有在其他浏览器上进行任何测试，所以肯定还需要一些微调。我在演示中将其更改为160px。谢谢！ - ThinkingStiff

哇，这太棒了！我没想到你会给出这样完整的答案，并且还有代码等。我可以根据我的需求进行修改。我想我会选择CSS的方式，并为IE实现优雅退化。非常感谢！ - wlindner

@wlindner 我唯一的建议是看一下 Google Fonts ，选择一个适合"walking"的脚本风格字体。http://www.google.com/webfonts - Jon P

Answer 2

你对浏览器支持的看法是正确的。

所以我不会用CSS来解决这个问题。

我会制作左右圆角边框并将它们制成图片。

我还会创建一个背景的1px宽度的图片，并水平重复它（repeat-x）。

- PeeHaa

Answer 3

在Firefox 4.X+、Chrome和Safari中，CSS的支持非常强大。即使在IE 8和IE 9中也还算合理。如果检测到IE 6或7，最好的方法可能是从CSS开始，并使用JavaScript清理UI。到这个时候，可以相当安全地假定任何不使用IE 6或7的用户都在使用现代浏览器。

- Mike Thomsen

---

IE8不能实现圆角、盒阴影或（好的）渐变背景... - Pointy

我会像Mike建议的那样使用CSS，并为IE进行优雅降级。 - Jarno Argillander

@Mike Thomsen：在这一点上，我必须同意Pointy的观点。另外，你说：“在IE 8和IE 9中甚至是合理的”，我会用“最多也只能说是合理”。 :-) - PeeHaa

Answer 4

对于这个例子，我建议使用图片，除非你真的很擅长CSS。

但是顺便说一下，它们是一些好看的按钮。

- JHolyhead

---

我认为这不是关于某人对CSS掌握得有多好，而更多地是浏览器支持的问题。在我看来。 - PeeHaa

如果你知道该怎么做，你可以使用CSS（和一些JS）来实现这个功能。 - JHolyhead

当然可以。我永远不会说使用CSS和JS无法实现这个。 - PeeHaa

Answer 5

虽然我自己不是大师，但我建议你的问题是：如何最好地将psd转换为html/css。

我目前正在阅读Sitepoint免费电子书“思考网络”的第5章，其中有关于这个主题的内容。作者建议你：1）了解你的目标受众（他们使用什么浏览器），2）做出选择。CSS3可以实现圆角，不会在旧版/其他浏览器上出现问题，但可能不够美观。因此，如果大多数访问者使用现代浏览器，这可能是一个很好的选择。

附：我也没有与Sitepoint雇佣或关联。

- Casey Burnett