minimalart » css http://minimalart.org Pequeñas Expresiones Fri, 03 Sep 2010 08:39:14 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 CSS Sprites ¿sigue siendo una técnica útil? http://minimalart.org/news-and-buzz/css-sprites-sigue-siendo-una-tecnica-util http://minimalart.org/news-and-buzz/css-sprites-sigue-siendo-una-tecnica-util#comments Wed, 31 Mar 2010 12:40:03 +0000 Max http://minimalart.org/?p=226 Interesante artículo de Smashing Magazine, donde se discute la utilidad actual de la técnica CSS Sprites para imagenes. http://bit.ly/b72hvb

]]> http://minimalart.org/news-and-buzz/css-sprites-sigue-siendo-una-tecnica-util/feed 0 Pros y contras de CSS Metaframeworks http://minimalart.org/news-and-buzz/pros-y-contras-de-css-metaframeworks http://minimalart.org/news-and-buzz/pros-y-contras-de-css-metaframeworks#comments Wed, 17 Feb 2010 18:42:49 +0000 Max http://minimalart.org/?p=203 pxleyes.com repasa 3 metaframeworks populares y establece la diferencia con los conocidos CSS frameworks como Blueprint o 960 http://bit.ly/aiJDEh

]]> http://minimalart.org/news-and-buzz/pros-y-contras-de-css-metaframeworks/feed 0 Guía definitiva para estilizar enlaces http://minimalart.org/news-and-buzz/guia-definitiva-para-estilizar-enlaces http://minimalart.org/news-and-buzz/guia-definitiva-para-estilizar-enlaces#comments Wed, 17 Feb 2010 18:38:32 +0000 Max http://minimalart.org/?p=201 Smashing Magazine publica una excelente guía para darle estilo a los enlaces. http://bit.ly/bad9kE

]]> http://minimalart.org/news-and-buzz/guia-definitiva-para-estilizar-enlaces/feed 0 Mensajes simples en CSS http://minimalart.org/dev-and-design/mensajes-simples-en-css http://minimalart.org/dev-and-design/mensajes-simples-en-css#comments Thu, 11 Feb 2010 22:14:59 +0000 Max http://minimalart.org/?p=157 La necesidad de avisarle a un usuario de un sitio web que ocurre un evento de sistema es moneda corriente en el desarrollo. Puede ser por requerimiento de datos, información general o específica, resultados de validación o casi cualquier otra cosa donde el sistema le pide al usuario que le preste atención a algo.

Hay muchísimas formas de hacer esto, desde los prehistóricos popups en javascript, hasta modernos modals, pasando por las paginas de información y redireccionamiento. Pero un recurso muy utilizado, sencillo y efectivo es utilizar una cajita de color con el aviso. También hay decenas de ejemplos para hacer efectiva ésta técnica, pero la mayoría o redundan en código o complejizan algo que debería ser muy sencillo.

Este snippet lo utilizo para hacer mensajes simples en CSS, con muy poco código, fácil de modificar y escalable.

Simple

Lo primero que tenemos que hacer es definir la caja, y le vamos a asignar las propiedades que sean comunes a todos los mensajes (fuente, margenes, ancho). Es importante señalar que estos valores se pueden cambiar dependiendo donde los vamos a mostrar y la información que le vamos a poner dentro.

CODIGO CSS
1
2
3
4
5
6
.msgbox{
font:11px Verdana,Arial,sans-serif;
margin: 10px 0;
padding:5px;
text-align: center;
width: 300px;}

Luego definimos cada tipo de mensaje que queremos usar. Empezamos con el más común de todos, un mensaje de información:

CODIGO CSS
1
.info {background-color:#CCF; border:solid 1px #369; color:#369;}

Definimos entonces la caja en el xtml

CODIGO XHTML
1
<div class="msgbox info">Hay nuevos mensajes en tu cuenta</div>

Y ya podemos ver como nos queda:

Ahora podemos definir el resto de los estilos

CODIGO CSS
1
2
3
4
5
.neutral {background-color:#DDD; border:solid 1px #555; color:#555;}
.info    {background-color:#CCF; border:solid 1px #369; color:#369;}
.warning {background-color:#FFC; border:solid 1px #770; color:#770;}
.passed  {background-color:#CF9; border:solid 1px #393; color:#393;}
.error   {background-color:#FCC; border:solid 1px #C33; color:#C33;}

Y crear mensajes en html

CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning">Por favor actualiza tu email</div>
<div class="msgbox passed"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

Poniendole onda

Agregando solamente un nuevo estilo a nuestro CSS, y agregandole la clase a las cajas ya existentes en el html, tenemos unos bordesredondeados divinos

CODIGO CSS
1
.round {border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;}
CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral round">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info round">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning round">Por favor actualiza tu email</div>
<div class="msgbox passed round"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error round"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

Notese que solo agregamos la clase round a cada caja, sin modificar nada más.

Poniendole más onda

Se le pueden agregar unos iconos para ilustrar cada tipo de mensaje. Para eso, primero creamos el estilo icon y luego usando las propiedades de cascada le asignamos un icono por cada tipo.

CODIGO CSS
1
2
3
4
5
6
7
.icon {background-position: 5px 3px; background-repeat:no-repeat; }

.neutral.icon {background-image:url(icons/neutral.png);}
.info.icon {background-image:url(icons/info.png);}
.warning.icon {background-image:url(icons/warning.png);}
.passed.icon {background-image:url(icons/passed.png);}
.error.icon {background-image:url(icons/error.png);}

Resta solo cambiar en el html la clase round por icon, o agregarla en caso que querramos bordes redondeados ytambién iconos

CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral icon">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info icon">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning icon">Por favor actualiza tu email</div>
<div class="msgbox passed icon"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error icon"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

CODIGO XHTML
1
2
3
4
5
<div class="msgbox neutral icon round">Hola <strong>usuario</strong>, bienvenido a example.org</div>
<div class="msgbox info icon round">Hay nuevos mensajes en tu cuenta</div>
<div class="msgbox warning icon round">Por favor actualiza tu email</div>
<div class="msgbox passed icon round"><strong>Mensaje enviado!</strong> Gracias por participar!</div>
<div class="msgbox error icon round"><strong>ERROR:</strong> el campo <em>Nombre</em> es requerido</div>

Con eso nos queda una lindas cajitas de mensajes, que como dije anteriormente se pueden reusar y modificar fácilmente

]]> http://minimalart.org/dev-and-design/mensajes-simples-en-css/feed 2 Top 10 CSS Snippets http://minimalart.org/news-and-buzz/top-10-css-snippets http://minimalart.org/news-and-buzz/top-10-css-snippets#comments Tue, 09 Feb 2010 19:32:23 +0000 Max http://minimalart.org/news-and-buzz/top-10-css-snippets webdevmania hace una recopilación de los 10 snippets (código pequeño y reusable) más utilizados en estos días http://bit.ly/dquMq3

]]> http://minimalart.org/news-and-buzz/top-10-css-snippets/feed 0 Prácticas para optimizar CSS y marcado http://minimalart.org/news-and-buzz/practicas-para-optimizar-css-y-marcado http://minimalart.org/news-and-buzz/practicas-para-optimizar-css-y-marcado#comments Tue, 09 Feb 2010 19:21:42 +0000 Max http://minimalart.org/news-and-buzz/practicas-para-optimizar-css-y-marcado Tripwire Magazine publica un excelente artículo sobre prácticas para mejorar y optimizar el marcado y CSS http://bit.ly/bzyohv

]]> http://minimalart.org/news-and-buzz/practicas-para-optimizar-css-y-marcado/feed 0 Selectores CSS olvidados http://minimalart.org/news-and-buzz/selectores-css-olvidados http://minimalart.org/news-and-buzz/selectores-css-olvidados#comments Mon, 08 Feb 2010 20:58:27 +0000 Max http://minimalart.org/news-and-buzz/selectores-css-olvidados 456 Berea Street hace una buena recopilación de selectores CSS poco utilizados porque IE6 no los soporta http://bit.ly/adu9Rw

]]> http://minimalart.org/news-and-buzz/selectores-css-olvidados/feed 1 Elegir el mejor CSS Framework http://minimalart.org/news-and-buzz/elegir-el-mejor-css-framework http://minimalart.org/news-and-buzz/elegir-el-mejor-css-framework#comments Mon, 08 Feb 2010 17:24:39 +0000 Max http://minimalart.org/news-and-buzz/elegir-el-mejor-css-framework En DevSnippets publican una comparativa para elegir el mejor CSS Framework http://bit.ly/cc9Bse

]]> http://minimalart.org/news-and-buzz/elegir-el-mejor-css-framework/feed 0