Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS ofrece que las columnas de desplazamiento negativo tienen clases que se pueden usar para extraer un div sobre una distancia de columna hacia la izquierda.
Primer CSS Columnas de desplazamiento negativo clases utilizadas:
- offset-n1: esta clase se utiliza para proporcionar una distancia de 1 unidad hacia la izquierda.
- offset-n2: esta clase se utiliza para proporcionar una distancia de 2 unidades hacia la izquierda.
- offset-n3: esta clase se utiliza para proporcionar una distancia de 3 unidades hacia la izquierda.
- offset-n4: esta clase se utiliza para proporcionar una distancia de 4 unidades hacia la izquierda.
- offset-n5: esta clase se utiliza para proporcionar una distancia de 5 unidades hacia la izquierda.
- offset-n6: esta clase se utiliza para proporcionar una distancia de 6 unidades hacia la izquierda.
- offset-n7: esta clase se utiliza para proporcionar una distancia de 7 unidades hacia la izquierda.
Sintaxis:
<div class="mx-auto border" style="width: 500px">
<div class="offset-n1
col-4 border p-4">
...
</div>
</div>
Ejemplo 1: El siguiente ejemplo demuestra el uso de las columnas de desplazamiento negativo de Primer CSS con las clases offset-n1, offset-n2, offset-n3 y offset-n4 .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Negative Offset Columns </title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h3 class="text-center"> Primer CSS Negative Offset Columns </h3> <div class="mx-auto border mt-5" style="width: 500px"> <div class="offset-n1 col-4 border p-4"> n1 distance left offset </div> <div class="offset-n2 col-4 border p-4"> n2 distance left offset </div> <div class="offset-n3 col-4 border p-4"> n3 distance left offset </div> <div class="offset-n4 col-4 border p-4"> n4 distance left offset </div> </div> </body> </html>
Producción:
Primer CSS Columnas compensadas negativas
Ejemplo 2: El siguiente ejemplo demuestra el uso de las columnas de desplazamiento negativo de Primer CSS con las clases offset-n5, offset-n6 y offset-n7 .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Negative Offset Columns</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h3 class="text-center"> Primer CSS Negative Offset Columns </h3> <div class="mx-auto border mt-5" style="width: 500px"> <div class="offset-n5 col-4 border p-4"> n5 distance left offset </div> <div class="offset-n6 col-4 border p-4"> n6 distance left offset </div> <div class="offset-n7 col-4 border p-4"> n7 distance left offset </div> </div> </body> </html>
Producción:
Primer CSS Columnas compensadas negativas
Referencia: https://primer-css.vercel.app/css/utilities/marketing-layout#negative-offset-columns
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA