Códigos Fuente de CSS

Mostrando del 61 al 70 de 145 registros
Imágen de perfil
Val: 652
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo de los diferentes filter de CSS sobre una imágen


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 23 de Marzo del 2018 por Xavi
1.202 visualizaciones desde el 23 de Marzo del 2018
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)

filter
Imágen de perfil
Val: 408
Plata
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Efecto Blur con CSS Compatible


CSS

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 18 de Marzo del 2018 por ScriptShow (Publicado el 16 de Marzo del 2018)
3.252 visualizaciones desde el 16 de Marzo del 2018
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

imagen-normal
imagen-con-blur
Imágen de perfil
Val: 672
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Poner un icono dentro de un cuadro de texto


CSS

Publicado el 18 de Marzo del 2018 por xve
8.076 visualizaciones desde el 18 de Marzo del 2018
Este simple código muestra como poner un icono dentro de in un <input>

css-poner-icono-en-cuadro-de-texto
Imágen de perfil
Val: 408
Plata
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Dividir la zona visible del navegador


CSS

Publicado el 6 de Marzo del 2018 por ScriptShow
806 visualizaciones desde el 6 de Marzo del 2018
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
Imágen de perfil
Val: 408
Plata
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Grid + Intro utilizando CSS


CSS

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 22 de Febrero del 2018 por ScriptShow (Publicado el 26 de Enero del 2018)
1.860 visualizaciones desde el 26 de Enero del 2018
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
Imágen de perfil
Val: 408
Plata
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Menú - CSS Focus Hover Efectos


CSS

Publicado el 4 de Febrero del 2018 por ScriptShow
1.925 visualizaciones desde el 4 de Febrero del 2018
Menú realizado en puro CSS Compatible. Varios efectos posibles con eventos del mouse, sin JavaScript...

Veamos el código del ejemplo.
Imágen de perfil
Val: 652
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Redimensionar un div que esta entre dos divs según la anchura de su contenedor


CSS

Publicado el 21 de Enero del 2018 por Xavi
882 visualizaciones desde el 21 de Enero del 2018
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.

div-se-adapta-en-anchura
Imágen de perfil
Val: 652
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Redimensionar un div en altura dependiendo de la altura de su contenedor


CSS

Publicado el 16 de Enero del 2018 por Xavi
2.753 visualizaciones desde el 16 de Enero del 2018
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.

div-se-adapta-en-altura
Imágen de perfil
Val: 652
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo de movimiento de un div de abajo hacia arriba con transition de css3


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 2 de Enero del 2018 por Xavi
2.372 visualizaciones desde el 2 de Enero del 2018
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.

transition
Imágen de perfil
Val: 408
Plata
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Efecto Parallax Reveal con CSS


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 9 de Septiembre del 2017 por ScriptShow (Publicado el 19 de Agosto del 2017)
2.626 visualizaciones desde el 19 de Agosto del 2017
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