Códigos Fuente de CSS

Mostrando del 51 al 60 de 162 registros
Imágen de perfil
Val: 591
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 (530 códigos) (Publicado el 31 de Marzo del 2011)
50.602 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: 177
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 (77 códigos)
4.594 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: 177
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 (77 códigos)
1.012 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: 177
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 (77 códigos)
1.440 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: 591
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 (530 códigos) (Publicado el 6 de Junio del 2013)
6.535 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: 642
Oro
Ha mantenido su posición 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 (123 códigos)
920 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: 642
Oro
Ha mantenido su posición 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 (123 códigos)
1.010 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: 642
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Enumerar de forma automática elementos con CSS


CSS

Publicado el 11 de Febrero del 2019 por Joel (123 códigos)
1.278 visualizaciones desde el 11 de Febrero del 2019
En este ejemplo se numeran varias listas encadenadas, pero se puede utilizar con cualquier tipo de elemento de tu web.

enumerar-lista


https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

counter-reset: Inicializa el contador y define el nombre del contador. Por defecto empieza en 0

counter-increment: incrementa o decrementa el contador
1
counter-increment: miContador-1

counter: muestra el contador
Imágen de perfil
Val: 55
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

PoPup Simple


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 2 de Febrero del 2019 por 2k (12 códigos) (Publicado el 20 de Enero del 2019)
1.272 visualizaciones desde el 20 de Enero del 2019
PoPup Simple by 2K code

Popup / Modal por focus en puro CSS. No utiliza JavaScript.

Mejor con 2K max.
Imágen de perfil

Poner tooltips en una lista con CSS


CSS

Publicado el 18 de Enero del 2019 por Administrador (673 códigos)
1.020 visualizaciones desde el 18 de Enero del 2019
Este simple código, muestra como poner un tooltip en una lista mediante el hover de CSS.

tooltip