Mostrar los tags: imágen

Este código permite sobreponer parte de una imagen encima de la otra, y con el ratón mover parte de la imagen superior sobre la imagen inferior.



Para este efecto se utilizan dos imágenes, la que esta encima y la que se encuentra debajo, y pulsando sobre la imagen o arrastrando el ratón, podemos descubrir mas o menos la imagen inferior.
El encargado de crear este efecto es el estilo clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Para el ejemplo, he utilizado una imagen a color, y la misma imagen en escala de grises para visualizar el efecto.

Función que permite rotar un grupo de imágenes a una velocidad especificada en milisegundos, y permite indicar si al finalizar la rotación vuelve a empezar desde el principio.

Para cada rotación de imágenes, la función tiene que recibir:

En este gif, se muestran varios grupos de imágenes que se mueven a diferente velocidades.

Código que muestra como guardar imagenes dentro de la base de datos SQL Server y recuperarlos.

Código que genera una imagen gif con un gráfico de barras según información de nuestro array.

Puedes especificar los colores y tipo de letra.
Para que se muestren los textos, tiene que disponer del archivo true type de la fuente que vayas a utilizar en la carpeta donde se encuentra el php. Para este ejemplo, he utilizado arialbd.ttf.

Código que genera una imagen png con un gráfico de pastel.

Función que devuelve todas las imágenes de nuestra pagina web.
Permite indicar si deseamos que hayan duplicados

Trabajar con imágenes, en estos días es lo que vende "ya que todo entra por la vista".

Pero si trabajamos solo con move_uploaded_file empiezan nuestro problemas ya que esta instrucción solo mueve un archivo del punto A-B usando el mecanismo HTTP POST.

Si la imagen que queremos es muy grande (sin mencionar la que tomamos de nuestro teléfono que son exageradamente grandes y ahora parecen no acabar de pixelarlas mas) Cuando queremos pintarlas en nuestro src comienza la peregrinación para que cargue.

Esto trae como consecuencia que los clientes visitantes de la pagina se obstinan y abandonan ...

Con esta clase en php "que no es mia, de hecho hay tantas versiones en internet y en tantos idiomas que es difícil saber su autoría"

Lo que hice fue tomar funciones de una y otra y las agrupe en una sola clase, para que al final tengamos todo en uno.

* - Con ella reducimos el tamaño (redimensionar)
* - Creamos img Thumb (muy pequeñas para los perfiles)
* - Eliminamos el fondo negro de los png
* - Enderezamos las imágenes que generalmente las voltean los tlf.

Espero les sea de ayuda, a mi me sirvió de mucho.

Aparte les dejare una pequeña guía de como manipularla.

La subo a Google Drive, por lo pesada de las imágenes https://drive.google.com/file/d/1DIECxgU21ws_zjWkSUa8RBi4QizFpg8o/view?usp=sharing

El presente código genera en la carpeta cuya ruta indicaremos, un video tipo glitch: Para ello, el programa nos pedirá el frame rate, dimensiones y duración en segundos del futuro vídeo, y los rangos de color (para los canales azul, verde y rojo) para definir el color de cada pixel. A partir de ahí se generará la creación del video en 2 fases: 1º la creación de los frames que compondrán el video (que luego podremos eliminar), y 2º la creación del vídeo a partir de dichos frames.

Código que muestra como generar un efecto de zoom sobre una imagen y texto al pasar el ratón por encima.


La misma versión permo haciendo zoom a los dos elementos a la vez: https://www.lawebdelprogramador.com/codigo/CSS/6759-Efecto-de-zoom-ha-varios-elementos-con-un-evento-hover-con-CSS3.html

Este código es una modificación del código https://www.lawebdelprogramador.com/codigo/CSS/2275-Efecto-de-zoom-en-una-imagen-y-texto-con-CSS3.html#comentarios, permitiendo que al pasar el ratón por encima de un elemento, se active el hover de un texto y una imagen a la vez.