Opacidad fronteriza de CSS
Opacidad fronteriza
Los bordes se utilizan para encerrar muchas cosas como texto, imágenes o cualquier otra forma de datos, ya que sabemos que cada aspecto o elemento en el lenguaje de marcado de Hyper Text se puede diseñar utilizando CSS. Entonces, usaremos CSS para diseñar un borde haciéndolo opaco y semitransparente. CSS se puede hacer de diferentes maneras, como la etiqueta de estilo, CSS o CSS en línea, que pueden tener algunos tipos diferentes de efectos en el borde. El script básico para hacer un borde opaco y controlar su transparencia hasta cierto punto en CSS se escribe a continuación:
"Border: 1px Solid RGBA (0, 0, 0);"En el script anterior, podemos ver que la entidad se llama por su nombre, su tamaño se define en píxeles y el color se define en el formato "RGBA", que mirará por encima de la codificación de color y la transparencia del borde.
Ahora implementaremos este concepto escribiendo el script en Notepad ++ y ejecutándolo en un navegador.
Ejemplo 01: Uso de CSS en una etiqueta de cabeza en un archivo HTML
En este ejemplo, haremos un archivo html con un "div" con bordes, y el "div" incluirá información sobre la etiqueta de estilo entre la etiqueta de cabeza del archivo html.
En el script anterior, podemos ver que la etiqueta de cabeza del archivo HTML tiene dos etiquetas en él. En la primera etiqueta, se escribe el título del archivo, y la segunda etiqueta, que es la etiqueta de estilo, tiene las propiedades visuales de cómo se verá un "div" cuando el archivo se ejecuta en un navegador. En esta parte del código, la propiedad de relleno se define en píxeles, luego las propiedades para el borde del DIV se definen dándole tamaño y el formato de color en el método RGBA estándar en el que el último parámetro es para la opacidad, y nosotros le han dado un cierto valor. Entonces cerraremos la etiqueta de estilo junto con la etiqueta de la cabeza. Después de esto, abriremos la etiqueta del cuerpo y le daremos un encabezado al cuerpo y luego un DIV que le hace algo de estilo a través del encabezado CSS, que será aplicable en cada DIV en el archivo HTML.
Después de esto, guardaremos este archivo en el ".formato HTML "y abra este archivo en nuestro navegador para visualizar el archivo.
En el fragmento anterior, podemos ver que el encabezado que se proporcionó en la etiqueta del cuerpo está presente junto con un contenedor Div en el que se escribe algún texto. Este contenedor Div también tiene un borde semitransparente rojo, lo que significa que el borde tiene cierta opacidad definida en la etiqueta de estilo del encabezado del archivo HTML.
Ejemplo 02: Uso de CSS para hacer que el opaco superior del borde en un archivo HTML
En este ejemplo, crearemos un archivo HTML con un "Div" que tiene bordes, y el "Div" tendrá algunos detalles sobre la etiqueta de estilo entre la etiqueta de cabeza del archivo HTML, pero en este caso, agregaremos otra etiqueta que solo opacará la parte superior de la frontera.
El script anterior muestra que la etiqueta de cabeza del archivo html tiene dos etiquetas. El título del archivo está escrito en la primera etiqueta, y la etiqueta de estilo tiene los atributos visuales de cómo se vería un "div" cuando el archivo se realiza en un navegador. El valor de relleno se suministra en píxeles en esta parte del código, y las propiedades para el borde del DIV se establecen al proporcionarle un formato de tamaño y color en el método RGBA estándar, y el último parámetro es opacidad, que hemos establecido " 0."
Después de eso, abrimos una etiqueta de la parte fronteriza en el formato RGBA, y esta vez estableceremos la opción opaca en un valor que hará que el mejor semitransparente. La etiqueta de estilo y la etiqueta de la cabeza se cerrará a partir de entonces. Después de eso, abriremos la etiqueta del cuerpo y le daremos un encabezado, seguido de un DIV con algún estilo aplicado a través del encabezado CSS, que se aplicará a cada DIV en el archivo HTML.
Después de eso, guardaremos el guión en ".formato html "y ábralo en nuestro navegador para verlo.
Podemos ver en el fragmento anterior que el encabezado de la etiqueta del cuerpo está allí, así como un recipiente Div con algún contenido. El borde también tiene una parte superior semitransparente roja, lo que indica que la parte superior del borde tiene cierta opacidad, que fue determinada por la etiqueta de estilo del encabezado del archivo HTML.
Ejemplo 03: Uso de CSS para hacer que la parte inferior del borde sea opaca y diferenciando su color desde los lados y la parte superior en un archivo HTML
En este ejemplo, construiremos un archivo HTML con un "div" que tenga fronteras, y el "div" tendrá información sobre la etiqueta de estilo entre la etiqueta de cabeza del archivo html, pero en este caso, agregaremos dos más Etiquetas que simplemente opacan la sección inferior del borde.
El siguiente script demuestra que el elemento head del archivo html tiene dos etiquetas. La primera etiqueta contiene el título del archivo, y la etiqueta de estilo contiene los elementos visuales de cómo aparecería un "div" cuando el archivo se ejecuta en un navegador. El valor de relleno se suministra en píxeles en esta parte del código, y las propiedades para el borde del DIV se establecen al proporcionarle un formato de tamaño y color en el método RGBA estándar, y el último parámetro es opacidad, que hemos establecido " 0."
Después de eso, abrimos una etiqueta de fondo fronterizo RGBA y alteramos los parámetros de color a un nuevo color. Luego abrimos la etiqueta del fondo del borde nuevamente y cambiamos el parámetro de opacidad a "0.2 ”para hacer la sección inferior del borde semitransparente. Después de eso, el estilo y las etiquetas de la cabeza se cerrarán. Después de eso, abriremos el elemento del cuerpo y le agregaremos un encabezado, seguido de un DIV con algún estilo aplicado a través del encabezado CSS, que se aplicará a todos los DIV en el archivo HTML.
El script se guardará en ".formato html "y abierto en nuestro navegador para ser visto.
El fragmento anterior muestra el encabezado de la etiqueta del cuerpo, así como un contenedor Div con algún texto. El borde también tiene un fondo semitransparente gris, lo que sugiere que la sección inferior del borde tiene algo de opacidad y color distintivo, como se especifica en la etiqueta de estilo de encabezado del archivo HTML.
Conclusión
En este artículo, discutimos varios métodos para agregar opacidad a un borde en CSS. Como discutimos, CSS nos permite diseñar y editar cada elemento de una página HTML, que incluye un contenedor DIV con un borde. Implementamos este fenómeno en una página HTML e hicimos varios cambios en el estilo haciendo cambios en la etiqueta de estilo CSS en el entorno Notepad ++.