Cristalab

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.

Obtener el ancho en píxeles de un texto con jQuery

Posted: 13 Sep 2012 09:23 AM PDT

He creado este plugin en jQuery para obtener el tamaño de un texto y de esta forma, por ejemplo, recortar el texto después de una cantidad de píxeles para que se ajuste mejor en la estructura de la Web.

Coloca el siguiente código en tu web:

Código :

  (function($){      $.fn.pixelTextWidth = function(){     $('body').append('<span style="display:none" id="charw"></span>');//Creamos un span oculto          var texto = $(this).text();//obtenemos su texto          var ancho = 0;          for(var i = 0; texto.length > i; i++){              if(texto[i] != ' '){//si el texto no es un espacio insertamos en el span el carácter                  $('#charw').text(texto[i]);              }else{//si el texto es un espacio debemos hacer esto porque no los contará                  $('#charw').html('&nbsp;');              }              ancho += $('#charw').width();//Obtenemos el ancho en pixeles del span,     }                                           //por lo tanto obtenemos el del caracter actual          $('#charlen').remove();//borramos el span          return ancho;//retornamos el ancho en pixels      }  })(jQuery);

Lo siguiente nos devolverá el valor del ancho en píxeles:

Código :

 $valor = $('id del texto').pixelTextWidth();

Ejemplo completo

Código :

<html>  <head>  <script src="jquery.js" language="javascript" type="text/javascript"></script>  <script language="javascript">  (function($){      $.fn.pixelTextWidth = function(){     $('body').append('<span style="display:none" id="charw"></span>');          var texto = $(this).text();          var ancho = 0;          for(var i = 0; texto.length > i; i++){              if(texto[i] != ' '){                  $('#charw').text(texto[i]);              }else{                  $('#charw').html('&nbsp;');              }              ancho += $('#charw').width();     }          $('#charlen').remove();          return ancho;      }  })(jQuery);    $(document).ready(function(){          var val = $('#texto').pixelTextWidth();     $('#tam').text(val);  });  </script>  </head>  <body>      <span id="texto">Texto con caracteres de tama&ntilde;os diferentes</span>      <br/>su tama&ntilde;o es de: <span id="tam"></span>px  </body>   </html>

Sugerencias para mejorar el plugin siempre bienvenidas :wink:

AT boletín - INFORMA

viernes, 5 de octubre de 2012

Cristalab

Cristalab

Ejemplo completo

No hay comentarios:

Publicar un comentario