¿Cómo debería volver a crear este diseño en HTML y CSS?

Question

Estoy buscando un pequeño consejo sabio de algunos maestros HTML/CSS útiles. Estoy en proceso de crear un sitio web para ayudar a las personas de mi área a encontrar un departamento. He estado trabajando con un amigo mío que hace diseño de gráficos y creó algunas maquetas realmente agradables en las que ahora estoy trabajando para implementarlas en HTML/CSS.

Adjunté una imagen de los filtros y me preguntaba cómo debería crearlos. Si uso CSS para diseñar las entradas en forma de píldora, probablemente no funcionará en todos los navegadores. ¿Debo tomar el enfoque de crear líneas azules pequeñas y repetitivas que forman el fondo de las entradas?

No estoy pidiendo a alguien que me escriba el código, pero me preguntaba si alguien tiene consejos para tomar un enfoque basado en CSS o en imágenes para construir un diseño que se parezca a la maqueta adjunta.

Answer 1

Depende de su público. Apunto solo a los últimos navegadores, así que elijo el último CSS. Casi todo es posible en CSS. Si debe admitir navegadores antiguos, utilice JS como alternativa.

Esto es lo que hice en CSS puro en aproximadamente 20 minutos. Por supuesto, podría ser mucho mejor, pero no quería dedicarle más tiempo, solo quería que comenzaras si decides ir por ese camino.

Aquí está la demostración: 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; 
} 

Answer 2

soporte CSS es muy fuerte en Firefox + 4.X, Chrome y Safari. Incluso es razonable en IE 8 e IE 9. Lo mejor que puede hacer es comenzar desde CSS y usar JavaScript para limpiar la interfaz de usuario si se detecta IE 6 o 7. En este punto, es bastante seguro suponer que cualquier persona que no utilice IE 6 o 7 está utilizando un navegador moderno.

Answer 3

Tiene razón acerca de la compatibilidad con el navegador.

Así que no iría a la ruta de CSS con esto.

Haría los bordes redondeados izquierdo y derecho y los convertiré en imágenes.

También crearía una imagen de ancho 1px del fondo y repetir esto horizontalmente (repeat-x).

Answer 4

Para este ejemplo, iría con imágenes a menos que sea realmente bueno en CSS.

Pero aparte de eso, son algunos de los botones que se ven bien.

Answer 5

Aunque no soy un maestro, sugeriré que su pregunta es: cómo obtener una psd a html/css.

Actualmente estoy leyendo el libro de ebook gratuito de Sitepoint "thinking the web" en un capítulo sobre este tema (capítulo 5). El autor sugirió que 1) conozca a su público objetivo (qué navegadores utilizan) y dos hacen una elección. css3 puede redondear las esquinas que no se rompa en navegadores antiguos/otros, pero que no sea bonito. Por lo tanto, esta puede ser una gran opción si la mayoría de sus visitantes utilizará navegadores modernos.

ps. No estoy empleado/asociado con Sitepoint tampoco.