Immagini di styling in CSS

Quando si tratta di migliorare la bellezza del web design, spesso pensiamo di aggiungere immagini al nostro sito Web. Tuttavia, solo l'aggiunta di immagini non è sufficiente, quindi, è necessario modellarle in vari modi per renderle più attraenti. CSS fornisce molte proprietà che è possibile utilizzare per aggiungere lo styling alle immagini.

Questo post illumina su come modellare le immagini in CSS. In questa guida, attraverserai quanto segue:

1. Come realizzare immagini cerchiate
2. Come realizzare immagini angolari arrotondate
3. Come fare immagini reattive
4. Come centrare le immagini
5. Come fare immagini trasparenti
6. Come posizionare il testo sulle immagini
7. Come aggiungere filtro alle immagini
8. Come fare un overlay hover sulle immagini
9. Come capovolgere le immagini

Iniziamo.

Come realizzare immagini cerchiate

Allo scopo di far apparire le tue immagini come cerchi, usa la proprietà CSS Border-Radius. Di seguito ti abbiamo presentato un esempio di immagine cerchiata.

Html

Qui abbiamo semplicemente aggiunto un'immagine nell'attributo SRC del tag.

CSS

img
raggio di frontiera: 50%;
larghezza: 200px;
Altezza: 200px;

Impostare il raggio di confine al 50% stiamo rendendo l'immagine un cerchio. Puoi modificare il valore se desideri renderlo ovale o meno arrotondato.

Produzione

L'immagine è stata cerchiata con successo.

Come realizzare immagini angolari arrotondate

La proprietà CSS Border-Radius può anche essere utilizzata per realizzare l'angolo delle immagini, ecco come lo fai.

CSS

img
raggio di confine: 10px;
larghezza: 200px;
Altezza: 200px;

Qui stiamo dando il valore del raggio di frontiera nei pixel per far arrotondare gli angoli.

Produzione

Gli angoli dell'immagine sono stati arrotondati.

Come fare immagini reattive

Le immagini che sono reattive regolano le loro dimensioni in base alla finestra del browser. L'esempio sotto menzionato dimostra come farlo.

Html

Nel codice sopra, abbiamo semplicemente aggiunto un'immagine.

CSS

img
Licromra massima: 100%;
Altezza: auto;

Per rendere l'immagine reattiva, impostare la larghezza massima al 100% e altezza su Auto.

Produzione

L'immagine sta cambiando la sua larghezza in base alle dimensioni della finestra del browser.

Come centrare le immagini

Per posizionare un'immagine al centro, visualizzarla come un elemento a livello di blocco e impostare i suoi margini su Auto. Considera l'esempio di seguito.

CSS

img
blocco di visualizzazione;
Margin-Left: Auto;
margine-destra: auto;
larghezza: 300px;

Per centrare un'immagine stiamo semplicemente visualizzando come un elemento a livello di blocco e impostando i margini destra e sinistra su Auto.

Produzione

L'immagine è stata allineata al centro.

Come fare immagini trasparenti

Se desideri rendere le tue immagini trasparenti, usa la proprietà CSS Opacity. Più è il valore del valore dell'opacità, maggiore è la trasparenza dell'immagine.

CSS

img
opacità: 0.3;
larghezza: 300px;

Nel codice sopra, l'opacità dell'immagine è stata impostata su 0.3.

Produzione

L'immagine è stata resa trasparente con successo.

Come posizionare il testo sulle immagini

Utilizzare la proprietà CSS Position per posizionare il testo su determinate posizioni sulle immagini. Le varie posizioni che puoi posizionare il testo sull'immagine sono le seguenti.

1. A sinistra in alto
2. In basso a sinistra
3. Centro
4. In alto a destra
5. In basso a destra

Qui abbiamo dimostrato con l'aiuto di un esempio.

Html

Questa è Eiffel Tower

Nel codice sopra, abbiamo creato un contenitore div e posizionato l'immagine e un altro contenitore di div al suo interno.

CSS

.div
Posizione: relativo;

.a sinistra in alto
Posizione: assoluto;
Top: 5px;
A sinistra: 5px;
Font-size: 20px;
Font in stile: corsivo;

img
larghezza: 400px;
opacità: 0.5;

Il primo div è stato assegnato una posizione relativa in modo che il secondo div che contiene il testo possa essere posizionato al suo interno. Usando la classe Topleft stiamo assegnando al secondo div una posizione assoluta e dandogli un po 'di lunghezza dall'alto e sinistra, inoltre, dando determinate dimensioni e stile del carattere al testo.

Produzione

Il testo è stato aggiunto sull'immagine nella posizione in alto a sinistra.

Come aggiungere filtri alle immagini

Ai fini dell'aggiunta di filtro a immagini come sfocatura o saturazione, utilizzare la proprietà del filtro. Consultare l'esempio di seguito:

CSS

img
larghezza: 300px;

.invertito
Filtro: invertito (100%);

Qui stiamo usando il metodo invert () sulla proprietà del filtro per aggiungere effetti visivi all'immagine.

Produzione

Gli effetti visivi sono stati aggiunti con successo all'immagine.

Alcuni altri metodi che è possibile utilizzare sulla proprietà del filtro per aggiungere vari effetti visivi sono:

• sfocatura(),
• contrasto(),
• luminosità(),
• gaycale (),
• saturare(),
• opacità (), ecc.

Come capovolgere le immagini

Fare un'immagine quando l'utente porta il mouse su di esso può essere una cosa interessante da fare. Per fare ciò, utilizzare la proprietà CSS Transform.

CSS

img: hover
trasformazione: scaley (-1);
larghezza: 300px;

Qui stiamo lanciando l'immagine lungo l'asse y usando il metodo Scaley () di trasformazione della proprietà.

Produzione

L'immagine è stata lanciata attraverso l'asse y.

Conclusione

Le immagini di styling che appaiono sul tuo sito Web sono altamente importanti e questo può essere fatto utilizzando varie proprietà CSS. Più cose che puoi fare per modellare le tue immagini sono che le rendono un cerchio, rendono arrotondati i loro angoli o rendili una miniatura. Inoltre, puoi rendere reattive le tue immagini o aggiungere testo o alcuni effetti visivi su di esse. In questo post, abbiamo mostrato molti modi in cui puoi modellare le tue immagini usando CSS, insieme a esempi pertinenti.