rollovers vertical y horizontal

  1. Creación de la Imagen

    Lo primero es crear la imagen que escalaremos con el css, para esto utilizamos cualquier editor de imágenes

    Lo importante de la creación de este archivo es la delimitada alineación de las imagenes y el margen de unas con otras, debemos tomar nota de sus posiciones y tamaños, esto es muy importante pues con el css lo que haremos es escalar este archivo para mostrar sólo la parte de la imagen que nos interesa.

    Ancho del Lienzo
    Alto del Lienzo
    Ancho de cada botón
    Alto de cada botón
    Borde de cada botón
    Espacio superior, inferior, izquierdo, derecho y entre cada botón

    Luego de haber diseñado el archivo lo exportamos como gif con fondo transparente.

  2. el HTML

    Creamos la capa y la lista desordenada:




    • Inicio
    • Artículos
    • Tutoriales

    • La lista podría aumentar todo lo que quisieramos y nuestra botonera seguiría manteniendo su mismo y prolijo aspecto.

    • CSS (vertical)

      En que consiste nuestro diseño, primero en eliminar los estilos, márgenes y relleno propios de toda lista xhtml, luego definir cada item de la lista como bloque, pues sólo se puede determinar la posición de un background cuando se aplica a un bloque, y finalmente, aplicar el background-position del a:hover y del a:active, pues del a:link ya lo estamos limitando con el height y padding de cada item. El resto es simplemente definir el texto.
      Lo que en realidad importa, como dije antes, es saber los píxeles de la imagen para poder escalarla.

      /* Primero definimos el añcho de la capa, que debe ser del ancho del lienzo: */
      #menu {
      width: 170px;
      margin: 50px;
      }

      /* Definimos el estilo nuestra lista */

      #menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
      font-family:Verdana,Arial, Helvetica, sans-serif;
      font-size:0.8em;
      font-weight: bolder;
      }

      /* Ahora las características comunes de cada item */

      #menu li a {
      text-decoration: none;
      height: 28px;
      display: block;
      padding: 9px 0 0 24px;
      background: url(botones.gif);
      }

      /* Ahora las caraterísticas especiales */

      #menu li a:link, #menu li a:visited {
      color: #777;
      }

      #menu li a:hover {
      color: #257EB7;
      background-position: 0 -36px;
      }

      #menu li a:active {
      color: #fff;
      background-position: 0 -72px;
      }

    • CSS (horizontal)
      Utilizando los botones verticales añadir

      #menu li {
      float: left;
      width:93px;
      }

      y ampliar el ancho del div:
      #menu {
      width: 279px; /* 93 x 3 (botones) = 279*/
      margin: 50px;
      }

    post original de baluart.net
    ————
    si no tenes tiempo, si no te salio siempre podes optar por los botones express mycoolbutton

    About The Author

    Diseñadora grafica / Desarrolladora web / wordpress themes y mas

    1 Comment

    1. Anonymous dice:

      jhjhgjhghg