javascript – 我应该如何在HTML和CSS中重新创建这个设计？

我正在寻找一些有用的 HTML / CSS大师的小圣人建议.我正在建立一个网站,以帮助我所在地区的人找到一个公寓.我一直在和我的一个做图形设计的朋友一起工作,他创建了一些非常好看的模型,我现在正致力于在HTML / CSS中实现.

我附上了过滤器的图像,我想知道我应该如何创建它们.如果我使用CSS来设置丸形输入的样式,它可能不适用于所有浏览器.我是否应该采用创建形成输入背景的小的重复蓝线的方法？

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

解决方法

这取决于您的受众.我只针对最新的浏览器,因此我选择了最新的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,.4 ) 0%,.0 ) 60%);
background-image: -webkit-linear-gradient( 
    top,.0 ) 60%);
background-image: -moz-linear-gradient( 
    top,.0 ) 60%);
background-image: -o-linear-gradient( 
    top,.0 ) 60%);
background-image: -ms-linear-gradient( 
    top,.0 ) 60%);
border-bottom: 1px solid #4998b8;
border-radius: 22px;
border-top: 1px solid #cbeef7;
Box-shadow: 0 0 0 5px rgba(71,71,.65);
-webkit-Box-shadow: 0 0 0 5px rgba(71,.65);
-moz-Box-shadow: 0 0 0 5px rgba(71,.65);
-o-Box-shadow: 0 0 0 5px rgba(71,.65);
-ms-Box-shadow: 0 0 0 5px rgba(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,.2),-1px 1px 1px rgba(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,.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,.3),-1px 1px 1px rgba(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,.2);
vertical-align: top;
}