Códigos Fuente de CSS

Este simple código, muestra los diferentes efectos que generan los diferentes estilos filter sobre una imágen (grayscale, sepia, saturate, opacity, blur, brightness, contrast, invert, hue-rotate)

Código en CSS Style para generar un efecto Blur compatible con la mayoría de navegadores web. Al pasar el cursor por el objeto, elemento, etc. se puede apreciar el efecto Blur.

Un saludo

Este simple código muestra como poner un icono dentro de in un <input>

Código para dividir en secciones proporcionales la zona visible del navegador web. Sólo precisa unas líneas de CSS y HTML. No utiliza Tablas.

Es compatible, responsable, simple, etc.

Un saludo

GRID + INTRO es un experimento UI / UX basado en CSS Compatible. El resultado es un diseño de aspecto similar a "metro".

Puede utilizarse como página de inicio para navegar por otros contenidos. Tienes varias opciones realizando pequeños cambios: añadir imágenes, vídeos, etc. que guarden una proporción lógica. Es ampliable, compatible, adaptable a proyectos...

Espero sea útil.

Un saludo

Menú realizado en puro CSS Compatible. Varios efectos posibles con eventos del mouse, sin JavaScript...

Veamos el código del ejemplo.

Este código muestra como un div que se encuentra entre dos divs, se adapta en anchura según la anchura total del contenedor de ellos. Este div lleva en su interior un input para visualizar el efecto y mostrar el ejemplo.

Este código muestra como el div que se encuentra entre la cabecera y pie de pagina se adapta en altura según el tamaño especificado por el contenedor. Ver la linea roja que ocupa toda la altura menos el tamaño de la cabecera y pie de pagina.

Este código es una modificación del código ya publicado (https://www.lawebdelprogramador.com/codigo/CSS/2702-Ejemplo-del-movimiento-de-un-div-con-transition-de-css3.html), el cual muestra como sube una capa de abajo hacia arriba al pasar el ratón por encima de la imagen.

Una combinación de efectos Parallax y Reveal para presentar todos los contenidos desplazando la barra de Scroll. No utiliza JavaScript.

La estructura es HTML y CSS adaptable, compatible con cualquier pantalla y/o dispositivo.

Espero sea útil.

Un Saludo