Códigos Fuente de CSS

Mostrando del 11 al 20 de 162 registros
Imágen de perfil
Val: 136
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Centrar un elemento verticalmente utilizando :before


CSS

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 10 de Marzo del 2020 por Katas (12 códigos)
389 visualizaciones desde el 10 de Marzo del 2020
Código que muestra como centrar un elemento verticalmente utilizando el pseudo elemento :before

centrado-vertical-con-pseudo-elemento
Imágen de perfil
Val: 136
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Centrar un elemento horizontal y vertical sin saber el tamaño de su contenedor


CSS

Publicado el 1 de Marzo del 2020 por Katas (12 códigos)
580 visualizaciones desde el 1 de Marzo del 2020
Centra vertical y horizontalmente un elemento hijo dentro de su elemento padre utilizando position: absolute y transform: translate() (como alternativa a flexbox o display: table).
Este método no requiere que usted sepa la altura o el ancho de su padre o hijo.

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

Especificar la fuente nativa para cualquier dispositivo


CSS

Publicado el 28 de Febrero del 2020 por Katas (12 códigos)
618 visualizaciones desde el 28 de Febrero del 2020
Utiliza la fuente nativa del sistema operativo para acercarse a la sensación de una aplicación nativa.

El navegador buscara la primera fuente, si no la encuentra, buscara la segunda, y así sucesivamente.
Las fuentes que se añaden al estilo son:
-apple-system (San Francisco), se usa en iOS y macOS (no en Chrome)
BlinkMacSystemFont (San Francisco), utilizado en macOS y en Chrome
Segoe UI se usa en Windows 10
Roboto se usa en Android
Oxygen-Sans se usa en Linux con KDE
Ubuntu se usa en Ubuntu (todas las variantes)
Cantarell se usa en Linux con GNOME Shell
Helvetica Neue y Helvetica se usan en macOS 10.10 y versiones posteriores
Arial es una fuente ampliamente compatible con todos los sistemas operativos
sans-serif es la fuente alternativa si ninguna de las otras es compatible
Imágen de perfil
Val: 136
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Poner un texto en forma de "grabado"


CSS

Publicado el 19 de Febrero del 2020 por Katas (12 códigos)
427 visualizaciones desde el 19 de Febrero del 2020
Ejemplo de poner un efecto donde el texto parece estar "grabado"

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

Poner un gradient a un texto


CSS

Publicado el 15 de Febrero del 2020 por Katas (12 códigos)
408 visualizaciones desde el 15 de Febrero del 2020
Ejemplo de poner un "gradient" a un texto.

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

Cambia el ajuste y la posición de una imagen dentro de su contenedor


CSS

Publicado el 15 de Febrero del 2020 por Katas (12 códigos)
234 visualizaciones desde el 15 de Febrero del 2020
Cambia el ajuste y la posición de una imagen dentro de su contenedor mientras conserva su relación de aspecto. Anteriormente solo era posible usar una imagen de fondo y la propiedad de tamaño de fondo.

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

Simple Accordion effect CSS


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 2 de Febrero del 2020 por 2k (12 códigos)
458 visualizaciones desde el 2 de Febrero del 2020
Simple Accordion effect CSS by 2K code

Un Accordion effect CSS muy simple...

Mejor con 2K max.
Imágen de perfil
Val: 432
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Links de Texto que aumenta / disminuye OnMouseOver


CSS

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 2 de Febrero del 2020 por Scriptshow (138 códigos) (Publicado el 2 de Marzo del 2017)
1.861 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 sea útil.

Un saludo
Imágen de perfil
Val: 654
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Poner un div que ocupe toda la altura y anchura del navegador


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 20 de Enero del 2020 por Xve (281 códigos)
1.118 visualizaciones desde el 20 de Enero del 2020
Simple código que muestra como poner un div que ocupe toda la anchura y altura del navegador.
Imágen de perfil
Val: 432
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Triángulos y otras figuras con CSS Compatible


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 18 de Enero del 2020 por Scriptshow (138 códigos)
523 visualizaciones desde el 18 de Enero del 2020
Saludos,

una Class en CSS que sirve como base para realizar figuras: triángulos, rombos, flechas, etc. con etiquetas DIVs. Combinando colores, transparencias, conseguiremos efectos sólidos diversos.

Es compatible con todos los navegadores actuales y no actuales.

Espero sea útil.