OmbuShop Crea Tu Tienda Online

Centrado vertical con CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Muchas de las técnicas que utilizamos diariamente con CSS no son intuitivas. En principio, son resultado de experimentos técnicos de desarrolladores web y diseñadores que intentan empujar este lenguaje presentacional hacia nuevos territorios.

Casi todos sabemos cómo centrar un elemento dentro de otro, horizontalmente; por lo general basta con indicar márgenes izquierdo y derecho en auto. El problema surge cuando queremos centrar una caja dentro de otra, de forma vertical.

Veremos a continuación una técnica con amplio grado de compatibilidad con navegadores (Chrome, Firefox, Safari, IE8-10). La técnica necesita del posicionamiento absoluto para funcionar, por ende, necesitaremos que la caja contenedora tenga indicado algún posicionamiento diferente a static, por ejemplo: position: relative.

Veamos el ejemplo:


#contenedor {
position: relative;
}
#contenido {
height: 60px; /* <– debe estar definida */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* —————————- */
/* Detalles cosméticos */

* {
box-sizing: border-box;
}
body {
background: #fff;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 20px;
}
#contenedor {
background: #9f0;
width: 70%;
height: 150px;
margin: 1em auto;
border: 4px solid #000;
}
#contenido {
background: #000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
text-align: center;
width: 95%;
padding: 1em;
}

See the Pen IwJjf by Lucas Mourelle (@lucasmourelle) on CodePen.

Esperamos que les sirva!

Carla Piccini se suma a OmbuShop

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Tengo el agrado de anunciar que Carla Piccini se suma a OmbuShop como nueva Growth Leader.

El objetivo de Carla será trabajar exclusivamente en el motor de crecimiento de nuestro negocio, generando nuevas alianzas y promoviendo el uso de OmbuShop para pequeñas y medianas empresas sin un canal de ventas online.

Carla Piccini

Carla nos va a ayudar a seguir creciendo y sumando nuevas tiendas, que puedan utilizar nuestra plataforma para potenciar sus ventas online.

¡Bienvenida!

Herramientas para refactorear CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

El código CSS puede volverse complejo y difícil de mantener. Aquí listamos algunas herramientas útiles para el análisis y refactoreo del código CSS.

Como sabemos, luego de trabajar semanas o meses en un proyecto el código CSS puede comenzar a contener código repetido, colores que son el mismo pero no exactamente, selectores largos y demasiado específicos, complejidad creciente y hojas de estilo cuyo peso significa un problema.

Si bien un análisis minucioso por parte de un ser humano es necesario, existen algunas herramientas que facilitarán el trabajo.

Las herramientas:

  • CSS Lint: realizará un análisis exhaustivo de errores o incluso potenciales problemas. Indicará con precisión cuál es la causa de cada uno de los problemas y a qué navegador/es afecta.
  • StyleStats: analizará una página web a partir de su URL, extraerá los estilos que están siendo aplicados a dicha página web y mostrará un resumen de las estadísticas más importantes: cantidad de colores, cantidad de cuerpos tipográficos distintos, cuántos selectores complejos hay en las hojas de estilos, cuán complejo es el selector más complejo, etc. Todo a la vista en forma de dashboard.
  • Type-o-matic: un plugin para Firefox que hará un reporte de todas las tipografías siendo utilizadas y sus respectivos colores.
  • CSS Colorguard: escrito en node, ayudará a encontrar colores que —por estar demasiado cerca— deberían ser el mismo. Se trata de un error muy común, ocasionado por el uso y abuso del color picker.
  • Dust-Me Selectors: se trata de otro plugin de Firefox, en este caso se ocupará de chequear cuáles selectores no están siendo utilizados en una página.

Esperamos que puedan utilizarlas para próximos sitios y tiendas online!

Z-index con Sass

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Cómo organizar los números de z-index de los diferentes elementos de una página compleja.

La organización de los diferentes niveles de z-index en sitios web complejos suele ser desprolija y difícil de mantener. Veremos aquí una técnica con Sass que saltea estos inconvenientes!

z-index

Sass permite ahora la inclusión de listas dentro de una variable, por lo que podremos generar una lista con los nombres que tendrán los elementos cuya propiedad z-index queremos controlar.

Una vez hecho esto, podemos utilizar la función index para obtener el valor del índice del mentado elemento en dicha lista. Se trata de una función que espera recibir dos parámetros: la variable que contiene la lista, y luego el nombre de la variable cuya posición tiene dentro de la variable. Esto lo podemos repetir con todos los elementos a los cuales se les deba indicar un valor específico en el z-index.

Vaya el código a continuación:


// Creación de lista de Sass:
$elements_order: elemento_a, elemento_b, elemento_c, elemento_d;
/* ———————— */
/* Cuestiones estructurales */

#elemento-a {
position: absolute;
top: 20px;
left: 20px;
z-index: index($elements_order, elemento_a);
}
#elemento-b {
position: absolute;
top: 40px;
left: 40px;
z-index: index($elements_order, elemento_b);
}
#elemento-c {
position: absolute;
top: 60px;
left: 60px;
z-index: index($elements_order, elemento_c);
}
#elemento-d {
position: absolute;
top: 80px;
left: 80px;
z-index: index($elements_order, elemento_d);
}
/* ——————— */
/* Cuestiones cosméticas */

body {
font-family: &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif;
font-weight: 200;
letter-spacing: .1em;
}
#elemento-a,
#elemento-b,
#elemento-c,
#elemento-d {
color: #fff;
text-align: center;
padding: 10px;
width: 100px;
height: 100px;
box-shadow: rgba(0,0,0,.2) (-2px) 3px 2px;
}
#elemento-a {
background: #E74C3C;
}
#elemento-b {
background: #4AA3DF;
}
#elemento-c {
background: #9B59B6;
}
#elemento-d {
background: #1ABC9C;
}

See the Pen <a href=’http://codepen.io/lucasmourelle/pen/qnAiC/’>qnAiC</a> by Lucas Mourelle (<a href=’http://codepen.io/lucasmourelle’>@lucasmourelle</a>) on <a href=’http://codepen.io’>CodePen</a>.

El día de mañana, en caso de querer cambiar el número de los z-index, no tendremos más que cambiar de orden a los elementos que están dentro de la lista con tal fin. Los que están hacia lo último en la lista, serán los que se percibirán más arriba que los demás.

Más información sobre este mismo método, en inglés, en el siguiente artículo.

Libro: tipografía en la Web

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

A la excelente colección de libros para gente que hace sitios web de A Book Apart, se suma un nuevo volumen sobre tipografía en la Web. Jason Santa María ha escrito y publicado el nuevo libro “On Web Typography”.

On Web Typography

La mayor parte del diseño de una web está conformada por el diseño tipográfico. La diagramación, las columnas, el espacio en blanco, la interlínea y —por supuesto— la elección de la familia tipográfica, hacen a un altísimo porcentaje de los elementos que sirven como pilares y estructura a un sitio web.

Pocos diseñadores web tienen tan controlado el aspecto gráfico de sus creaciones en la Web. Jason Santa María viene, evidentemente, del universo de lo gráfico impreso, del mundo editorial, casi diríamos del trabajo artesanal que hacían los tipógrafos allá lejos y hace tiempo. Gente con oficio, que se repartían entre un trabajo más cercano a lo artístico (diagramar la página) y otro puramente técnico: convertir aquella aproximación artística en una realidad tangible. El armado de la rama, la organización de los tipos móviles, etc.

Hoy en día esto mismo hacemos los diseñadores y desarrolladores web. No sólo proyectamos el diseño de un sitio web, también realizamos la implementación técnica. Reemplacemos tipos móviles por HTML y CSS y se trata del mismo tipo de trabajo: el del artesano que requiere la habilidad que sólo el oficio puede dar: el craftsmanship pero con diferentes herramientas.

Este libro acerca a quienes sólo tuvieron contacto con la Web, al universo de lo tipográfico y la lectura. ¿Cómo leemos? ¿Cómo funcionan las tipografías? ¿Cómo combinarlas? ¿Qué son los sistemas tipográficos? Son sólo algunas preguntas que intentará abordar.

Aquí el link al sitio oficial del libro.

A seguir estudiando, aprendiendo y creando excelentes sitios web y tiendas online!