BlogDesign

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle...

Ya vimos anteriormente las transformaciones: scale  y translate Ahora volvamos a trabajar con la propiedad  -transform: rotate . Acá tenemos algunos ejemplos en los que tenemos una misma imagen, pero se les aplican diferentes valores de transformación. rotate(5deg) rotate(-5deg) rotate(180deg) rotate(90deg) rotate(-90deg) Veamos el código que utilizamos para aplicar rotación en las imágenes. . ejemplo1 { -webkit-transform:scale(1) rotate( x deg); -moz-transform:scale(1) rotate( x deg); -o-transform:scale(1) rotate( x deg); -ms-transform:scale(1) rotate( x deg); } Sólo hay que reemplazar la X por el valor que quieras. Hay que tener en cuenta que Si el valor es positivo, el elemento rotará hacia la derecha. Si es negativo, girará hacia la izquierda. Veamos un último ejemplo aplicando la transformación con :hover ahora viceversa Veamos el CSS Ejemplo 6 . ejemplo6 { width:300px; background:white...

Aprovechando la aplicación de Blogger para Chrome , crearemos un acceso directo para poder acceder rápidamente a través del escritorio del sistema operativo Microsoft  Windows . Y también veremos cómo anclar un acceso directo al menú Inicio y la barra de tareas . Primero, debemos tener instalado Google Chrome , y lo podemos descargar gratuitamente a través del enlace que les dejé. Ahora deberemos instalar la aplicación de Blogger a nuestro navegador ingresando a este enlace . Al ingresar aparecerá una pantalla similar a ésta. Pincha + añadir a chrome . Luego de unos segundos se nos abrirá la ventana donde se encuentran todas tus aplicaciones, donde estará la de Blogger. Encuentra el icono de Blogger y dale clic con el botón derecho del mouse. Selecciona Crear accesos directos del menú. Aparecerá una ventanita así: Queda a tu criterio elegir dónde crear los accesos directos: en el Escritorio, el Menú Inicio, o la barra de tareas. Luego ...

Ya vimos cómo utilizar la propiedad -transform: translate.  Ahora volvemos con la transformación scale  que permite cambiar el tamaño de los objetos, o con otras palabras, aplicar zoom, ya sea para aumentar o para disminuir el tamaño. Seguramente quedaste encantado con los ejemplos, en especial el segundo, en el que se logra un sorprendente efecto tridimensional. En la primer imagen, lo que hicimos fue agregar una clase para poder aplicarle los estilos. <div style="text-align: center;"> <img  class=" sun " src=" URL-DE-IMAGEN "/> </div> Ahora veamos cómo lograr los efectos con el CSS. .sun {   /* Trancisiones */ -webkit-transition:0.5s;     /* Podés cambiar la velocidad */ -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; } .sun:hover { cursor:pointer; -webkit-transform:scale(1.5);     /* Efecto de zoom */ -moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5); -webki...