Códigos Fuente de CSS

Mostrando del 1 al 10 de 88 registros
<<>>
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
180 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

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


CSS

Publicado el 16 de Enero del 2018 por Xavi
272 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
Actualizado

Alinear en altura un div al div de al lado


CSS

Actualizado el 15 de Enero del 2018 por Xavi (Publicado el 06 de Junio del 2013)
4.445 visualizaciones desde el 06 de Junio del 2013. Una media de 21 por semana
Código que muestra como alinear el primer div a la altura del segundo.

columna-igual-otra-columna
Imágen de perfil

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


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 02 de Enero del 2018 por Xavi
418 visualizaciones desde el 02 de Enero del 2018
Este código es una modificación del código ya publicado (http://inspiradigitalmarketing.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

Vídeo centrado y ajustado proporcional, con CSS Style


CSS

Actualizado el 16 de Septiembre del 2017 por ScriptShow (Publicado el 14 de Septiembre del 2017)
706 visualizaciones desde el 14 de Septiembre del 2017. Una media de 42 por semana
Como centrar y ajustar respetando las proporciones de un vídeo a distintas pantallas o dispositivos, con CSS Style compatible.

Espero sea útil.

Un saludo
Imágen de perfil

Efecto Parallax Reveal con CSS


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 09 de Septiembre del 2017 por ScriptShow (Publicado el 19 de Agosto del 2017)
997 visualizaciones desde el 19 de Agosto del 2017. Una media de 49 por semana
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
Imágen de perfil

Listas con imagenes


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 09 de Septiembre del 2017 por Xavi (Publicado el 04 de Marzo del 2012)
14.331 visualizaciones desde el 04 de Marzo del 2012. Una media de 49 por semana
Sencillo código que muestra como poner una imagen en una lista de html <ul><li>.
NOTA: Para probarlo, hay que disponer de una imagen denominada "arrow.png" en la misma carpeta que el código html.

listas-con-imagenes
Imágen de perfil

Cambiar el color de fondo utilizando transition de css3


CSS

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 07 de Septiembre del 2017 por xve
649 visualizaciones desde el 07 de Septiembre del 2017. Una media de 35 por semana
Este simple ejemplo ,muestra como cambiar el color de fondo de un elemento utilizando transition de CSS3
Imágen de perfil

Efecto Reveal con CSS


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 04 de Septiembre del 2017 por ScriptShow (Publicado el 03 de Septiembre del 2017)
643 visualizaciones desde el 03 de Septiembre del 2017. Una media de 35 por semana
Un efecto Reveal con CSS aplicado a pequeñas imágenes de fondo...
Al actuar sobre el Scroll, van apareciendo las imágenes colocadas de fondo en cada sección. Se pueden añadir secciones e imágenes con igual o distinto tamaño, cambiar las existentes, etc.

Un saludo
Imágen de perfil

Centrar y Ajustar Imagen con métodos básicos de CSS


CSS

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 05 de Agosto del 2017 por ScriptShow (Publicado el 05 de Marzo del 2017)
3.192 visualizaciones desde el 05 de Marzo del 2017. Una media de 70 por semana
Como centrar una imagen en cualquier dispositivo / pantalla de modo responsable con CSS compatible; sin pseudo clases, sin media query, sin calcular márgenes, sin importar el tamaño, etc.
El resultado es parecido al de aplicaciones de escritorio cuando redimensionamos la ventana.

Espero sea útil.


Un saludo