Come creare un bordo sfumato in CSS: con la proprietà border di CSS, i web designer possono scegliere l’aspetto dei bordi di un elemento, quanto sono larghi e di che colore sono. Un gradiente è un modo per effettuare un cambiamento graduale tra due o più colori in CSS.
Puoi utilizzare i gradienti per dare alle cose sulla tua pagina web effetti visivi come ombreggiatura, fusione dei colori e texture.
Come creare un bordo sfumato in CSS
Trucco di posizionamento
Per questo metodo, dobbiamo dare allo pseudo-elemento un’immagine di sfondo che sia un gradiente. Dobbiamo anche impostare la sua posizione su”assoluto”e dargli un margine negativo, che sarà la larghezza del bordo. Mettilo sotto l’elemento principale dandogli un indice z negativo. E infine, fai in modo che il raggio del bordo provenga dall’elemento principale.
Dobbiamo impostare il raggio del bordo corretto per il primo elemento. Imposta il colore di sfondo in modo che corrisponda al colore del corpo. Poiché lo pseudo-elemento ha un margine negativo, possiamo scegliere di dargli un margine per farlo entrare nel contenitore.
Trucco per mascherare
Per questo metodo, dobbiamo dare il pseudo-elemento un’immagine di sfondo sfumata. Dobbiamo anche impostare la sua posizione su assoluto e impostare un margine negativo, che sarà la larghezza del bordo. Imposta il suo z-index su un numero negativo per spostarlo sotto l’elemento principale. E infine, lascia che ottenga il raggio del bordo dall’elemento principale.
Dobbiamo impostare il raggio del bordo richiesto per il primo elemento. Imposta il colore di sfondo in modo che corrisponda al colore del corpo. Poiché lo pseudo-elemento ha un margine negativo, possiamo dargli un margine per farlo entrare nel contenitore.
Clip di sfondo
Per evitare stili aggiuntivi per lo pseudo-elemento puoi usare la proprietà background-image in combinazione con la proprietà background-clip. Essenzialmente taglieremo lo sfondo nello stesso modo in cui abbiamo fatto con la proprietà mask.
Per prima cosa, dovremo passare due valori di gradiente per l’immagine di sfondo. Uno rappresenterà lo sfondo dell’elemento con il colore corrispondente e il secondo rappresenterà il bordo con sfumatura. Per ciascuno dei gradienti, specificheremo la proprietà background-clip
Perché utilizzare un bordo sfumato?
Un gradiente bordo è flessibile: Puoi creare effetti a strati utilizzando bordi sfumati. Questo è diverso dai bordi in tinta unita, che sono rigidi. I bordi sfumati sono quindi utili quando si ha a che fare con layout complessi o forme che richiedono design visivi sfumati. Crea appeal visivo: utilizzando l’effetto bordo sfumato, puoi aggiungere effetti visivi accattivanti ai tuoi progetti. Ad esempio, puoi utilizzare contrasti di colore audaci per attirare l’attenzione su un elemento specifico della tua pagina web. Fornisci un’integrazione perfetta: i bordi sfumati ti consentono di integrare perfettamente il bordo nello sfondo del tuo elemento. Un tale approccio conferisce alla tua pagina web un aspetto solido e coeso, mostrando un design ben congegnato.
FAQ
Come si crea un bordo sfumato in CSS?
Per mostrare i gradienti per un bordo con i CSS puoi usare la proprietà border-image. Consente di impostare i valori del gradiente allo stesso modo della proprietà background-image. Oltre alla proprietà border-image, dovresti specificare proprietà aggiuntive per mostrare effettivamente il gradiente del bordo.
Come creo un gradiente personalizzato in CSS?
Un gradiente lineare CSS può essere codificato da usando la funzione linear-gradient() e può essere semplice o complesso come vorresti. Per lo meno, avrai bisogno solo di due colori per iniziare. Da lì, puoi aggiungere più colori, angoli, direzioni e altro per personalizzare ulteriormente il tuo gradiente.
Qual è il codice per il gradiente in CSS?
linear-gradient() La funzione CSS linear-gradient() crea un’immagine costituita da una transizione progressiva tra due o più colori lungo una linea retta. Il suo risultato è un oggetto del tipo di dati, che è un tipo speciale di.