CSS Archives - Programando o Intentándolo

7 Jun 2017

Estilos CSS para imprimir @media print

Publicado el Miércoles 7 de Junio de 2017 en CSS, CSS3 por Iván Salas

¿Pero se imprimen las páginas web? Pues sí, aunque es un punto que se suele pasar por alto cuando se diseña una web, por ejemplo la plantilla que he utilizado de base para este blog no tenía definido ningún estilo especial para la impresión y cuando la adapte como a mí me pareció pues ni se me paso por la cabeza que debía de poner unos estilos para cuando alguien quiera imprimir algún artículo, y hace unos días recibí un comentario justo sobre el tema de la impresión, así que aprovecho para contar como se puede hacer y de paso dejo lista la web para poder imprimir sin gastar litros de tinta.

Al menos hay que tener en cuenta lo siguiente cuando se define un estilo para imprimir:

Eliminar todo el contenido irrelevante para lo que estas imprimiendo como menús, barras laterales, anuncios, artículos relacionados, comentarios, videos, … Evitar los ...

0 Comments

13 Abr 2014

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

Publicado el Domingo 13 de Abril de 2014 en CSS3 por Iván Salas

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-5946e2331affe835542423/]

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.

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

3 Comments

23 Sep 2013

Como hacer un cubo 3D con CSS3

Publicado el Lunes 23 de Septiembre de 2013 en CSS3 por Iván Salas

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-5946e2331ba0a948934594/]

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 ...

3 Comments

6 Abr 2013

Transiciones CSS3

Publicado el Sábado 6 de Abril de 2013 en CSS, CSS3 por Iván Salas

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: ...

2 Comments

15 Mar 2013

Crear tooltips usando CSS

Publicado el Viernes 15 de Marzo de 2013 en CSS, CSS3, HTML por Iván Salas

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-5946e2331cfb1762141099/]

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 ...

6 Comments