Immagine rotonda CSS

L'uso delle immagini è molto importante nel codice HTML, specialmente quando si è lavorato a un progetto di siti Web contenente molte immagini che scivolano nella sua home page o in qualsiasi altra pagine. Per l'uso di immagini nel linguaggio degli script HTML, tendiamo a usare il tag "IMG" in esso. Queste immagini possono essere impostate sulle loro dimensioni originali o le dimensioni possono anche essere modificate in termini di altezza e larghezza. Insieme a ciò, il linguaggio HTML ti fornisce la proprietà "raggio di frontiera" per cambiare il raggio di qualsiasi elemento come l'intestazione o l'immagine. Nel caso delle immagini, cambierà la forma d'angolo di un'immagine dall'una all'altra. All'interno di questo articolo, deliberamo l'uso della proprietà del raggio di confine per convertire un'immagine in una arrotondata. Guarderemo l'immagine che verrà utilizzata nei codici HTML per modellarla attorno al codice Visual Studio. Puoi vedere l'immagine chiamata "Nuovo.png "collegato nello screenshot seguente. Lo useremo nel nostro codice Visual Studio per farlo girare.

Esempio 01:

Prima di modellare un'immagine su Round, dobbiamo vedere come un'immagine può essere inserita nella pagina web HTML senza modificarne la forma originale. Quindi, useremo il "nuovo.Immagine png "in questo pezzo di codice HTML. Abbiamo creato un nuovo file HTML nella nostra attuale directory di Windows e lo ha chiamato "CSS". Dopo questo, l'abbiamo aperto all'interno del codice Visual Studio e aggiunto lo script HTML mostrato di seguito. Questo script è stato avviato con il tag HTML "Doctype" standard seguito dal singolo tag "HTML". Il tag HTML mostra che questa sarà una pagina Web basata su HTML e il tag HTML sarà chiuso dopo tutti i tag alla fine.

Dopo il tag HTML, abbiamo i due tag più elementari e più utilizzati di file HTML: tag della testa e del corpo. Il tag principale contiene le informazioni relative al titolo di intestazione e allo stile. Mentre il tag del corpo conterrà tutti i dati, i contenitori e altri elementi utilizzando gli altri tag. In questo momento, abbiamo lasciato il tag di testa vuoto e abbiamo aggiunto il tag di intestazione della dimensione "2" e il tag "IMG" dell'immagine all'interno del tag "corpo". Il tag di intestazione viene utilizzato per mettere semplicemente un'intestazione all'inizio di una pagina web HTML mentre il tag immagine è stato utilizzato per inserire il nuovo.Immagine PNG nella pagina Web utilizzando la variabile "SRC".

Inoltre, abbiamo usato il tag "stile" all'interno del tag "IMG" per impostare la larghezza "200 pixel" di un'immagine usando la proprietà "larghezza" di un'immagine. I tag corpo e HTML sono stati chiusi qui.

Salviamo semplicemente il nostro codice all'interno del file utilizzando Ctrl+S e debug utilizzando il pulsante "Esegui" sulla barra delle applicazioni del codice Visual Studio. Ti chiederà la piattaforma del browser in cui vuoi che venga eseguito. Abbiamo selezionato Chrome per eseguirlo. L'output è stato mostrato di seguito. La pagina web HTML mostra l'intestazione nera della taglia 2. L'immagine è stata visualizzata con la sua forma originale con una dimensione diversa. La larghezza è uguale a 200 pixel impostati nella proprietà di stile.

Diamo un'occhiata a modellare la nostra immagine "round" all'interno dello stesso codice HTML. Per questo, dobbiamo aprire lo stesso file HTML nel codice Visual Studio e aggiornarlo. Come sapete, apportare modifiche a qualsiasi forma dell'immagine si trova nella sezione di stile. Quindi, dobbiamo usare lo stile CSS in questo stesso codice HTML con l'aiuto di un tag "stile" nell'intestazione o nel tag "testa". Il resto del codice rimarrà intatto e non verrà aggiornato.

Ora, all'interno del tag "stile" di questa intestazione del codice, dobbiamo menzionare il nome di un elemento da aggiornare (i.e., il tag "IMG".) Aggiungi parentesi ricci e inizia ad aggiungere proprietà per modificare l'elemento in base alla tua necessità. Quindi, abbiamo usato la proprietà "ra-radius" all'interno delle staffe ricci di un tag "IMG" per lo styling e specificando il suo valore come 50 percento. Puoi anche aggiungere pixel per una percentuale quando si tratta di scegliere un'unità per qualsiasi valore numerico nello stile CSS. Si tratta del cambiamento. Salviamo prima questo codice. Dopo aver salvato questo codice con Ctrl+S, dobbiamo semplicemente eseguirlo utilizzando il pulsante "Esegui" dalla barra delle applicazioni del codice Visual Studio. Ancora una volta, è necessario selezionare il browser in cui si desidera visualizzare i dati di output.

L'esecuzione di questo codice ci porterebbe all'output come visualizzato di seguito. L'uso dei valori della proprietà del raggio di frontiera fino al 5 percento rende l'immagine "nuova.png "da quadrato a round. I bordi sarebbero arrotondati come mostrato nell'immagine sottostante. Si tratta di usare la proprietà del raggio del bordo per convertire una semplice immagine di forma quadrata in una forma arrotondata o qualsiasi altra forma.

Esempio 02:

La stessa proprietà può essere utilizzata in altri modi per alterare la forma di un'immagine. All'interno di questo esempio, vedremo come i valori casuali possono alterare la forma di un'immagine semplice. Quindi, all'interno del tag del corpo di questo script HTML, abbiamo utilizzato il tag "IMG" 4 volte. In tutti questi 4 tag, abbiamo usato lo stesso "nuovo.Immagine png "ripetutamente con la larghezza di 200 pixel per ogni forma.

Inoltre, per modificare separatamente la forma delle immagini in un tag di stile, dobbiamo specificarle con classi diverse: A, B, C e D come mostrato in ogni tag "IMG". All'interno del tag di stile, abbiamo usato i tag "IMG" insieme alle loro classi specificate (A, B, C e D) per alterare gli angoli di ciascuna forma separatamente. I valori 50%, 0%, 20%e 250%15%sono stati utilizzati rispettivamente per le immagini 1a, 2a, 3 ° e 4a. Eseguiamo questo codice per vedere i risultati.

Le 4 diverse forme di un'immagine sono state generate come mostrato di seguito.

Le forme stesse o simili possono essere raggiunte con la semplice proprietà del raggio di bordo che utilizza i 4 valori laterali alla volta: in alto a sinistra, in alto a destra, in basso a sinistra e in basso a destra, come mostrato di seguito. Abbiamo provato questa semplice proprietà del raggio di confine per 4 angoli insieme alla larghezza e alla proprietà di altezza delle immagini impostate su 150 pixel per tutti. Salviamo ed eseguiamo questo codice.

Usando un formato semplice per la proprietà del raggio di frontiera, abbiamo ottenuto le forme a cingola 4 per un singolo "nuovo.Immagine PNG ".

Conclusione:

L'uso e l'importanza del tag "IMG" sono stati discussi insieme all'uso della proprietà del raggio di frontiera. Abbiamo discusso di come una proprietà del raggio di frontiera può alterare i bordi di qualsiasi immagine o dirigersi su diverse forme con i valori superiori, in basso, in basso, a sinistra e a destra. Per questo, abbiamo discusso esempi molto semplici e fondamentali di script HTML usando una singola immagine all'interno del tag "IMG" e lo styling. Abbiamo raggiunto il nostro obiettivo convertendo un'immagine in una forma quadrata, rotonda, ovale e quadrata arrotondata usando questa proprietà.