Archivo de la etiqueta: css

Como instalar Firebug en Firefox

Publicado el en la categoría Diseño y Programación

Como instalar Firebug en FirefoxTanto si estamos desarrollando nuestro sitio web, como si detectamos alguna anomalía en él, es bueno contar con alguna herramienta para comprobar el buen funcionamiento de nuestra página. Una buena utilidad es Firebug, un plugin disponible para para el navegador Firefox, que nos ayudará a inspeccionar nuestra web y localizar estos posibles errores. En el artículo de hoy os vamos a mostrar como instalar Firebug en Firefox y como iniciarlo una vez instalado. Sigue leyendo

Facebooktwittergoogle_plus

Hojas de estilo CSS modernas con Less

Publicado el en la categoría Diseño y Programación

lessLess es un preprocesador de hojas de estilo CSS que extiende el lenguaje y añade características avanzadas como variables, mixins, funciones y mucho más, lo cual permite dinamizar nuestras hojas de estilo para hacerlas más mantenibles y extendibles sin complicar el desarrollo de nuestras hojas de estilo, ya que Less usa la misma sintaxis básica que CSS.

A continuación os mostramos algunos ejemplos básicos que ilustran a la perfección las características dinámicas que Less proporcina a tus hojas de estilo:

Sigue leyendo

Facebooktwittergoogle_plus

Prioridades de las etiquetas CSS

Publicado el en la categoría Diseño y Programación

Prioridades de las etiquetas CSSCuando analizamos un sitio web, es muy común encontrarnos con diferentes etiquetas CSS aplicadas a un mismo elemento HTML. El navegador se encarga de recopilar toda la información relativa a los estilos y la aplica a la página utilizando unos valores y descartando otros. El artículo de hoy, pretende ofrecer un poco de luz en como los navegadores interpretan esta información. Sigue leyendo

Facebooktwittergoogle_plus

Rotar imágenes con CSS

Publicado el en la categoría Diseño y Programación

Queremos mostraros como conseguir un curioso efecto con CSS. Se trata de hacer rotar imágenes, concretamente provocar la rotación de 180 grados de una imagen al situar el cursor sobre ella.

Este efecto que hace unos años nos hubiera costado muchas líneas de código Javascript con las correspondientes librerías, hoy en dia con unas simples líneas de CSS tenemos mas que suficiente.

Para empezar vamos a crear una sencilla página HTML. En dicha página ubicaremos una imagen que será nuestra protagonista.

El código HTML que utilizamos es el siguiente:

<div id="contenedor">
 <div id="contenedor-imagen">
 <img src="imagen.jpg">
 </div>
 </div>

El siguiente paso será posicionar la caja contenedora:

#contenedor{
 width: 280px;
 margin: 0 auto;
 padding-top:150px;
}

A continuación añadimos un pequeño reborde para remarcar la imagen y añadimos el efecto de transición para que la imagen nos rote suavemente (añadimos la compatibilidad para los diferentes navegadores):

#contenedor-imagen img {
 border: 5px solid #eee;
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
}

Finalmente añadimos la propiedad “hover“, para que al situarnos encima de la imagen, ésta realice un giro hacia la izquierda de 90 grados:

#contenedor-imagen img:hover {
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

Una vez situamos el cursor sobre la imagen, obtenemos un resultado como el siguiente:

Rotar imágenes con CSS

Os invitamos a experimentar con el código cambiando tanto los grados de rotación como el efecto de transición.

Facebooktwittergoogle_plus

Efecto lightbox en tu web

Publicado el en la categoría Diseño y Programación

Es bastante habitual encontrar paginas web que al cliquear sobre una imagen, vemos esta a pantalla completa y oscureciendo el resto de la página. Este tipo de efectos se les denomina lightbox y funcionan gracias a la implementación de librerias JQuery. Hoy vamos a ver como añadir un efecto lightbox en tu web. Sigue leyendo

Facebooktwittergoogle_plus

Precarga de imágenes con CSS

Publicado el en la categoría Diseño y Programación

Es muy corriente el utilizar varias imagenes para un menu o un botón. Dependiendo del estado del elemento, este mostrará una imagen u otra. Dependiendo del tamaño de la imagen y de la carga del servidor, puede provocar que al cambiar de estado (el menú, botón, etc.) se requieran unos segundos para cargar la imagen, con el consiguiente fallo de visualización. Hace tiempo ya os explicamos en el artículo creación de un Sprite una técnica para cargar una única imagen y que esta se fuera posicionando según el estado del botón, para evitar este error en la carga de imagenes. Hoy os queremos mostrar otra técnica utilizando también CSS. Sigue leyendo

Facebooktwittergoogle_plus

Creación de un Sprite con CSS

Publicado el en la categoría Diseño y Programación

Desde que conocemos Internet, los enlaces han sido parte importante de las páginas ya que nos permiten acceder a todo el contenido de la web “navegando” por sus diferentes páginas. Conocemos los distintos estados de un enlace (activo, visitado,…) y como mediante diseño podemos modificar su aspecto.

Hoy vamos a modificar estos estados mediante CSS y una imagen. Dicha imagen será realmente un Sprite, la cual visualizaremos cierta porción de imagen dependiendo del estado del enlace. La razón para utilizar esta técnica es la sencillez del código requerido y su compatibilidad con la gran mayoria de los navegadores, ya que utilizamos CSS2.

Lo primero será crear la imagen. Vamos a partir del logotipo de nuestra web hermana tecnoblogin.com para crear los cuatro estados del enlace.

sprite-tecnoblogin-estados

Ahora le toca el turno a la programación. En nuestro documento HTML, crearemos un enlace a la hoja de estilos y codificaremos el enlace. A continuación en el fichero CSS indicaremos el código para los cuatro estados del enlace:

Codigo HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ejemplo de CSS Sprites</title>
<link rel="stylesheet" type="text/css" href="sprite.css" />    
</head>
<body>
    <p>Ejemplo de Sprite con CSS</p>   
    <a id="tb" href="http://www.tecnoblogin.com" target="_blank">Acceder
a tecnoblogin.com</a> 
</body>
</html>

Codigo CSS

      a#tb {
        display:block;
        width:150px;
        height:35px;
        text-indent:-9999px;
        background:url(sprite-tecnoblogin.jpg);
      }

      a#tb:link { background-position: top left; }      
      a#tb:hover { background-position: top right!important; }
      a#tb:active { background-position: bottom left!important; }
      a#tb:visited { background-position: bottom right; }

Pulsa para ver el ejemplo en funcionamiento

Facebooktwittergoogle_plus

Viewport ayuda a visualizar tu página en dispositivos móviles

Publicado el en la categoría Diseño y Programación

La etiqueta viewport, inicialmente fue creada para ser añadida dentro de los “meta” de una página web. Esta etiqueta se usa para que los navegadores de los dispositivos móviles, escalaran correctamente las páginas, indicando el tamaño al cual se debía mostrar la página.
Su sintaxis básica es:

<meta name="viewport" content="
    width = [pixels | device-width ],
    height = [pixels | device-height],
    initial-scale = float,
    minimum-scale = float,
    maximum-scale = float,
    user-scalable = [yes | no]
">

Ahora bien, desde la W3C, lo que se está intentando es realizar la migración de meta viewport a CSS, apareciendo pues, la directiva @viewport, siendo su sintaxis:

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

e indicando el ancho que queremos que tenga la página, que en este ejemplo será el ancho que permita el dispositivo. Otros valores podrán ser:

  • min-width o max-width
  • min-height o max-height
  • min-zoom, max-zoom o user-zoom
  • zoom
  • orientation

Puedes consultar la página de referencia de la W3C para ver las posibilidades de @viewport para adaptar nuestra página web a los tamaños de los dispositivos móviles.

 

Facebooktwittergoogle_plus

Superponiendo divs mediante CSS

Publicado el en la categoría Diseño y Programación

Por norma general, todas las etiquetas html ocupan un espacio dentro de la página. Este modelo de cajas se posicionan unas junto a otras o bien unas debajo de otras. Pero si lo que queremos es que unas cajas se superpongan con otras, deberemos “romper” la barrera para que una caja se sitúe por encima de otra. Para ello, deberemos echar mano de las etiquetas CSS position y z-index.

Etiqueta position:

La etiqueta position tiene por defecto el valor static. Para ubicar un <div> generalmente se usa otro div contenedor con valor relative para que se adapte a la página. En su interior ubicaremos nuestro div indicando position absolute y dandole los valores necesarios para posicionarlo dentro del contenedor, tal y como se muestra en el siguiente ejemplo:

<div style="position: relative;">
  <div style="position: absolute; left: 40px; top: 40px;"> CUADRO 1 </div>
</div>

En el caso de querer superponer una caja encima de otra, tan solo tendremos que indicar los valores oportunos a ambos divs:

<div style="position: relative;">
  <div style="position: absolute; left: 40px; top: 40px;"> CUADRO 1 </div>
  <div style="position: absolute; left: 80px; top: 90px;"> CUADRO 2 </div>
</div>

Aunque para el ejemplo hemos añadido mas estilos a las cajas para aumentar su visibilidad, gracias al posicionamiento obtendríamos un resultado como el siguiente:

superponiendo-divsEtiqueta z-index:

Gracias a la incorporación de la etiqueta z-index en nuestro código, podremos alterar el orden natural de las cajas. Z-index modificará el orden, siendo las capas mas visibles para el usuario las que tengan un número mayor, quedando mas ocultas las que tengan un indice menor, tal como vemos en el siguiente ejemplo:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 25px; z-index: 1;"> CUADRO 1 </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CUADRO 2 </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CUADRO 3 </div>
</div>superponiendo-divs-2
Facebooktwittergoogle_plus