TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare carte oblique Bootstrap personalizzate?

0

Nei nostri tutorial Bootstrap, abbiamo spiegato in dettaglio il componente delle carte. Poiché il componente della carta è uno dei componenti più interessanti, puoi vedere molte varianti su Internet. Abbiamo anche spiegato il widget della carta a fogli mobili e il widget del profilo utente come personalizzazione. In questo articolo, creiamo carte storte Bootstrap personalizzate in diversi stili.

Cos’è la carta distorta?

L’asimmetria non è altro che la torsione degli elementi in una delle direzioni X o Y. Questo è molto facile da ottenere usando la proprietà di trasformazione CSS. Nel nostro esempio, creiamo le seguenti varianti:

  • Scheda obliqua con grado negativo sull’asse X
  • Grado positivo della carta inclinata sull’asse X
  • Grado negativo della prospettiva della carta inclinata nell’asse Y
  • Prospettiva carta inclinata grado positivo nell’asse Y
  • Carta inclinata con testo e titolo in chiaro

Useremo CSS inline per indicare gli stili utilizzati, puoi definire tutti gli stili in un CSS esterno se ne hai uno sul tuo tema Bootstrap. In tutti i tipi, devi semplicemente aggiungere "transform:skewX()" o "transform:skewY()" alla classe ".card" esistente. Inoltre, abbiamo anche usato 1rem (20px) per il margine e 20rem per il larghezza per un corretto allineamento.

Carta inclinata con direzione X negativa

Creiamo una carta inclinata con -8 gradi nella direzione dell’asse X, di seguito è riportato il codice per lo stesso:

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewX(-8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

Il risultato apparirà come di seguito sul browser:

Come creare carte oblique Bootstrap personalizzate?

Carta inclinata con direzione X positiva

Ora cambia il grado negativo in positivo in skewX() per cambiare la direzione dell’asimmetria.

<div class="row" style="margin:20px;"> <div class="card" style="width:20rem;transform: skewX(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

Dovrebbe produrre l’output seguente:

Come creare carte oblique Bootstrap personalizzate?

Scheda in prospettiva nell’asse Y negativo

Ora cambia skewX() in skewY() per creare una scheda in prospettiva con -8 gradi.

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewY(-8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

La scheda in prospettiva con angolo negativo dovrebbe essere simile a quella di seguito:

Come creare carte oblique Bootstrap personalizzate?

Scheda in prospettiva nell’asse Y positivo

Allo stesso modo, crea una carta di prospettiva positiva modificando skewY() a +8 gradi.

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewY(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

Produrrà il seguente risultato:

Come creare carte oblique Bootstrap personalizzate?

Carta inclinata con testo e titolo in chiaro

In tutti gli esempi precedenti, anche il titolo, il testo e il testo del pulsante sono distorti poiché l’inclinazione viene applicata a livello di carta. Questo ha senso nei casi della prospettiva (asse Y), ma quando l’inclinazione viene applicata sull’asse X il contenuto del testo non deve essere inclinato. Per riportare il testo alla normalità, basta applicare gli stessi gradi nella direzione opposta.

Di seguito è riportato un codice di esempio, applicando +8 gradi a livello di carta e di nuovo applicando -8 gradi a livello di corpo della carta per riportare il testo all’interno del corpo della carta alla normalità.

<div class="row" style="margin:1rem;"> <div class="card" style="width:20rem;transform: skewX(8deg);"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body" style="transform: skewX(-8deg);"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-md btn-primary">Primary Button</a> </div> </div> </div>

La scheda inclinata con testo normale dovrebbe apparire come di seguito, rendendo il testo in un formato più leggibile.

Come creare carte oblique Bootstrap personalizzate?

Regolazione su dispositivi mobili

Le schede distorte di cui sopra possono apparire molto bene sui dispositivi desktop. Ma andranno oltre lo schermo dei dispositivi mobili creando così una barra di scorrimento orizzontale. Utilizza la seguente query multimediale CSS per rendere la scheda normale sui dispositivi mobili con meno di 480 px. Ciò significa essenzialmente che realizziamo la carta senza asimmetria sui dispositivi mobili mentre l’asimmetria viene mostrata su dispositivi più grandi.

<style> @media screen and (max-width: 480px) { .card { width:20rem !important; margin: 0 !important; flex-direction: column !important; -ms-flex-direction: column !important; transform: skewX(0deg) !important; transform: skewY(0deg) !important; border-radius: 0 !important; } .card-body { transform: skewX(0deg) !important; } } </style>

Personalizzazioni aggiuntive

Se hai notato, tutti i codici di cui sopra hanno una classe aggiuntiva "btn-md" collegata all’elemento pulsante. Questa non è una classe Bootstrap predefinita, che abbiamo aggiunto per mostrare l’effetto ombra della scatola. Inoltre, è possibile aggiungere alcuni effetti aggiuntivi per il passaggio del mouse e la rimozione del raggio del bordo.

<style> .card:hover { box-shadow: 0 0.5rem 1rem rgba(0,0,0,.19),0 0.3rem 0.3rem rgba(0,0,0,.23); } .btn-md { border-width: 0; outline: none; border-radius: 0 !important; box-shadow: 0 0.05rem 0.2rem rgba(0, 0, 0, .6); cursor: pointer; } .btn-md:hover { background-color: black; } .card, .card-img-top { border-radius: 0 !important; } </style>

È possibile utilizzare la query multimediale e stili di personalizzazione aggiuntivi nel foglio di stile esterno. Se stai aggiungendo gli stili all’interno della sezione principale della tua pagina, non dimenticare di utilizzare combinare e inserire tutti i codici all’interno di … tag. Ricorda di creare classi CSS separate per ogni stile richiesto simile alla classe ".btn-md" e applicarle alle carte richieste sulla tua pagina. In caso contrario, tutti gli elementi della scheda sulla pagina verranno influenzati se si utilizzano gli stili nella sezione head o nel foglio di stile esterno.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More