Sebastián Thüer

Comunicación, diseño y tecnología

css

Una breve historia de los estándares web [infografía]

· ·

Si no existieran los estándares web los diseñadores estarían obligados a crear una versión de su sitio por cada navegador que existiera. Los usuarios rogarían las páginas se viesen bien en el navegador que tienen abierto. Las empresas tendrían que multiplicar los presupuestos de desarrollo por 3, 4 o 5. Y aunque parezca ridículo, en una época era así.

Esta infografía repasa la historia de la web desde sus inicios desde los ’90 a nuestros días con los hechos más sobresalientes y algunos datos curiosos. La verdad, para hacer un cuadro y pegarlo en

Vía Vitamin Talent

CSS Terminal, una forma rápida editar estilos al instante

· ·


Los ajustes finos de CSS en un sitio suelen llevar bastante tiempo y una de las tareas más odiosas es estar modificando el archivo y actualizando el navegador a cada instante. Hasta ahora la herramientas de edición de CSS en línea dentro de un navegador no habían funcionado demasiado bien o eran bastante incómodas.

CSS Terminal viene a solucionar el problema de una manera muy sencilla: inserta una capa semitransparente por encima del sitio web y admite que escribamos el CSS de forma directa. Como dice el autor, es un bookmarklet que permite insertar reglas de CSS directamente en una página en vivo. Algo que se agradece mucho para depuarar CSS y crear prototipos de forma rápida.

La herramienta es compatible con Opera, Mozilla Firefox, Google Chrome, Apple Safari y Microsoft Internet Explorer 9 o superior. Muy sencilla pero tremendamente útil.

CSS3 glow tabs: Menú de pestañas con efectos visuales para tu página web

· ·


Los pequeños detalles son los que le dan estilo diferente a tu diseño. En el caso de la web, muchas veces no queda más remedio que utilizar alguna librería de JavaScript para hacer transiciones, animaciones y otro tipo de efectos. Sin embargo, con CSS3 esto está cambiando.

Louis Lazaris nos presente un muy buen tutorial para crear un menú te pestañas con bordes curvos, sombras, fondo degradado y efectos de transición utilizando solamente CSS3. El resultado se puede ver en esta página.

La implementación es bastante simple y lo bueno es que los efectos visuales están implementados de forma progresiva para que los navegadores sin soporte para la nueva versión del CSS puedan igualmente mostrar la página adecuadamente.

Código del CSS

html,body,div,span,
applet,object,iframe,code,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
margin: 0;
padding: 0;
border: 0;
font-weight: normal;
font-style: normal;
font-family: inherit;
text-align: left;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul {
list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
content: "";
}

h1 {
color: #fff;
text-align: center;
padding: 80px 0 30px 0;
}

h2 {
text-align: center;
padding: 40px 0 0 0;
width: 75%;
margin: 0 auto;
}

body {
background: #131925;
}

ol {
list-style: decimal;
font-size: 24px;
width: 400px;
padding: 30px 0 0 60px;
margin: 0 auto;
}

ul#navigation {
height: 36px;
padding: 20px 20px 0 30px;
width: 904px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

ul#navigation li {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
float: left;
width: 168px;
margin: 0 10px 0 0;
background-color: #2B477D;
border: solid 1px #415F9D;
position: relative;
z-index: 1;
}

ul#navigation li.selected {
z-index: 3;
}

ul#navigation li.shadow {
width: 100%;
height: 2px;
position: absolute;
bottom: -3px;
left: 0;
border: none;
background: none;
z-index: 2;
-webkit-box-shadow: #111 0 -2px 6px;
-moz-box-shadow: #111 0 -2px 6px;
box-shadow: #111 0 -2px 6px;
}

ul#navigation li a:link, ul#navigation li a:visited {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
display: block;
text-align: center;
width: 168px;
height: 40px;
line-height: 36px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
font-weight: bold;
color: #fff;
letter-spacing: 1px;
outline: none;
float: left;
background: #2B477D;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
}

ul#navigation li a:hover {
background-color: #5a87dd;
}

ul#navigation li.selected a:link, ul#navigation li.selected a:visited {
color: #2B477D;
border: solid 1px #fff;
-webkit-transition: background-color 0.2s linear;
background: -moz-linear-gradient(top center, #d1d1d1, #f2f2f2 80%) repeat scroll 0 0 #f2f2f2;
background: -webkit-gradient(linear,left bottom,left top,color-stop(.2, #f2f2f2),color-stop(.8, #d1d1d1));
background-color: #f2f2f2;
}

#content {
width: 910px;
background: #f2f2f2;
padding: 0 0 50px 0;
margin: 0 auto;
}

Código HTML





CSS3 Glow Tabs

CSS3 Glow Tabs with Box Shadow

The tabs in this demo are image-less tabs
with 4 different CSS3 enhancements:

  1. Rounded Corners (border-radius)
  2. Box Shadow (bottom of inactive tabs)
  3. Transitions (the glow on hover)
  4. Gradients (the active tab)

CSS Transitions work in Chrome, Safari, Opera 10.5 & Firefox 3.7

The basic idea and techniques presented here are taken from the tabs on the jQuery Conference site.

< Go Back to the Article


HTML5 Snippets, porciones de código HTML y CSS listo para usar

· ·

En el diseño o desarrollo para la web es bastante habitual reutilizar porciones de código con cuestiones que ya hemos resulto. Un formulario de login o de contacto, un sistema de paginación para una tabla con mucho datos o un menú de navegación son opciones que están presentes en muchos proyectos. 

Una solución para la gente organizada consiste en crearse una pequeña librería de snippets, es decir, porciones de código con cada uno de los recursos a los que necesitaremos recurrir a futuro. Sin embargo, una biblioteca privada tiene poco que ver con la web 2.0 de hoy en día.

Por eso la idea es HTML5Snippets es muy sencilla pero potente: crear una repositorio donde buscar y compartir estas pequeñas porciones de código. Además de HTML, también hay CSS.

Algunas fragmentos de código interesantes que encontré:

En fin, el proyecto todavía está en estado alpha y que, espero, prospere.

Roots, un theme de WordPress para diseñadores web

· ·

Desde hace un tiempo en el diseño web se está imponiendo la tendencia de reutilizar una serie de bibliotecas o recursos genéricos que permiten solucionar algunos problemas puntuales sin tener que convertirse en un experto en la materia. No me refiero solamente frameworks de JavaScript como jQuery, Prototype o Yahoo User Interface que están ampliamente extendidos. También se están comenzando a utilizar frameworks de CSS para estandarizar la generación de estilos, frameworks de HTML5 para extender este lenguaje a los navegadores más antiguos y sistemas de retículas como 960 grid system o 1140 CSS grid.

Roots es un theme para WordPress que se presenta como excelente opción para diseñadores web ya que incorpora muchos de etos recursos. Utiliza HTML5, microformatos y tiene predefinidas una serie de opciones como organizar los posts por año y nombre, guarda los nuevos archivos en el directorio assets y, afirman los creadores, produce un código más limpio que la mayoría de las demás plantillas para WordPress.

Como lo indica su nombre, Roots es un theme para ser utilizado de base en muchos diseños y permite agilizar muchísimo el desarrollo de diseños web en WordPress ya que soluciona una serie de problemas comunes a los que se enfrentan los diseñadores cuando quieren desarrollar un theme para este sistema de gestión de contenidos.