Los navegadores modernos (olvidaros de explorer) y las css avanzadas, nos permiten modificar – en este caso – y sin utilizar javascript, los input de tipo “checkbox” y “radio” con la ayuda de las etiquetas “label”, pudiendo personalizarlos hasta límites inimaginables. Como siempre, el límite lo pone nuestra creatividad.

Esto lo conseguimos con esta estructura

<input type="checkbox" name="check_01" id="check_01" />
<label for="check_01">Opción</label>

Con una imagen similar a esta

Y estas pequeñas líneas de css

input[type=checkbox] {display: none;}
input[type=checkbox] + label {
    background: #fff;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(img/check_02.png) 0px 0px no-repeat;
    text-indent: -1000em;
}
input[type=checkbox]:checked + label {
background: url(img/check_02.png) 0px -16px no-repeat;
}

Las cuales tienen una explicación muy sencilla.
input[type=checkbox] nos permite seleccionar todos los campos “input” de tipo “checkbox“.

input[type=checkbox] + label nos permite seleccionar todos los campos “input” de tipo “checkbox” y además, el elemento “label” que se encuentre a continuación. No debe haber ningún otro elemento depués del campo “input“.

input[type=checkbox]:checked + label, nos permite seleccionar todos los campos “input” de tipo “checkbox” cuyo atributo “checked” sea igual a “checked” y además, el elemento “label” que se encuentre a continuación.

De esta manera, podemos hacer cosas similares a las que he montado en un ejemplo.

[ ejemplo ] [ descargar ejemplo ]

Es cierto que a medida que internet evoluciona, aparecen herramientas que nos hacen la vida más fácil. Los gestores de contenidos, los framework, y desde no hace mucho, los gestores de edición de imágenes. Estas últimas me atraen de forma especial. Te permiten realizar funciones básicas de edición sin necesidad de abrir un photoshop.

Son varios los que hay en el mercado y mucho se ha hablado de ellas, aunque su principal pega (a mi parecer) es que están en servidores externos y no es posible tocar código para mejorar o añadir nuevas funcionalidades.

Y así era hasta hoy. Por medio de webintenta, me entero que existe AIE (Ajax Image Editor). Es un completo editor de imágenes listo para descargar e instalar en tu propio servidor. Está basado en ExtJs e ImageMagic y la verdad es que le vo muchas utilidades, y como valor añadido para instalar en nuestros CMS.

[ AIE ] [ Demo ]

Tags: diseño, javascript, php

De forma similar a como cambiabamos los campos de tipo file, debemos crear una estructura alrededer de los campos selectBox de una forma parecida a esta

<div class="selectBox">
   <div class="box" id="box">Plantar un arbol</div>
   <select name="mySelectBox" id="mySelectBox">
      <option value="1" class="primero">Plantar un arbol</option>
      <option value="2">Escribir un libro</option>
      <option value="3" selected="selected">Ser Padre</option>
      <option value="4">Hacer un Blog</option>
      <option value="5" class="ultimo">Un texto largo para ver que efecto produce</option>
   </select>
</div>

Donde el div principal es el contenedor del Select, y el div “box” donde escribiremos la selección del combo. Para poder realizar la última acción, crearemos un evento “onchange” que aplicaremos a nuestro comboBox para poder pasar los datos de la selección al div “box”.

onchange="this.parentNode.getElementsByTagName('div')[0].innerHTML=this.options[this.selectedIndex].text"

Y evidentemente le daremos unos “colorines” para que quede “bonito”.

<style type="text/css">
div.selectBox {
   position: relative;
   width: 150px;
   height: 22px;
   border: 1px solid #036;
   background: url(button.png) 130px center no-repeat;
}
   div.selectBox div.box {
      position: absolute;
      left: 3px;
      top: 3px;
      width: 124px;
      height: 16px;
      line-height: 16px;
      font-family: arial;
      font-size: 11px;
      color: #036;
      overflow: hidden;
   }
   div.selectBox select {
      position: absolute;
      left: -1px;
      top: -1px;
      width: 152px;
      height: 24px;
      border: 1px solid #036;
      opacity: 0;
      filter: alpha(Opacity=0);
      -moz-opacity: 0;
      cursor: pointer;
      z-index:100;
   }
      div.selectBox select option{
         padding: 4px;
         font-size: 11px;
         color: #036;
         border-bottom: 1px solid #eee;
         cursor: pointer;
      }
      div.selectBox select option.ultimo{
         border-bottom: 0px none;
      }
</style>

Para complementar estos estilos, añadimos la siguiente imagen que hará las veces de botón

El resultado funciona en todos los navegadores, exceptuando nuestro querido amigo “Explorer6″ donde no sé si se verá correctamente al tener una “emulación” del mismo.

[ demo ] [ descargar ]

Tags: css, diseño, javascript, tips

Tags: curiosidades, diseño

Vía Código Cero me entero de la gran iniciativa del departamento de diseño del diario local de Lugo, “El Progreso”. Y es después de haber sido premiados con la medalla de plata al mejor rediseño en los premios ÑH5 en Zaragoza, han publicado un blog llamado “Fuchicadores” en el que pretenden dar a conocer su labor profesional, y los trucos y recursos con los que un día si y otro también sacan adelante su trabajo.

Estupenda iniciativa, desde luego, a ver si se nos pega algo.

Yo por mi parte no me queda otra que felicitarlos, ya que pasé un par de años maravillosos trabajando en las rotativas de “El Progreso”, donde conocí gente maravillosa – y en especial el encargado – con una grandísima calidad humana.

[ El Progreso ] [ Fuchicadores ] [ Código Cero ]

Tags: Blogs, Diseño

Ya están aquí. Ya llegaron.

Adobe presentaba esta mañana (la del 23) su nueva suite, la CS4. Algunos de estos nuevos programas ya los conocíamos por medio de sus Betas (Dreamweaver, FireWorks y SoundBoth), aunque como siempre, estas betas sufren algunos cambios de última hora que deparan en ocasiones más de una sorpresa y una amplia sonrisa.

Quizá (y después de algunos comentarios en la red) uno de los más esperados era Flash. Los vídeos colgados en su web dejarán a más de uno boquiabierto (y yo el primero). Desde que conozco flash (desde la versión 1) probablemente sea una de las versiones que más me haya sorprendido por lo espectacular del resultado, bien sea por su nueva forma de animar, su cinemática inversa, el pincel rotador o el editor de movimientos.

Dreamweaver por su parte cada vez es más serio, y cada vez son más lo que lo toman en serio. Esta nueva versión lo convierten en un verdadero IDE de desarrollo, ganando a otros en algunos aspectos como por ejemplo por su previsualización en tiempo real gracias al motor de WebKit (verdad, Andrés ?), el navegador de código o la posibilidad de ver en tiempo real los procesos generados por una llamada Ajax, e incluso el sistema de autocompletar para frameworks conocidos como JQuery, Prototype y como no Spry. Damos la bienvenida como no, y ya era hora a su integración con Subversión.

Con Photoshop siempre es bueno tener un sombrero a mano. Por lo menos para ponerselo y así poder sacárselo. Han mejorado las herramientas ya existentes (opciones de fusión, zoom, alineación, escalados, …) y otras herramientas que desde luego haran las delicias de muchos. La gestión de objetos 3D y la posibilidad de pintar encima de ellos, la herramienta de profundidad de campo, el rescalado basado en el contenido, y algunas cosas más que iremos viendo con el tiempo.

E illustrator, que aunque no lo he usado mucho (todavía duele lo de Freehand) , por fin trae soporte multipágina, aunque lo llamen “mesas de trabajo”. La transparencia en los degradados, el pincel de manchas, la previsualización de separaciones, y la edición directa en el panel apariencia, son algunas de las nuevas herramientas que nos vamos a poder encontrar en esta nueva versión.

Son desde luego muchas novedades las que nos trae el CS4. Ahora solo queda el poder probarlas “de verdad”.

[ Dreamweaver ] [ Flash ] [ Photoshop ] [ Illustrator ] [ Adobe ]

Tags: diseño, dreamweaver, flash, photoshop, adobe

Leyendo ese artículo, se me venía a la cabeza ese anuncio de hace unos años en los que un tipo con gran facilidad y destreza, recortaba una silueta (con un ratón de 2 euros) y hacía un montaje muy creíble.

Y después …
<MODO moñas ON>
… Hay que aguantar a algunos clientes y/o compañeros de la oficina de al lado (alguien que yo conzco y pueda estar leyendo esto se estará echando una risas … o no) que eso es fácil y que en cinco minutos se hace.
<MODO moñas OFF>

Total, que no estaría de más que se respetara de verdad esta profesión, y que se valorara todo el trabajo QUE NO SE VÉ y que una vez hecho, parece fácil.

[ ADG-FAD ] [ Hágase diseñador ]

Tags: diseño, asociaciones

Los que si están a favor de flash y cada vez apuestan más fuerte por él y su tecnología, demuestran su aprovechamiento en cada una de los sites que crean. Ni que decir tiene que como padres adoptivos, no les queda más remedio, aunque como digo, con cada web, superan un poquito más el listón que ya de por si está alto.

Hablo de la web de Adobe Max 2008. En principio no es nada del otro mundo, incluso podríamos poner alguna pega – en función de la resolución, vemos más o menos web – lo curioso ocurre cuando hacemos click en el fondo (el cuál es aleatorio) e interactuamos con él.

Y hablando de la Adobe Max 2008, ya fué presentado el Flex 4 (Gumbo para los amigos) y su framework, thermo, del que ya he hablado en alguna ocasión.

Tags: diseño, software, jornadas

Después del subidón de ego tras la publicación de mi plantilla de presentaciones, se me ocurrió hacer plantillas de elementos comunes tales como campos de formulario, cursores, etc. Pero fué cuando descubrí unas plantillas ya hechas por Yahoo!. Para qué hacer algo que ya estaba hecho ?

La única “pega” es que está orientada a un theme de su Framework, pero el caso es que están muy bien y podemos sacar bastante provecho. Lo bueno, es que podemos descargarlas en varios formatos tales como png, svg y pdf.

[ Design Stencil ]

Tags: diseño, webs

Qué conste que fué él el que pidió que lo difundiéramos.

Impresionante tutorial de un monstruo del diseño como es Armando Sotoca, aka Skeku en Criterion y 2Flash2Furious, dos de las webs que sigo a diario, de las que se puede aprender mucho y que además recomiendo.

Difundido queda y enhorabuena por el tutorial !!

[ criterion ] [ 2fast2furious ] [ tutorial ]

Tags: diseño