Programando o Intentándolo

13 Abr 2014

Cambiar entre dos imágenes al pasar el ratón por encima con CSS3

Seguro que has visto este efecto en muchas ocasiones y la verdad es que es muy sencillo y además hay varias formas de hacerlo, la más habitual o al menos la más sencilla en cuanto al código que hay que usar es poner la imagen como fondo de algún elemento, por ejemplo un div, y poner la otra imagen de fondo cuando se pase el ratón por encima.

Con crear un div con el id por ejemplo imagen-cambiante y el siguiente CSS ya esta listo.

[crayon-578341e810298441546704/]

Muy sencillo, pero quizás no demasiado satisfactorio porque el intercambio de imágenes se hace muy bruscamente y con las animaciones de CSS3 podemos conseguir un resultado mucho más logrado, y aunque no será tan sencillo como el ejemplo anterior seguirá siendo bastante simple.

(adsbygoogle = window.adsbygoogle || ).push({});

Para poder hacer una animación tiene que haber alguna propiedad que podamos animar y como ...

23 Sep 2013

Como hacer un cubo 3D con CSS3

Con CSS3 se pueden hacer tanto transformaciones 2D como 3D y aquí vamos a ver lo sencillo que es crear un cubo utilizando únicamente CSS3 y luego veremos como poder animarlo usando también únicamente CSS3.

Estructura HTML

Empecemos, lo primero es definir la estructura HTML para poder hacer un cubo para lo que necesitamos un elemento que haga de cubo como tal, sus 6 caras que serán las que tendremos que transformar para formar el cubo y también es necesario que el cubo este dentro de un “contenedor”, luego veremos porque.

[crayon-578341e8129f9095297094/]

Cada cara hay que tratarla de forma individual porque cada una tendrá una combinación de posición y orientación única por lo que tenemos 2 alternativas:

Añadir un identificador a cada cara, cara-superior, cara-derecha, etc. Diferenciar las caras por medio del selector de hijos de CSS3 (:nth-child(número)).

En este ejemplo usaré esta segunda opción para hacer más sencillo la ...

6 Abr 2013

Transiciones CSS3

Una de las novedades de CSS3 son las transiciones con las que se puede conseguir que cuando se cambie una propiedad CSS sea de la forma que sea el cambio entre un estado y otro sea gradual y no un salto brusco.

Hay 4 propiedades para modificar las transiciones y como es habitual en CCS también esta la posibilidad de ponerlas todas o las que queramos en una sola línea.

transition-property: Sirve para indicar la propiedad en la que se quiere aplicar la transición. Ej. transition-property: width; transition-duration: Indica el tiempo que dura la transición (Por defecto 0s). Ej. transition-duration: 5s; transition-timming-function: Para indicar como varia la velocidad de la transición. Puede tomar los siguientes valores: linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(x,x,x,x) (Por defecto ease). Ej. transition-timming-function: linear; transition-delay: Indica el tiempo que pasa hasta que comienza la transición (Por defecto 0s). Ej. transition-delay: 2s; transition: ...
15 Mar 2013

Crear tooltips usando CSS

Los tooltips son esos cuadraditos de texto que aparecen al dejar el ratón sobre algún elemento ya sea de una pagina web o de cualquier programa y dan alguna información de que es o de como usarlo.

En HTML se pueden crear estos mensajes usando el atributo title y poniéndole el texto que se quiera, en la palabra tooltip en negrita puedes ver el ejemplo del uso de este atributo.

[crayon-578341e813fc5918009852/]

Así de sencillo es pero el aspecto tampoco es que sea muy bueno y es probable que no quede bien con el estilo de tu web o que quieras introducir un enlace, una imagen o cualquier elemento en el tooltip y esto con el atributo title no se puede hacer. Vamos a ver lo se sencillo que es hacerlo usando solo CSS (Aquí puedes ver como hacerlo usando javaScript para generar el tooltip y hacerlo ...

27 Nov 2012

Como modificar el estilo de un input file (Versión mejorada)

Hace poco más de un mes me estaba buscando como modificar el estilo de un input file y encontre varias cosas y entre todas, propuse mi solución. Pero hace unos dias mientras estaba completando la galería de imagenes que posteé tampoco hace no mucho tiempo, intente modificar un poco más el input file y me di cuenta de que habia usado una forma bastante retorcida y desde luego no era la mejor.

Asique aquí pongo la solución final (de momento jejeje) para modificar un input file con 5 lineas de HTML, otras 5 lineas de JavaScript y una hoja de estilo.

El codigo HTML es similar a la anterior versión:

[crayon-578341e814ca2457074754/]

Es muy sencillo, en la linea 2 colocamos el campo en el que se mostrará el archivo seleccionado y en la linea siguiente hay una division que contiene el botón y el input file oculto porque no se puede ...