15 trucos CSS útiles que podrías haber pasado por alto

Si ha sido un desarrollador web de frontend por un tiempo, existe una alta probabilidad de que haya tenido un momento en el que estaba tratando de averiguar cómo codificar algo y se dio cuenta después de un poco de googlear, que “hay CSS para eso”. Si no lo hubieras hecho, bien estás a punto de.

Esta publicación es una recopilación de dichos códigos CSS, que pueden proporcionarle funciones como convertir un elemento en un elemento fijo, proporcionarle líneas de subrayado discontinuas, hacer que el texto de su página fluya con una forma especial o lograr un efecto de paralaje. Algunos de ellos cuentan con un amplio soporte, mientras que otros están en camino de recibir soporte completo de todos los navegadores.

1. Numeración de títulos y subtítulos.

   Digamos que tiene un conjunto de encabezados y subtítulos en su documento y los está numerando manualmente o mediante un script. En su lugar, puedes usar contadores de CSS para hacer esto. Ya hay un post en profundidad aquí. Y como es de una especificación de CSS2, puedes apostar a que es compatible con todos los navegadores, excepto quizás con IE 6..

2. Condimenta los subrayados simples

   A veces queremos subrayar con una buena línea punteada o discontinua en lugar de una sólida. Ya que no hay opción para eso, nos conformamos con borde inferior. Pero borde inferior No es una buena solución si el texto que está subrayando se ajusta.

   CSS3 especificó no una, sino tres nuevas propiedades para la decoración del texto. texto-decoración-color, texto-decoración-línea, y texto-decoración-estilo que se puede abreviar en el buen viejo decoracion de texto.

   Puede usarlos para subrayar, subrayar, incluso hacer que el texto parpadee, y más. A partir de abril de 2015, solo Firefox admite esta propiedad, pero puede habilitar “Características experimentales de la plataforma web.” para usarlo en Chrome.

3. Citando una cita

   En primer lugar, no hay necesidad de molestarse en escribir las comillas correctas para citas cortas porque hay HTML para eso: etiqueta que indica citas en línea.

   los La etiqueta también se encarga de citar las comillas internas con comillas simples. Entonces, ¿dónde está el “hay 'CSS' para eso” momento en este?

   Digamos que no desea las comillas dobles predeterminadas o que tiene más de un nivel de comillas anidadas, puede definir sus preferencias de cotización para el elemento de cotización con CSS utilizando el CSS2 citas propiedad.

4. Manejando Tablas Indisciplinadas

   Es posible que haya encontrado una tabla grande con un tamaño de contenido variable por celda que se niega a permanecer dentro del ancho que haya especificado, sin importar lo que intente. Domina esa mesa con la diseño de la mesa Propiedad (para igual altura de columna, siga este enlace).

   Para ser específicos, la solución está en el diseño de la mesa: fijo; valor. Cuando asigna un diseño fijo para la tabla, la tabla y el ancho de celda están determinados por el ancho de la tabla o de la primera fila de celdas (que puede ser definida por el usuario) y no por el contenido. Esto es compatible con todos los navegadores..

5. Hazlo pegajoso

   Los elementos adhesivos son elementos de una página que no se desplazarán fuera de la vista. En otras palabras, se adhiere a un área visible (ventana de visualización o cuadro de desplazamiento). Puedes crear esto con CSS usando posición: pegajosa;.

   Actúan como elementos relativamente posicionados antes de cualquier desplazamiento y luego como elementos fijos una vez que se alcanza un umbral de desplazamiento. Por ahora, solo Firefox lo apoya.

6. Obtenga su texto en forma

   ¿Desea que el texto de su página se curve bien sobre alguna imagen que se muestra a su lado? Puedes probar Formas CSS. Para implementar formas CSS, podemos hacer uso de tres propiedades. forma fuera, margen de forma y forma-imagen-umbral. A partir de abril de 2015, CSS Shapes es compatible con navegadores webkit.

7. Campos obligatorios

   Si tiene un formulario, existe una alta probabilidad de que algunos campos sean requeridos, mientras que otros no lo son. Deberá informar a los usuarios cuál es cuál. El CSS para esto es :necesario :Opcional Pseudo clases. Todos los navegadores modernos los soportan..

8. Exigente con colores

   Si no te gusta cierto color, como el azul, podemos colorear el área seleccionada con otro color y el color ::selección pseudo elemento es el CSS para eso. Esto es compatible con todos los navegadores modernos..

9. Lo comprobé?

   En una situación en la que se haya marcado una casilla de verificación, sería bueno tener otra indicación aparte de la pequeña marca de verificación dentro de la casilla de verificación predeterminada para indicar que el elemento ha sido marcado.

   Hay CSS para aquello que explota el vínculo entre los hermanos inmediatos, dos elementos uno al lado del otro. CSS tiene un selector de hermanos adyacente indicado por el signo más + firmar, y podemos usarlo para apuntar a la etiqueta junto a la casilla de verificación. Pero, ¿qué hay de apuntar primero a la casilla marcada? Ahí está el :comprobado pseudo clase para eso.

10. Como un libro de cuentos

    Entonces, ¿no sería bueno si el primero “O” en el “Había una vez” ¿se ve hermosa? Podemos hacer que se vea bonita, después de todo hay CSS para eso. Aquí es donde ::primera letra El pseudo elemento viene al rescate. Se dirige a la primera letra de la primera línea del elemento de destino. Lea más sobre esto aquí.

11. Le gustaría saber más?

    Un elemento puede tener clase X o datos Y o algún otro valor para un atributo. Si alguna vez necesitamos mostrar dicho valor de atributo de un elemento cerca de él, podemos usar el contenido: attr (x). Recupera el valor del atributo X del elemento, luego podemos mostrarlo al lado del elemento.

12. Un poco más a la izquierda

    Centrar elementos para los principiantes en CSS es toda una hazaña. Diferentes elementos requieren diferentes conjuntos de propiedades CSS para centrarlos. Veremos un ejemplo de los muchos que están disponibles en la red mundial, para que pueda recordar de nuevo que existe CSS para centrar las cosas..

13. Divulgar formato de archivo de enlaces

    ¿Alguna vez has visto una imagen pequeña cerca de un enlace que indica qué es ese enlace? Un PDF? o un DOC? Sí, hay CSS para lograr eso. los contenido: url () Es lo que usaremos para mostrar la imagen detrás de los enlaces..

14. Efecto de paralaje de gatillo

    El efecto de paralaje es un efecto que se utiliza para describir el movimiento aparentemente lento del fondo en relación con el primer plano. Este efecto es popular en los sitios web que implementan el desplazamiento de paralaje. Hay diferentes maneras de implementarlo, el siguiente ejemplo funciona en Firefox con adjunto de fondo: fijo;.

15. El poder de las animaciones CSS

    Probablemente no sea un gran “hay CSS para eso” momento, porque todos ustedes probablemente están al tanto de las animaciones CSS a estas alturas. Pero un pequeño recordatorio no es perjudicial. Hay muchas aplicaciones para las animaciones CSS, pero aquí hay una para un simple ejercicio para colorear..

Ahora lea: 50 fragmentos de CSS útiles que todo diseñador debería tener