Códigos Fuente de CSS

Mostrando del 1 al 10 de 96 registros
<<>>
Imágen de perfil

Centrar un texto verticalmente dentro de una lista <li> con imágenes


CSS

Publicado el 10 de Abril del 2018 por xve
382 visualizaciones desde el 10 de Abril del 2018
Este simple código muestra como mostrar un texto centrado verticalmente dentro de una lista <li> con imágenes que se adapta al 100% de la anchura del navegador (pensado para smarthphone)

css-centrar-texto-con-imagen
Imágen de perfil

Centrar texto verticalmente dentro de una lista <li>


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 10 de Abril del 2018 por xve (Publicado el 07 de Abril del 2018)
438 visualizaciones desde el 07 de Abril del 2018
Este simple código muestra como mostrar un texto centrado verticalmente dentro de una lista <li>

centrar-texto-en-lista
Imágen de perfil

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


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 23 de Marzo del 2018 por Xavi
607 visualizaciones desde el 23 de Marzo del 2018. Una media de 147 por semana
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

Efecto Blur con CSS Compatible


CSS

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 18 de Marzo del 2018 por ScriptShow (Publicado el 16 de Marzo del 2018)
635 visualizaciones desde el 16 de Marzo del 2018. Una media de 119 por semana
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

Poner un icono dentro de un cuadro de texto


CSS

Publicado el 18 de Marzo del 2018 por xve
913 visualizaciones desde el 18 de Marzo del 2018. Una media de 182 por semana
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

Dividir la zona visible del navegador


CSS

Publicado el 06 de Marzo del 2018 por ScriptShow
458 visualizaciones desde el 06 de Marzo del 2018. Una media de 70 por semana
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

Grid + Intro utilizando CSS


CSS

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 22 de Febrero del 2018 por ScriptShow (Publicado el 26 de Enero del 2018)
1.132 visualizaciones desde el 26 de Enero del 2018. Una media de 98 por semana
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

Menú - CSS Focus Hover Efectos


CSS

Publicado el 04 de Febrero del 2018 por ScriptShow
523 visualizaciones desde el 04 de Febrero del 2018. Una media de 49 por semana
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

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
524 visualizaciones desde el 21 de Enero del 2018. Una media de 42 por semana
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

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


CSS

Publicado el 16 de Enero del 2018 por Xavi
671 visualizaciones desde el 16 de Enero del 2018. Una media de 49 por semana
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