Cómo usar los íconos Font Awesome (fa)

Hola entusiasta del desarrollo!…. Te invitamos a revisar este mismo contenido en nuestro nuevo sitio CodeTips.com.mx !
http://www.codetips.com.mx/css/como-usar-los-iconos-font-awesome-fa/

El conjunto de íconos Font Awesome es una de las alternativas que nos permiten decorar nuestro sitio o desarrollo web con elementos gráficos que le den un toque moderno y ligero ya que la representación gráfica de los íconos no se realiza mediante imágenes sino a través de una tipografía (fuente).

La versión actual incluye una colección de 585 íconos en la versión 4.4.0 de Font Awesome y constantemente se agregan más…….

Seguir leyendo este post…….

Crear un menu usando elementos DIV y CSS

Hola entusiasta del desarrollo!…. Te invitamos a revisar este mismo contenido en nuestro nuevo sitio CodeTips.com.mx !
http://www.codetips.com.mx/css/crear-un-menu-usando-elementos-div-y-css/

Generalmente la creación de menús horizontales en páginas web se realizan mediante listas (ul,ol) o mediante el uso de DIV, en algún otro momento chuyrdz ya expuso detalladamente cómo se realiza la creación de un menu (ul) desde cero.

Ahora mostraré los elementos mínimos para la creación de un menú horizontal usando solamente DIV y darle la funcionalidad necesaria sin uso de JavaScript para lograr la funcionalidad.

A partir de este código mostrado tendrán la posibilidad de personalizarlo de acuerdo al diseño que se seleccione.

La estructura en HTML es la siguiente:

Seguir leyendo este post…….

Cómo usar las animaciones con CSS3

Con la versión 3.0 de CSS es posible crear animaciones de elementos web que anteriormente solo se podía crear mediante un lenguaje de programación estructurado que permitiera estructuras de control (ciclos y condicionantes).

De manera similar ocurrió con las transiciones (también incorporadas en CSS3), sin embargo la diferencia entre las transiciones y las animaciones es que las transiciones se ejecutan a partir de un evento como puede ser el hover y las animaciones no responden a un evento en especial, sino al cargado de los estilos al momento de cargar la página.

para ejemplificar el uso de las animaciones usaremos una imagen.

<img alt=»» » src=»tatto%20page.jpg»  />

y lo que haremos es que mediante animaciones cambiaremos la propiedad de opacidad (opacity) de la imagen de manera que esté transparente al unicio y que se comience a visualizar conforme pasa el tiempo.

Entonces los atributos de la imagen quedaría así:

img{
    animation: aparecer 5s; /*se declara para la imagen una animación llamada «aparecer» y que la animación se realizará en 5 segundos */ 
}

Nota: Estas instrucciones son las declaraciones estándares, en caso de que no se ejecuten tendrás que agregar los prefijos (-webkit-, -o-, -ms-, etc) de acuerdo al navegador que utilices para revisar el ejercicio.

Una vez declarada la animación para el elemento se realiza la declaración de la animación de la siguiente manera:

@keyframes animacion
{
    from{opacity:0;}  /* apariencia inicial del elemento*/
    to{opacity:1;} /* apariencia finaldel elemento*/
}

El ejemplo anterior indica que la opacidad del elemento que tenga asignada esta animación será de «cero» inicialmente (es decir no se verá) y durante la animación se transitará hasta llegar a «uno» (es decir será completamente visible).

Si el ejemplo se deja tal como está, esta animación solo hará una transición es decir de opacidad cero a opacidad uno, sin embargo si queremos que esto sea cíclico (que cuando llegue a opacidad 1 inicie nuevamente) debemos agregar a la animación una instrucción indicando que la animación no se detenga en el estado final:

animation-iteration-count: infinite;

Otro mecanismo para ejemplificar el paso de la animación entre el estado inicial y el final es hacerlo mediante el porcentaje del tiempo que durará la animación, de la siguiente manera:

@-webkit-keyframes aparecer {
    0% {opacity:0;}      /*  similar al «from» estado inicial*/
    50% {opacity:1;}    /*  estado que marca el estado al 50% del tiempo transcurrido */
    100% {opacity:0;} /*  similar a «to», marca el estado al 100% del tiempo transcurrido */
}

Les recomiendo profundizar en los demás parametros de las animaciones que permiten personaliar la transición de la aminación:

  • animation-delay, especifica el tiempo en que comenzará la animación
  • animation-direction, especifica como se desarrollará la animación
  • animation-duration, especifica cuanto tiempo durará el tiempo del ciclo de la animación
  • animation-fill-mode, especifica el estilo que se le aplicará al elemento cuando la animación no ha terminado o no ha comenzado
  • animation-play-state, especifica cuando la animación está ejecutándose o está en pausa.

Cada una de estos parámetros tiene su conjunto de valores.

Espero les sea de utilidad.

Como utilizar un Sprite con CSS

Esta técnica ha sido utilizada desde hace mucho tiempo, principalmente en juegos para simular movimiento a los elementos (gráficos).

Los sprites en el desarrollo de páginas web, evita que para cada icono incorporado como imagen se haga una petición y transferencia entre cliente y servidor, es decir, si mi página tiene un conjunto de iconos para cada icono se hace una petición de transferencia de imagen, entonces con esta técnica, todas las imágenes de los íconos están en una sola imagen, de manera sólo se transfiere una sola imagen al cliente (navegador), evitando así un sinnúmero de peticiones y transferencias para cada icono de la página web.

Una primera opción es crear las imagen con los íconos en una sola linea vertical, como se muestra en al siguiente imagen:
css-sprites-vertical
esta distribución vertical es la forma más sencilla de implementar porque solo nos preocupamos por el alto entre cada gráfico, el HTML se vería así:

<p id=»l1″>Las calculadores del siglo pasado</p>
<p id=»l2″>Sonido desactivado</p>
<p id=»l3″>Unidad de CD/DVD</p>
<p id=»l4″>Cara con lentes</p>

El CSS de la siguiente manera:

#l1, #l2, #l3, #l4 {
    padding-left: 32px;
    height: 32px;
    line-height: 32px;
    background-image:url(‘css-sprites-vertical.gif’);
    background-repeat: no-repeat;
}
#l1 {background-position: 0px 0px;}
#l2 {background-position: 0px -32px;}
#l3 {background-position: 0px -64px;}
#l4 {background-position: 0px -96px;}

donde se declaran algunos aspectos generales, la separación del margen izquierdo (padding), el alto específico (height), la misma imagen de fondo (con la distribución vertical de los gráficos), por último la posición del background de manera estratégica que corresponde al gráfico que se quiere mostrar.

Un inconveniente al utilizar imágenes como sprites donde tienen todas las imágenes ordenadas verticalmente, es cuando son demasiadas imágenes, entonces se propone otra alternativa, la cual establece una sola imagen que contiene gráficos (imágenes) tanto vertical como horizontalmente, como lo muestra la siguiente imagen.

css-sprites

Esto tiene implicaciones, la primera es que el código HTML tiene que cambiar, es necesario hacer uso de un elemento más que servirá para delimitar el espacio vertical y horizontal del background que se mostrará, los elementos que pueden servir para trabajar esta técnica son div, p o img.

En este caso mostraré el ejemplo usando un elemento img, el código HTML quedaría de la siguiente forma:

<p id=»l5″><img src=»pixel.png» alt=»» />Las calculadores del siglo pasado</p>
<p id=»l6″><img src=»pixel.png» alt=»» />Tecla a con acento</p>
<p id=»l7″><img src=»pixel.png» alt=»» />Signo de música</p>
<p id=»l8″><img src=»pixel.png» alt=»» />gráfico de copiar</p>

La imagen pixel.png es una imagen de 1px de alto por 1px por ancho de manera que no interfiera en tapar el background del elemento web.

Para este ejemplo el CSS quedaría así:

#l5 img, #l6 img, #l7 img, #l8 img{
    height: 32px;
    width: 32px;
    background-image: url(‘css-sprites.gif’);
    background-repeat: no-repeat;
    vertical-align: middle;
}

#l5 img{background-position: 0px 0px;}
#l6 img{background-position: -32px 0px;}
#l7 img{background-position: -32px -32px;}
#l8 img{background-position: -64px -64px;}

de igual manera se define el ancho, alto del espacio del gráfico, una única imagen de fondo para el elemento img y de manera personalizada el espacio de la imagen que se mostrará.

Ahora a probar!.

Saludos

Nota: las imágenes utilizadas no son propias, son imágenes tomadas de otros sitios en internet que también las utilizan para ejemplificar el uso de sprites.

Una «intro» a BumpBox…

La idea de este post es mostrar como usar BumpBox (http://www.artviper.net/website-tools/bumpbox-lightbox.php) en los sitios web en desarrollo.

Esta herramienta hace que la presentación de PDF, imágenes, videos se haga diferente, atractiva, de manera que se salga de las formas comunes de presentación.

No es la única herramienta que hace este tipo de transiciones y efectos… sin embargo es una de las que hace presentación de una amplia variedad de recursos., sin tanto rollo comencemos con la creación del ejercicio.

Entendamos la parte conceptual:

  • Lo que se va mostrar en la ventana emergente que crea BumpBox es el valor de href del enlace que hace referencia a la herramienta.

Como ejemplo mostraré el contenido de una página y además un documento PDF, el HTML quedaría así:

<a href=»navegar.pdf»>Enlace de texto</a> <br/><br/>
<a href=»https://www.google.com.mx»><img src=»images/imagen.jpg» /></a>

y para que estos enlaces se reconozcan por la herramienta den incorporar el atributo class, además debemos especificar el tamaño de la ventana emergente en el atributo rel con el formato ancho-alto.

<a href=»navegar.pdf» class=»elemento» rel=»800-600″>Enlace de texto</a> <br/><br/>
<a href=»https://www.google.com.mx» class=»elemento» rel=»800-600″><img src=»images/inna1.jpg» /></a>

Ahora hay que hacer referencia a los recursos JS necesarios.

<script type=»text/javascript» src=»js/mootools.js»></script>
<script type=»text/javascript» src=»js/bumpbox-2.0.1.js»></script>

Justo como lo vemos en las referencias, BumpBox se acompaña de MooTools para funcionar, aunque esto es transparente ya que no tendemos que entrar a detalle.

Por ultimo, necesitamos invocar la función que creará la interacción y dejará los enlaces listos para que al dar clic se muestren dentro de las ventana emergentes los contenidos correspondientes, la función es: doBump( )

La mínima declaración es: doBump( ‘.elemento’);

Aquí se indica que los elementos que transformará son los que usan la clase elemento de CSS, los enlaces que no necesiten ser transformados por BumpBox pueden no llevar la clase o tener otra clase declarada y no son tomadas en cuenta.

La llamada se puede hacer al final de la página mediante la llamada a la función o en el evento onload de body, ambos tendrán el mismo resultado.

La función doBump además de la clase tiene una colección extensa de parámetros, la siguiente tabla lo resume:

name Nombre de la clase de CSS de los elementos que queremos que se afectan por BumpBox
inSpeed Tiempo de transición para mostrar la ventana en milisegundos
outSpeed Tiempo de transición para cerrar la ventana en milisegundos
boxColor Color de bumpbox sin el #
backColor Color del fondo, omitir #
bgOpacity Valor de la opacidad del contorno de la ventana emergente.
bRadius Especificar el redondeo de la ventana
borderWeight Especificar el grosor del borde de la ventana
borderColor Color del borde de la ventana emergente, omitir #
boxShadowSize Tamaño de la sombra en pixeles
boxShadowColor Color de la sombra de la ventana
iconSet Especificar entre 1 y 4 el conjunto de iconos que se utilizarán en la ventana
effectsIn El efecto de transición usada para mostrar la ventana
effectsOut El efecto de la transición usada para ocultar la ventana
bgImage Imagen que puede ser usada de fondo
bgPosition Posición del fondo
bgRepeat Tipo de repetición del fondo

Para tener más información sobre los efectos de transición consultar la referencia de transiciones Fx de MooTools

http://mootools.net/docs/core/Fx/Fx.Transitions#Fx-Transitions

De esta manera una llamada a la función doBump puede quedar así:

<body onload=»doBump( ‘.emergente’,1000, 4000, ‘111’, ‘900’, ‘0.8’, 5, 1 ,’333′, 15,’000′, 2, Fx.Transitions.Bounce.EaseOut, Fx.Transitions.Bounce.EaseOut );»>

Listo, es lo mínimo necesario para usar BumpBox en nuestro sitio web, ya sea un desarrollo propio o un manejador de contenido.

Nos vemos la próxima

el origen del slider…

Independientemente del camino que tomemos para armar y dar la funcionalidad de un slider, el siguiente código dará una idea de cómo es el funcionamiento y estructura.

La idea general central es, generar un código HTML sin tanta personalización en atriburos (id, clases de CSS, names) y que por si solo sea tomado y animado para dar el efecto de estos elemtos tan utilizados actualmente en una variedad de sitios.

Se parte de la estructura HTML.

<div id=»contenedor»>
  <div id=»imagenes»>
      <div><a href=»inna1.html»><img src=»img1.jpg» alt=»» /></a></div>
      <div><a href=»inna2.html»><img src=»img2.jpg» alt=»» /></a></div>
      <div><a href=»inna3.html»><img src=»img3.jpg» alt=»» /></a></div>
      <div><a href=»inna4.html»><img src=»img4.jpg» alt=»» /></a></div>
  </div>
</div>

Nota, de acuerdo a la forma en que será propuesto el ejercicio es necesario crear un contenedor principal, en este caso llamado «contenedor» y otro que es el que se desplazará cada cierto tiempo.

Ahora es necesaria la personalización de estos DIV’s con CSS

#contenedor
{
      border:1px solid red;
      height:100px;
      width:300px;
      overflow:hidden;
}
#contenedor #imagenes
{
      position:relative;
}

una vez definida la apariencia y limitado los espacios la función que será llamada al momento del cargado de la página.

<body onload=»rotarImagen()»>

el código es:

<script type=»text/javascript» language=»javascript»>
      var nImg = 1;
      var pos=100;
      var intervalo=10;
      function rotarImagen()
      {
            if ((pos*(-1))<((document.getElementById(‘imagenes’).children.length-1)*100))
            {
                  document.getElementById(‘imagenes’).style.top = (pos-intervalo) + «px»;
                  pos = pos – intervalo;
            }
            else
            {
                  document.getElementById(‘imagenes’).style.top = «0px»;
                  pos = 0;
            }
      if ((pos%100)!=0) setTimeout(«rotarImagen()»,50);
      else setTimeout(«rotarImagen()»,2000);
     }
</script>

Como pueden ver la transición de las imágenes está en función de su tamaño y se provoca un desplazamiento secuencial del contenedor «Imagenes» que tiene una pausa menor cuando el desplazamiento ha cumplido con el tamaño de la imagen, esto da la apariencia de transición.

En caso de querer incorporar algún otro efecto de transición como difuminado de la imagen se debe modificar el alpha de la imagen (valor entre 0 y 1) y así dar otro efecto de movimiento.

A partir de este pequeño código es que podemos encontrar slides tan elaborados como nuestra imaginación (o el diseñador gráfico) lo requiera.

Saludos

Varias transiciones en CSS 3…

Como sabemos CSS3 está incorporando atributos que facilitan la vida, me refiero evitar meternos con JS sin necesidad.

Ahora les muestro una forma rápida de incorporar varios movimientos en una figura, por ejemplo, rotar e incrementar el tamaño de alguna imagen, o crecer y desvanecer, etc, cualquier combinación es posible.

Primero veamos por separado:

<body style=»margin:150px;»>
   <div>
   </div>
</body>

A este único elemento div que tenemos le daremos unas características iniciales, para lo cual utilizamos algunos atributos de CSS.

div
{
background:red;
width:200px;
height:200px;

//especificamos que su aparencia será tener una rotación de 5 grados
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);

//Especificamos que ademas tendrá una transformación la cual tardará en este caso 5s, 
//todavía no especificamos que transformación tendrá, solo que se hará en el tiempo especificado.

transition: transform 5s;
-moz-transition: -moz-transform 5s;
-webkit-transition:-webkit-transform 5s;
-o-transition: -o-transform 5s;
}

Hasta el momento tenemos:

  1. El objeto div creado
  2. Los estilos con lo que aparecerá de entrada
  3. Se ha especificado que tendrá una transición que durará 5 segs.

Ahora es momento de especificar que transformación tendrá en el tiempo que se ha especificado.

div:hover
{
-webkit-transform:rotate(-10deg) scale(1.5);
-moz-transform:rotate(-10deg) scale(1.5);
-o-transform:rotate(-10deg) scale(1.5);
-ms-transform:rotate(-10deg) scale(1.5);
transform:rotate(-10deg) scale(1.5);
}

Como se aprecia, la transformación consiste en dos cosas, una rotación hasta los -10 grados y ademas crecerá 50% de su tamaño real.

De esta manera podemos agregar la cantidad de transformaciones necesarias sobre el objeto.

Saludos

Transición y transformacion con CSS

Este ejemplo está basado en Original Hover Effects with CSS3, pero lo he resumido para que sea un poco más claro de entender principalmente para aquellos que no estén muy involucrados o que estén iniciando con CSS.

Entonces la cosa está así, como HTML tenemos la siguiente estructura:

<div>
    <img src=»sha.jpg» />
    <div>Mouse arriba</div>
    <div>
        <h2>Transición con CSS3</h2>
        <p>Transición y transformación con CSS3.</p>
        <a href=»http://a.uaslp.mx/e2CSs6z8«>Enlace original</a>
    </div>
</div>

El código anterior no involucra nada en especial, unos cuantos DIV, IMG, P, H2, A que son elementos básicos al estructurar un documento HTML.

Nota: Este ejemplo utiliza imagenes, dos para ser exactos, pueden hacer uso de cualquier imagen de su agrado, solo asegurense que tienen el tamaño apropiado para ser usadas, en este caso se usando de 200 x 15 pixeles.

Ahora vamos definiendo los estilos para cada uno de los elementos del documento HTML que se mostro anteriormente:

.vista{
/*Características generales del DIV*/

width: 200px;
height: 150px;
margin: 10px;   
float: left;   
border: 10px solid #fff;   
overflow: hidden;   
position: relative;    /*se especifica que la posicion sea relativa*/
text-align: center;
/*especificamos un sombreado al DIV*/

-webkit-box-shadow: 2px 2px 5px #000000;   
-moz-box-shadow: 2px 2px 5px #000000;   
box-shadow: 2px 2px 5px #000000;   
background: #FFFFFF url(bgpiel.jpg) no-repeat center center;
}

.vista .mascara {
/*Características generales del DIV máscara que quedará ocupará el mismo espacio*/

width: 200px;
height: 150px;
position: absolute;   
overflow: hidden;   
top: 0;   
left: 0;     
background-color: rgba(255, 231, 179, 0.3);
/*Se especifica el comportamiento en transición de todo el DIV*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;   
-ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»;   
filter: alpha(opacity=0);   
opacity: 0;
}

.vista img {
display: block;   
position: relative;
/*se declara la apariencia de la imagen sin ningun evento, indicando su tamaño orignal (1)*/

-webkit-transform: scaleY(1);   
-moz-transform: scaleY(1);   
-o-transform: scaleY(1);   
-ms-transform: scaleY(1);   
transform: scaleY(1);
/*declaración de como se efecturará la transición de la IMG*/

-webkit-transition: all 0.7s ease-in-out;   
-moz-transition: all 0.7s ease-in-out;   
-o-transition: all 0.7s ease-in-out;   
-ms-transition: all 0.7s ease-in-out;   
transition: all 0.7s ease-in-out;
}

El DIV mascara contiene 3 elementos, un H2, un P y un A a los cuales tambien se les dan características de transición, para que tengan un movimiento propio e independiente del DIV máscara.

.vista h2 {   
text-transform: uppercase;   
color: #fff;   
text-align: center;   
position: relative;   
font-size: 14px;   
border-bottom: 1px solid rgba(0, 0, 0, 0.3);   
background: transparent;   
margin: 5px 20px 0px 20px;
/*Despues de las caractérísticas generales se especifica su transformación, en este caso se escalará*/

-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
color: #333;
/*Se declara como será la transición de la transformación especificada.*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;
}

.vista .descripcion {  
font-family: Georgia, serif;  
font-style: italic;  
font-size: 12px;  
position: relative;  
color: #fff;  
padding: 10px 20px;  
text-align: center;  color: #333;
/*Una vez declaradas las características generales de P, se declara la transformación, en este caso como en el H2, se escalará*/

-webkit-transform: scale(0);  
-moz-transform: scale(0);
 -o-transform: scale(0);  
-ms-transform: scale(0);  
transform: scale(0);
/*Se declara la forma en que se realizará la transición del escalado para este elemento*/

-webkit-transition: all 0.5s linear;  
-moz-transition: all 0.5s linear;  
-o-transition: all 0.5s linear;  
-ms-transition: all 0.5s linear;  
transition: all 0.5s linear;
}

/*Para el elemento A, se hace básicamente lo mismo que para los elementos P y H2, declarar sus apariencia, su transformación y su transición*/
.vista a.info

{   
display: inline-block;   
text-decoration: none;   
padding: 7px 14px;   
background: #000;   
color: #fff;   
text-transform: uppercase;   
-webkit-box-shadow: 0 0 1px #000;   
-moz-box-shadow: 0 0 1px #000;   
box-shadow: 0 0 1px #000;      
-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}

/*Por ultimo un elemento DIV que aparecerá posicionado arriba de la imagen, para la cual se parte del posicionamiento relativo (que es despues de la IMG) y apartir de ahí se reccorre 70px hacia arriba, para después especificar como será su transición. Para este elemento DIV comenzará con estar visible y al final de la transición será invisible*/
.vista .aviso {

  position:relative;
  top: -70px;
  background-color:#FFFFFF;
  -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=.7)»;
     filter: alpha(opacity=.7);
     opacity: .7;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

Ahora, se declararán las características de los elementos de acuerdo a al reacción del mouse cuando se encuentre arriba de ellos (hover), estos conjuntos de estilos pueden considerarse como los puntos finales despues de la transición es decir, por ejemplo, si para el elemento IMG se especifico una transición y el hover de la imagen especifica que tendrá una escalado de 10, significa que la transición será de su tamaño original a un tamaño de 10 veces más.

Por lo tanto aqui no se especifican las transiciones, sino las caracteristicas de como será el elemento al final de la transición.

.vista a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.vista:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»;
   filter: alpha(opacity=0);
   opacity: 0;
}

.vista:hover .mascara {
   -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=100)»;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover h2, .vista:hover .descripcion, .vista:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=100)»;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover .aviso {
   -ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=0)»;
   filter: alpha(opacity=0);
   opacity: 0;

Con los elementos establecidos anteriormente tendrás un efecto interesante de presentación de información, sin necesidad de utilizar algun complemento de JS o cualquier variante, sólo HTML y CSS3.

Si este código lo colocas en una página web podrás ver su funcionamiento, sin embargo con sus respectivas limitantes, que ya se podrán imaginar cual es: IE no soporta hasta el momento las características de transición (para algunos esto es de esperarse). Sin embargo las características de opacidad, transformación si lo son por lo que, lo unico que no veremos es la transición de un estado a otro.

Descarga el ejemplo completo[19KB]

En la red encotrarás mucha información relativa a los atributos de transición, opacidad y transformación como en w3schools o desarrolloWeb, por mencionar algunos.

saludos

Igar

Publicar imagenes desde ASP.NET

En este ejercicio ejemplificaré como recuperar una imagen desde SQL Server y publicarla usando ASP.NET. Con este mecanismo tendremos una paguna aspx que responderá una imagen en lugar de responder HTML.
1.- Iniciamos recuperando el parametro que identificará a la imagen dentro de nuestra tabla en la BD. En esta parte debemos tener el suficiente control para no admitir cualquier valor sino solo aque que pueda darnos un resultado correcto al recuperar la información de la imagen desde nuextra tabla para esto podemos hacer uso de las siguientes condiciones:
Request.QueryString[«img»] == null
Request.QueryString[«img»].ToString() == «»
si esto no se cumple significa que no se ha pasado en la variable «img» la referencia a la imagen que debemos recuperar por lo que no seguimos, ya que no se cumple con los requisitos.
2.- Recuperar la colección de Bytes que corresponde a la BD de acuerdo a la referencia recuperada en el punto 1.
SqlConnection conn = new SqlConnection(Properties.Settings.Default.ConnString);
SqlCommand cmd = new SqlCommand(«select Foto from tabla where Id=@id», conn);
cmd.Parameters.Add(«id», SqlDbType.Int).Value = id;
conn.Open();
byte[] byteImage;
try
{
byteImage = (byte[])cmd.ExecuteScalar();
Response.ContentType = «image/jpeg»;
Response.Expires = 0;
Response.Buffer = true;
Response.Clear();
Response.BinaryWrite(byteImage);
Response.End();
}
catch
{
byteImage = null;
}
conn.Close();

La lógica es, si hay una imagen para mostrar se envia el encabezado de acuerdo al formato de la imagen que se va a enviar en el ejmemplo se considera que las imagenes siempre tendrán el mismo formato (JPG) por eso enviamos de encabezado image/jpeg.

Establacemos que el contenido enviado no va a expirar, además de habilitar el uso de Buffer durante en el envio de contenido de la imagen.
El paso de aplicar el método Clear ya que limpia todo el contenido colocado en la salida como parte de la respuesta de la página ASPX. así nos aseguramos que lo unico que se va a responder por parte de la página es la imagen recuperada desde la BD.
Escribimos la coleccion de Bytes recuperada y para finalizar especificamos que el envío de información ha terminado.

Cabe resaltar que con esta código no importa la estructura HTML que se tenga en la pagina ASPX. Estas instrucciones podrían están en el evento Page_Load.

Un saludo a todos