Códigos Fuente de CSS

Mostrando del 31 al 40 de 145 registros
Imágen de perfil
Val: 198
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

CSS ejemplo del uso de object-fit sobre imágenes


CSS

Publicado el 22 de Mayo del 2019 por Joan
696 visualizaciones desde el 22 de Mayo del 2019
Se muestra un ejemplo del uso de la propiedad object-fit sobre una imagen.

css-object-fit
Imágen de perfil
Val: 198
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo del uso de flex


CSS

Publicado el 22 de Mayo del 2019 por Joan
691 visualizaciones desde el 22 de Mayo del 2019
Ejemplo del uso de las propiedades justify-content y align-items utilizando el display:flex

flex


https://developer.mozilla.org/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS
Imágen de perfil
Val: 652
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Mostrar una capa al pasar el raton por encima de un texto o imagen


CSS

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 22 de Mayo del 2019 por Xavi (Publicado el 31 de Marzo del 2011)
49.128 visualizaciones desde el 31 de Marzo del 2011
Código que muestra como al pasar el ratón por encima de un texto, te muestra una capa con el contenido que desees al lado del ratón. Al quitar el ratón de encima de el texto, desaparece la capa que se esta mostrando.

Versión 1:
Probado con IE6,7,8, 9, Firefox, Opera, Chrome y Safari.

Versión 2:
Funciona con todos los navegadores excepto con IE

layer-raton
Imágen de perfil
Val: 198
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Gráfico de barras utilizando unicamente HTML y CSS


CSS

Publicado el 5 de Mayo del 2019 por Joan
2.080 visualizaciones desde el 5 de Mayo del 2019
Este código muestra como crear un gráfico de barras tanto horizontal como vertical utilizando unicamente HTML y CSS.

grafico-html-css-vertical

grafico-html-css-horizontal
Imágen de perfil
Val: 198
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Cortar el texto y poner puntos suspensivos


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 25 de Abril del 2019 por Joan
777 visualizaciones desde el 25 de Abril del 2019
Este simple código, muestra como recortar un texto y poner puntos suspensivos si el texto no cabe en su contenedor.

ellipsis
Imágen de perfil
Val: 198
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Tipos de bordes en CSS3


CSS

Publicado el 25 de Abril del 2019 por Joan
987 visualizaciones desde el 25 de Abril del 2019
Ejemplo que muestra todos los tipos de bordes posibles en CSS

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

Alinear en altura un div al div de al lado


CSS

Actualizado el 28 de Marzo del 2019 por Xavi (Publicado el 6 de Junio del 2013)
6.381 visualizaciones desde el 6 de Junio del 2013
Código que muestra como alinear el primer div a la altura del segundo.

columna-igual-otra-columna
Imágen de perfil
Val: 424
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Posicionar una imagen en la parte inferior derecha de la pantalla


CSS

Publicado el 15 de Marzo del 2019 por joel
765 visualizaciones desde el 15 de Marzo del 2019
Este simple código, posiciona una imagen en la parte inferior derecha de la pantalla por debajo del contenido de nuestra web.
Al pasar por encima de la imagen con el ratón, se quita la transparencia.

imagen-transparete
Imágen de perfil
Val: 424
Plata
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Uso de variables en CSS


CSS

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 4 de Marzo del 2019 por joel
910 visualizaciones desde el 4 de Marzo del 2019
Este código muestra como utilizar variables en CSS y cambiar dichas variables desde JavaScript para cambiar completamente el diseño de nuestra web.
En este ejemplo, se muestra como cambiar los colores y el estilo de un borde cambiando el valor de las variables CSS mediante JavaScript.
Imágen de perfil
Val: 408
Plata
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Links de Texto que aumenta / disminuye OnMouseOver


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 24 de Febrero del 2019 por ScriptShow (Publicado el 2 de Marzo del 2017)
1.703 visualizaciones desde el 2 de Marzo del 2017
Un efecto con CSS sobre links de texto que aumenta / disminuye el tamaño de la fuente al pasar el mouse...
En fin, muy pocas líneas de código nativo se encargan de todo.

Espero que os guste.


Un saludo