Compensación de CSS
Ejemplo 01: línea de compensación por fuera
Para usar la propiedad de compensación de esquema para dar espacio transparente entre el borde del elemento y su esquema, debemos tener que crear una sección "DIV" en la página web. Comenzamos este código con la etiqueta HTML y lo terminamos con la etiqueta de cierre HTML. Dentro de la etiqueta del cuerpo, hemos estado utilizando la etiqueta "Div" para crear una sección en la página web HTML. Esta etiqueta "Div" solo contiene un simple encabezado o oración de tres palabras y ha sido cerrado con el descanso de la línea agregado por la etiqueta de línea de descanso "
".
Dentro de la etiqueta "Cabeza" de este código HTML, hemos estado titulando esta página web para "compensar" y usar la etiqueta "estilo" para diseñar la sección "div" de nuestra página HTML. Hemos agregado márgenes de 10 píxeles para la sección "Div" junto con un borde carmeso sólido de 5 píxeles. El color de fondo para esta sección "Div" sería "Aqua" y el contorno sería de color violeta discontinuo de 4 píxeles. También hemos estado utilizando la propiedad "Outline-Offset" para dar una brecha de 15 píxeles entre el borde de la sección "Div" y su esquema. Guardemos este código y lo ejecutemos con el menú "Ejecutar" del código Visual Studio.
Después de la ejecución exitosa de este código en el navegador Chrome, tenemos la siguiente salida de la página HTML. Aquí hay una clara brecha entre el borde carmesí de 5 píxeles de la etiqueta Div y su contorno de color violeta discontinuo de 4 píxeles. Puedes ver que el espacio no tiene color.
Ejemplo 02: Posición de compensación
Aquí está utilizando la propiedad de posición de compensación de CSS para especificar la posición de inicio de cualquier elemento de la página web HTML. Comencemos con el uso de etiquetas de apertura y cierre de HTML. Dentro de esta etiqueta, hemos estado haciendo uso de etiquetas de cuerpo y cabeza. La etiqueta del cuerpo contiene 2 encabezados simples de tamaño 2 con diferentes títulos primero. Después de eso, se han utilizado dos etiquetas "div". La etiqueta externa "Div" se ha especificado con la ID "A", mientras que su etiqueta "Div" interna se ha especificado con la ID "B" para la diferenciación en el estilo.
El "div" y las etiquetas del cuerpo están cerradas aquí. Dentro de la etiqueta "Cabeza", hemos estado utilizando la etiqueta de título para titular esta página web HTML y la etiqueta de estilo para agregar algo de estilo al cuerpo de nuestra página web. Hemos estado usando el "#A" para diseñar la etiqueta externa "Div" usando su ID "A". La posición de compensación para esta sección "div" se ha especificado con el valor "relativo". Su ancho y altura se especificarían como 200px con el borde de color carmesí sólido de 5px alrededor de este "div". La posición de la etiqueta interna "div" se ha establecido en absoluto que está relacionada con el elemento adyacente. El ancho y la altura para la sección "div" interna se establecen en 75 píxeles con el borde carmesí de 5px sólido.
El espacio o el relleno superior superior e izquierdo se ha definido en relación con la sección exterior para este "div": arriba: 180px, y izquierda: 7px. Nuestro código ahora está listo para ser ejecutado en el navegador.
El uso del valor "relativo" para la propiedad de posición de desplazamiento coloca la sección "div" externa en relación con los otros elementos de nuestra página HTML. Mientras que el uso del valor de posición "absoluto" junto con la configuración del relleno superior e izquierdo ha estado colocando el "div" interno interno en el medio de la sección "div" externa.
Ejemplo 03: Path de desplazamiento y ampliado
Intentemos usar la propiedad Offset-anChor y Offset Rath para crear animación dentro de la página web HTML. Se ha dado el mismo título a esta página web. Dentro de la etiqueta del cuerpo, hemos estado utilizando etiquetas de tres secciones para crear diferentes secciones en la página web seguidas de las etiquetas "div" para diferenciarlas. Las tres etiquetas "div" contienen un solo texto dentro y se han especificado con tres clases diferentes: A, B y C. La parte principal de este código HTML es su etiqueta de estilo que contiene muchas propiedades CSS para animar tres etiquetas. Las tres etiquetas "div" contienen la propiedad de ruta de desplazamiento para moverse a lo largo de la ruta definida para que no sea tan lineal de movimiento. El ancho y la altura de los tres elementos DIV serían de 100 y 30 píxeles respectivamente. La animación se ha configurado para mover elementos Div junto con la velocidad de 3000 milisegundos sin detenerse. Por lo tanto, se usa el atributo infinito. Aquí viene el elemento de sección para el estilo. Su imagen de fondo sería un gradiente lineal y sería un 49 por ciento transparente desde la parte superior, 50 por ciento de negro desde la izquierda, derecha y media y 62 por ciento transparente desde la parte inferior. Además, cada sección contendría un borde sólido de 2 píxeles y márgenes de 10 píxeles desde la parte inferior.
La propiedad Offset-Blankor se ha utilizado para especificar un punto en el elemento "Div" para viajar a lo largo del camino que se ha establecido mediante el uso de la propiedad de "Path de compensación" en el estilo principal "Div". Esto significa que el punto de un elemento "div" se movería en la ruta no lineal particular en nuestra pantalla de la página web. Se han establecido los diferentes colores de fondo para estos elementos "div", color de texto y alineación de texto para estos elementos. Guardemos y ejecutemos este código para ver los cambios.
Los tres elementos Div se moverán a lo largo de la ruta no lineal no consecutiva en tres secciones diferentes como se muestra a continuación. Estos tres elementos están etiquetados como uno, dos y tres; moviéndose de izquierda a derecha de la pantalla.
Hemos actualizado el código y hemos utilizado los diferentes valores para la propiedad de ruta de desplazamiento dentro del estilo de este código HTML. Este camino haría que nuestros elementos Div se movieran en un movimiento en zig-zag. Además, hemos actualizado la altura y el ancho de estas secciones DIV a 40 píxeles. La distancia de movimiento también se agrega mientras el resto no cambia.
La salida de este código actualizado nos muestra tres pequeños elementos DIV con movimiento en zig-zag a lo largo de cada una de sus secciones.
Conclusión
Este artículo trata sobre el uso de diferentes propiedades de compensación para peinar y animar los diferentes elementos de una página web HTML. Hemos proporcionado un ejemplo utilizando la propiedad de línea por fuera de compensación para agregar espacio entre el borde y el contorno de un elemento específico. Otro ejemplo se utiliza para demostrar el uso de la propiedad de posición de desplazamiento para colocar el elemento específico en relación con otros elementos en el cuerpo. También hemos intentado animar y mover los elementos HTML en la pantalla del navegador en una ruta específica utilizando las propiedades Offset-Blanch y Offset-Path.