Cristalab

Icono de scanner en Illustrator (II)
Slider sencillo en jQuery
Como hacer un Social Bar vertical con CSS3
Vector hiperrealista en Illustrator (III)

Posted: 12 Nov 2012 08:35 AM PST

Continuamos con la segunda entrega de nuestra miniserie de dos episodios, para comenzar a añadir los detalles adicionales a nuestro icono de un scanner en Illustrator, para dotarle de un aspecto más completo y elegante, utilizando las técnicas de recorte y suavizado aprendidas en el anterior videotutorial, para incorporar nuevas áreas de sombras e iluminación, botones y diferentes adornos.

Incluiremos nuevos detalles para recrear una botonera y un cartel de marca, gracias a uso de las formas y varios efectos.

Trabajaremos con las opciones de desvanecer y fusión, suavizando y redondeando la superficie del material para ofrecer a la ilustración de una imagen más natural, gracias al recorte de áreas con el buscatrazos para obtener diversas luces y sombras.

Saludos.

Slider sencillo en jQuery

Posted: 12 Nov 2012 01:03 AM PST

En este tutorial realizaremos un Slider sencillo en jQuery. Empezaremos con la estructura básica, eventos y animación con Javascript y lo terminaremos con un bonito aspecto en CSS. ¡Así que manos a la obra!

¿Cuándo deberíamos usar un Slider en nuestros formularios?

Fácil, cuando algún valor que nuestro usuario debe ingresar no es del todo claro para él. Por ejemplo, el usuario es consciente que debe ingresar un valor de 1 a 500px para el tamaño de su avatar pero no esta seguro que valor utilizar y como es muy incómodo probar valores en un campo de texto hasta que quede satisfecho con el elegido, debemos proporcionarle una mejor manera de hacerlo. Osea un ¡Slider!

Puedes seguir el paso a paso de este tutorial en vídeo:

Estructura básica HTML y CSS

En un nuevo documento HTML crearemos una nueva capa o DIV con clase SLIDER, la cual será nuestro contenedor principal. Dentro de ella crearemos un par de capas más con clase PROGRESS e INDICATOR respectivamente.

Código :

<div class='slider'>      <div class='progress'></div>      <div class='indicator'></div>  </div>

La primera servirá para mostrar el progreso de nuestro slider y la segunda para controlar dicho progreso.

Ok, Ahora agreguémosle un poco de estructura con CSS. Al contenedor le definimos un ancho y alto, pueden ser los valores que creamos convenientes. Agregamos un borde de un pixel (1px) y color gris. Para visualizar sus límites.
[css:1:144a0af369].slider{
border: 1px solid grey;
height: 60px;
width: 100%;
}[/css:1:144a0af369]
Ahora en la capa progress asignamos su ancho y alto en cien por ciento (100%) para que tome dichos valores de la capa contenedora slider y agregamos un color de fondo.
[css:1:144a0af369].slider > .progress{
background: #14aaf6;
height: 100%;
width: 100%;
}[/css:1:144a0af369]
Para la capa indicator definimos un color de fondo de nuestra elección, un alto de cien por ciento (100%) y un ancho un poco menor también en porcentaje (%).
[css:1:144a0af369].slider > .indicator{
background: darkred;
height: 100%;
width: 10%;
}[/css:1:144a0af369]
Ahora en el navegador podemos ver como "progress" está dentro de "slider" pero "indicator" se encuentra fuera de éste.

Para solucionar esto, debemos utilizar la propiedad position, el valor para slider será relative y en progress e indicator el valor será absolute.
[css:1:144a0af369].slider{
border: 1px solid grey;
height: 60px;
position: relative;
width: 100%;
}

.slider > .progress{
background: #14aaf6;
height: 100%;
position: absolute;
width: 100%;
}

.slider > .indicator{
background: darkred;
height: 100%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]
Con esto hemos sobrepuesto a progress e indicator sin salirnos de la capa slider.

Si deseáramos que nuestro slider estuviera a la mitad de su recorrido, simplemente cambiamos el ancho de progress a un cincuenta por ciento (50%). Pero también debemos hacer que la capa indicator coincida con este cincuenta por ciento (50%). Dándole este valor a la propiedad left podremos obtener el resultado deseado.
[css:1:144a0af369].slider > .progress{
background: #14aaf6;
height: 100%;
position: absolute;
width: 50%;
}

.slider > .indicator{
background: darkred;
height: 100%;
left: 50%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]

Ok, Ahora podemos apreciar como tanto progress e indicator aparentemente se encuentran a la mitad del recorrido del slider.

¿Pero la capa indicator realmente esta en dicha posición?

Para ubicar indicator en la mitad exacta del recorrido debemos darle un margen izquierdo negativo de la mitad de su ancho. En este caso menos cinco porciento (-5%).
[css:1:144a0af369].slider > .indicator{
background: darkred;
height: 100%;
margin-left: -5%;
left: 50%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]
Ya con esto terminamos la estructura básica de nuestro slider.

Animación y eventos con jQuery

En el body, ya que es siempre el mejor lugar para cargar javascript, incluiremos la ultima versión de jQuery y el archivo donde ira la lógica del slider. En mi caso main.js.

Código :

          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>          <script type="text/javascript" src="js/main.js"></script>

Ahora en la capa con clase slider capturamos el evento mousedown. Luego cuando éste se dispare, almacenaremos en la variable pos las coordenadas X e Y, en este caso serán left y top con respecto al objeto window.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset();     });

Creamos una nueva variable pos-x que será la posición en X donde se produjo el evento menos la posición en X de la capa slider.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;     });

Ahora simplemente aplicamos esta distancia (posX) como ancho de la capa progress.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          $('.slider > .progress').css('width', posX+'px');     });

Actualizamos el navegador, y al hacer clic sobre slider vemos como progress se desplaza hasta esa posición. Hacemos lo mismo para la capa indicator pero en la propiedad left:

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          $('.slider > .progress').css('width', posX+'px');        $('.slider > .indicator').css('left', posX+'px');     });

Actualizamos el navegador y al hacer clic sobre slider, las dos capas se desplazan simultáneamente hasta esta posición. Pero tenemos un problema, cuando llegamos a los extremos de slider haciendo clic, se desborda progress e indicator.

Para corregir este comportamiento, simplemente debemos darle unos límites de desplazamiento a slider. Con una condición en la que asignaremos el valor mínimo y máximo en los que es seguro el desplazamiento. En este caso serán cero (0) como valor mínimo y el ancho completo del slider como valor máximo.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     });

Actualizamos el navegador, y vemos como progress e indicator se desplazan sin salirse de sus límites.

Ahora ordenemos un poco el código, creando una función que llamaremos move-slider y recibe como parámetro un evento. Llamamos la función cuando se dispare el evento mousedown.

Código :

     function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);     });

Nos cercioramos que siga funcionando correctamente y continuamos. Luego, dentro de mousedown capturamos el evento mousemove y con este llamamos nuevamente la función move-slider.

Código :

     function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);          $(this).on('mousemove', function(e){           moveSlider(e);        });     });

Ahora cuando se produzca el evento mouseup sobre la capa slider, desactivaremos el evento mousemove para que este solo se ejecute mientras tenemos el click sostenido.

Código :

   function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);          $(this).on('mousemove', function(e){           moveSlider(e);        });     }).on('mouseup', function(){        $(this).off('mousemove');     });

Actualizamos el navegador y ahora nuestro slider se desplaza tanto al hacer clic sobre él, como al arrastrar el indicador de posición.

OK, Agreguemos en el body un campo de texto que nos muestre el valor del slider mientras lo movemos.

Código :

            <label>                  Value:                   <input type="text" id="valueSlider" value="0" />              </label>

En la función move-slider crearemos una variable con el nombre value, ella va a ser igual a la cantidad en pixeles (px) donde se produce el evento multiplicado por cien (100) y dividido entre el ancho del total en pixeles (px) de la capa slider.

Código :

   function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left        ,   value   = posX*100/$(e.currentTarget).outerWidth();          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);          $(this).on('mousemove', function(e){           moveSlider(e);        });     }).on('mouseup', function(){        $(this).off('mousemove');     });

Ahora agregamos esta variable a la propiedad value del campo de texto que acabamos de crear.

Código :

   function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left        ,   value   = posX*100/$(e.currentTarget).outerWidth();          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');             $('#valueSlider').val(value);        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);        $(this).on('mousemove', function(e){           moveSlider(e);        });     }).on('mouseup', function(){        $(this).off('mousemove');     });

Vamos al navegador, y al arrastrar el indicador veremos cómo cambia el valor en el campo de texto.

Si deseamos que el valor máximo fuera 10, multiplicamos por este en la variable value y si quieren valores exactos, pueden utilizar el método Math.Round de JavaScript.

Agregando estilos con CSS

En nuestro archivo HTML, desactivaremos el campo de texto y crearemos dentro de slider una nueva capa con clase empty progress, la cual representará la sección del slider que aún no ha sido recorrida por el indicador.

Código :

        <div class='slider'>              <div class='emptyprogress'></div>              <div class='progress'></div>              <div class='indicator'></div>          </div>            <!--<div class='info'>              <label>                  Value:                   <input type="text" id="valueSlider" value="0" />              </label>          </div> -->

Para el fondo de la capa slider utilizaremos la imagen de una cuadrícula que ya tenemos preparada, esta la desplazaremos -25px tanto en el eje X como en el eje Y y luego eliminaremos el borde.
[css:1:144a0af369].slider{
background: url('../img/grid.png') -25px -25px;
height: 60px;
position: relative;
width: 100%;
}[/css:1:144a0af369]
En la capa progress cambiaremos su altura a un 40% y la desplazamos un 25% desde la parte superior.
[css:1:144a0af369].slider > .progress{
background: #14aaf6;
height: 40%;
top:25%;
position: absolute;
width: 0%;
}[/css:1:144a0af369]
Ahora duplicamos las propiedades de progress para crear empty progress y cambiamos su color de fondo. Puesto que la capa empty progress debe estar siempre visible, cambiamos su ancho a 100%.
[css:1:144a0af369].slider > .emptyprogress{
background: #97d9fb;
height: 40%;
top:25%;
position: absolute;
width: 100%;
}[/css:1:144a0af369]
Ahora en el navegador podemos ver que al desplazar el slider, la capa progress se sobre pone a la capa empty progress. Continuamos con el indicador, Eliminamos el color de fondo y asignamos una imagen, esta no debe repetirse.
[css:1:144a0af369].slider > .indicator{
background: url('../img/pointer.png') no-repeat;
height: 100%;
margin-left: -5%;
left: 50%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]

Cambiamos el ancho actual por el ancho de la imagen que hemos utilizado. En este caso por 60px. En la margen serán 8px para el TOP, automático para la parte derecha e inferior y -30px para el left.

[css:1:144a0af369].slider > .indicator{
background: url('../img/pointer.png') no-repeat;
height: 100%;
margin: 8px auto auto -30px;
left: 0%;
position: absolute;
width:60px;
}[/css:1:144a0af369]
Ahora en el navegador podemos ver mas centrado nuestro indicador. Volviendo a nuestro CSS, en progress y empty progress agregamos un borde solido de 3px y color blanco y una pequeña sombra de 1px y color gris claro para resaltar el borde.
[css:1:144a0af369].slider > .emptyprogress{
background: #97d9fb;
border: 3px solid white;
height: 40%;
top:25%;
position: absolute;
width: 100%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .progress{
background: #14aaf6;
border: 3px solid white;
height: 40%;
top:25%;
position: absolute;
width: 0%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}[/css:1:144a0af369]
Ya terminando, Agregamos unos bordes redondeados de 10px. Y cambiamos el cursor de indicator, progress y empty progress para darle un mejor aspecto.
[css:1:144a0af369].slider{
background: url('../img/grid.png') -25px -25px;
height: 60px;
position: relative;
width: 100%;
}

.slider > .emptyprogress{
background: #97d9fb;
border: 3px solid white;
cursor: pointer;
border-radius: 10px;
height: 40%;
top:25%;
position: absolute;
width: 100%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .progress{
background: #14aaf6;
border: 3px solid white;
cursor: pointer;
border-radius: 10px;
height: 40%;
top:25%;
position: absolute;
width: 0%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .indicator{
background: url('../img/pointer.png') no-repeat;
cursor: move;
height: 100%;
margin: 8px auto auto -30px;
left: 0%;
position: absolute;
width:60px;
}[/css:1:144a0af369]
Con esto, hemos terminado nuestro slider, Recuerda que todo el código que vimos en este video esta disponible en el repositorio de GitHub de ninja code.

Si tienes alguna duda o pregunta, puedes hacerla en los comentarios y no te olvides suscribirte a nuestro canal de Youtube para mas ninja code.

Como hacer un Social Bar vertical con CSS3

Posted: 05 Oct 2012 04:17 AM PDT

Hola, este es mi primer tutorial y quisiera explicarles una sencilla forma de hacer el llamado social bar o social links en CSS3, que es una barra que contiene links sociales como Facebook, twiter, youtube etc, o lo que le quieras poner, ya sea texto o iconos.

Seguro los has visto en algunas páginas, esta en especial es animada y tendrá un hover que hará que gire 360 grados cuando el mouse esté sobre ella.

Este sería el código HTML:

Código :

  <!doctype html>  <head>     <title>ejemplo</title>  </head>  <body>  <div class="menu">  <a href="#"><img src="face.png" width="40" heigth="40"></a>  <a href="#"><img src="twt.png" width="40" heigth="40"></a>  <a href="#"><img src="face.png" width="40" heigth="40"></a>  <a href="#"><img src="twt.png" width="40" heigth="40"></a>  </div>  </body>  </html>

He colocado un simple div al cual lo identifiqué con una clase llamada "menú" el cual, dentro de éste se encuentran cuatro imágenes con un tamaño definido en 40 x 40px.

El código CSS:
[css:1:878b9c6f04]
div.menu {
position:fixed;
background:#88b7d5;
border:1px solid #c2e1f5;
width:57px;
z-index:100;
left:-50px;

-moz-box-shadow: 2px 3px 16px #000000;
-webkit-box-shadow: 2px 3px 16px #000000;
box-shadow: 2px 3px 16px #000000;
border-radius: 0 15px 15px 0;

transition: all 0.4s ease;
-webkit-transition:all 0.4s ease;
[/css:1:878b9c6f04]

Seleccionamos a la clase menú y declaramos su posición, la cual será fixed ya que queremos que la barra nos siga mientras damos scroll con el mouse. Agregamos un color de fondo, le ponemos un borde, y definimos el ancho de 57px. Al left (izquierda) lo correremos a -50px, para que la mayor parte del elemento quede fuera de la pantalla. Declaramos z-index y le ponemos como valor 100 para que esté sobre todas las posiciones.

Como dato, z-index no tendrá efecto si no le has seteado ninguna posición al elemento. Por si te quedan dudas o no has entendido cómo funciona darles un valor a las posiciones, esta es una página donde podrás ver como funcionan en tiempo real (recomendado): posiciones en tiempo real

Volviendo al CSS, le he colocado box shadow para darle sombra:

[css:1:878b9c6f04]
-moz-box-shadow: 2px 3px 16px #000000;
-webkit-box-shadow: 2px 3px 16px #000000;
box-shadow: 2px 3px 16px #000000;
border-radius: 0 15px 15px 0;
[/css:1:878b9c6f04]

También he redondeado con border-radius la parte superior e inferior derecha de la barra. La cantidad de sombra y el tamaño del borde puedes sacarlo si quieres de las páginas css3maker o css3please.

[css:1:878b9c6f04]
transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
[/css:1:878b9c6f04]

Yo agrego las transiciones antes de seleccionar el hover, que es el que está continuación:

[css:1:878b9c6f04]
.menu:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
left: 0px;
}
[/css:1:878b9c6f04]

El transform con valor rotate(360) es para que de una vuelta completa, y agrego los prefijos para los demás navegadores. El valor de left es de 0px para que quede pegado en todo el extremo de la página.

Ver ejemplo

Si no quieres que gire porque te resulta molesto y sólo quieres que se corra hacia la derecha, dejamos como hover left:0px.

Eso es todo espero que les ayude mucho, si quieren agregar algo comenten y muchas gracias por entrar.

Vector hiperrealista en Illustrator (III)

Posted: 04 Oct 2012 04:12 AM PDT

En este videotutorial de Illustrator comenzamos a trabajar en la zona de los ojos, para añadir más detalles específicos a nuestro retrato, utilizando nuevamente para ello, los degradados suaves a través del uso de la herramienta Malla y varios degradados en las formas, que usaremos como base creándolas con elipses o dibujándolas a mano alzada, para que formen parte de varias zonas de la ceja y las pestañas.

Saludos.

AT boletín - INFORMA

lunes, 12 de noviembre de 2012

Cristalab

Cristalab

¿Cuándo deberíamos usar un Slider en nuestros formularios?

Estructura básica HTML y CSS

Animación y eventos con jQuery

Agregando estilos con CSS

No hay comentarios:

Publicar un comentario