Imagen redonda de CSS

El uso de imágenes es muy importante en el código HTML, especialmente cuando ha estado trabajando en un proyecto de sitio web que contiene muchas imágenes que se deslizan en su página de inicio o en cualquier otra página. Para el uso de imágenes en el lenguaje de secuencias de comandos HTML, tendemos a usar la etiqueta "IMG" en ella. Estas imágenes se pueden configurar en sus tamaños originales, o el tamaño también se puede alterar en términos de altura y ancho. Junto con eso, el lenguaje HTML le proporciona la propiedad "Border-Radius" para cambiar el radio de cualquier elemento como el encabezado o la imagen. En el caso de las imágenes, cambiará la forma de la esquina de una imagen de una a otra. Dentro de este artículo, deliberaremos el uso de la propiedad Border-Radius para convertir una imagen en una redondeada. Estaremos mirando la imagen que se utilizará en los códigos HTML para darle forma al código Visual Studio. Puedes ver la imagen llamada "Nuevo.PNG ”adjunto en la captura de pantalla a continuación. Lo usaremos en nuestro código de Visual Studio para hacerlo redondo.

Ejemplo 01:

Antes de dar forma a una imagen para redondear, debemos ver cómo se puede insertar una imagen en la página web HTML sin cambiar su forma original. Entonces, estaremos usando el "nuevo.Imagen de PNG "en este código HTML. Hemos creado un nuevo archivo HTML en nuestro directorio actual de Windows y lo llamamos "CSS". Después de esto, lo abrimos dentro del código de Visual Studio y agregamos el script HTML que se muestra a continuación. Este script se ha iniciado con la etiqueta HTML "DOCTYPE" estándar seguida de la etiqueta individual "HTML". La etiqueta HTML muestra que esta será una página web basada en HTML y la etiqueta HTML se cerrará después de todas las etiquetas al final.

Después de la etiqueta HTML, tenemos las dos etiquetas más básicas y más utilizadas de archivos HTML: etiquetas de cabeza y cuerpo. La etiqueta de la cabeza contiene la información sobre el título del encabezado y el estilo. Mientras que la etiqueta del cuerpo contendrá todos los datos, contenedores y otros elementos utilizando las otras etiquetas. En este momento, hemos dejado la etiqueta de la cabeza vacía y agregamos la etiqueta de encabezado del tamaño "2" y la etiqueta de la imagen "img" dentro de la etiqueta "cuerpo". La etiqueta de encabezado se usa para poner un encabezado al comienzo de una página web HTML, mientras que la etiqueta de imagen se ha utilizado para insertar el nuevo.Imagen PNG en la página web utilizando la variable "SRC".

Además, hemos estado utilizando la etiqueta "estilo" dentro de la etiqueta "IMG" para establecer el ancho "200 píxeles" de una imagen utilizando la propiedad "ancho" de una imagen. El cuerpo y las etiquetas HTML estaban cerradas aquí.

Guardemos nuestro código dentro del archivo usando Ctrl+S y depurarlo usando el botón "Ejecutar" en la barra de tareas de Visual Studio Code. Le pedirá la plataforma del navegador en la que desea que se ejecute. Hemos seleccionado a Chrome para ejecutarlo. La salida se ha mostrado a continuación. La página web de HTML muestra el encabezado negro del tamaño 2. La imagen se ha mostrado con su forma original con un tamaño diferente. El ancho equivale a 200 píxeles establecidos en la propiedad de estilo.

Veamos la configuración de nuestra imagen "redonda" dentro del mismo código HTML. Para esto, necesitamos abrir el mismo archivo HTML en el código de Visual Studio y actualizarlo. Como saben, hacer cambios en cualquier forma de imagen se encuentra en la sección de estilo. Por lo tanto, necesitamos usar el estilo CSS en este mismo código HTML con la ayuda de una etiqueta de "estilo" en el encabezado o la etiqueta de "cabeza". El resto del código se dejará intacto y no se actualizará.

Ahora, dentro de la etiqueta de "estilo" de este encabezado de código, tenemos que mencionar el nombre de un elemento para actualizarse (i.mi., la etiqueta "img".) Agregue soportes rizados y comience a agregar propiedades para cambiar el elemento de acuerdo con su necesidad. Por lo tanto, hemos estado utilizando la propiedad "fronterizo-radio" dentro de los soportes rizados de una etiqueta "IMG" para el estilo y especificando su valor como 50 por ciento. También puede agregar píxeles sobre un porcentaje cuando se trata de elegir una unidad para cualquier valor numérico en el estilo CSS. Esto se trata del cambio. Guardemos este código primero. Después de guardar este código con CTRL+S, simplemente necesitamos ejecutarlo usando el botón "Ejecutar" desde la barra de tareas del código de Visual Studio. Nuevamente, debe seleccionar el navegador en el que desea que muestre sus datos de salida.

Ejecutar este código nos llevaría a la salida como se muestra a continuación. El uso de los valores de la propiedad de radio fronterizo hasta el 5 por ciento hace que la imagen sea "nueva.PNG "cuadrado a redondeo. Los bordes se redondearían como se muestra en la imagen a continuación. Se trata de usar la propiedad Border-Radius para convertir una imagen de forma cuadrada simple en una forma redondeada o cualquier otra forma.

Ejemplo 02:

La misma propiedad se puede usar de otras maneras para alterar la forma de una imagen. Dentro de este ejemplo, veremos cómo los valores aleatorios pueden alterar la forma de una imagen simple. Entonces, dentro de la etiqueta del cuerpo de este script HTML, hemos estado utilizando la etiqueta "IMG" 4 veces. En todas estas 4 etiquetas, hemos estado usando el mismo "nuevo.imagen de PNG "repetidamente con el ancho de 200 píxeles para cada forma.

Además, para alterar por separado la forma de las imágenes en una etiqueta de estilo, necesitamos especificarlas con diferentes clases: A, B, C y D como se muestra en cada etiqueta "IMG". Dentro de la etiqueta de estilo, hemos estado usando las etiquetas "IMG" junto con sus clases especificadas (A, B, C y D) para alterar las esquinas de cada forma por separado. Los valores se han utilizado los valores 50%, 0%, 20%y 250%15%para las imágenes de 1 °, 2º, 3º y 4º respectivamente. Ejecutemos este código para ver los resultados.

Las 4 formas diferentes de una imagen se han generado como se muestra a continuación.

Las mismas formas o similares se pueden lograr con la propiedad simple de radio frimidia utilizando los 4 valores laterales a la vez: superior izquierda, superior derecha, inferior izquierda e inferior derecha como se muestra a continuación. Hemos probado esta propiedad simple de radio fronterizo para 4 esquinas junto con la propiedad de ancho y altura de las imágenes establecidas en 150 píxeles para todos. Guardemos y ejecutemos este código.

Usando el formato simple para la propiedad fronteriza-radius, tenemos las formas de 4 de-below para una sola "nueva.imagen de png ".

Conclusión:

El uso y la importancia de la etiqueta "IMG" se han discutido junto con el uso de la propiedad de Border-Radius. Hemos discutido cómo una propiedad Border-Radius puede alterar los bordes de cualquier imagen o dirigirse a diferentes formas con los valores simples de arriba, inferior, izquierda y derecha. Para esto, hemos discutido ejemplos muy simples y básicos de script HTML usando una sola imagen dentro de la etiqueta "IMG" y el estilo. Hemos logrado nuestro objetivo al convertir una imagen en una forma cuadrada, redonda, ovalada y redondeada utilizando esta propiedad de radio fronterizo.