TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar ett anpassat Bootstrap skevt kort?

0

I våra Bootstrap -tutorials har vi förklarat kortkomponenten i detalj. Eftersom kortkomponenten är en av de mest attraktiva komponenterna kan du se många variationer över hela internet. Vi har också förklarat flip -kort -widget och användarprofil -widget som en anpassning. I den här artikeln, låt oss skapa anpassade Bootstrap -snedställda kort i olika stilar.

Vad är snett kort?

Snedhet är inget annat än vridningselement i en av X- eller Y -riktningarna. Detta är mycket enkelt att uppnå med hjälp av CSS -transformeringsegenskapen. Låt oss i vårt exempel skapa följande varianter:

  • Snett kort med negativ grad i X -axeln
  • Snedställd kort positiv grad i X -axeln
  • Snett kortperspektiv negativ grad i Y -axeln
  • Snett kortperspektiv positiv grad i Y -axeln
  • Snett kort med vanlig text och titel

Vi kommer att använda inline CSS för att ange vilka stilar som används. Du kan definiera alla stilar i en extern CSS om du har en på ditt Bootstrap -tema. I alla typer behöver du helt enkelt lägga till "transform: skewX()" eller "transform: skewY ()" till den befintliga ".card" -klassen. Dessutom har vi också använt 1rem (20px) för marginal och 20rem för bredd för korrekt inriktning.

Snett kort med negativ X -riktning

Låt oss skapa ett snett kort med -8 grader i X -axelriktning, nedan är koden för samma:

<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>

Resultatet kommer att se ut nedan i webbläsaren:

Hur man skapar ett anpassat Bootstrap skevt kort?

Snett kort med positiv X -riktning

Ändra nu den negativa graden till positiv i skewX () för att ändra skevhetens riktning.

<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>

Det bör producera följande utdata:

Hur man skapar ett anpassat Bootstrap skevt kort?

Perspektivkort i negativ Y -axel

Ändra nu skewX () till skewY () för att skapa ett perspektivkort med -8 grader.

<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>

Perspektivkortet med negativ vinkel ska se ut nedan:

Hur man skapar ett anpassat Bootstrap skevt kort?

Perspektivkort i positiv Y -axel

Skapa på samma sätt ett positivt perspektivkort genom att ändra skewY () till +8 grader.

<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>

Det ger följande resultat:

Hur man skapar ett anpassat Bootstrap skevt kort?

Snett kort med vanlig text och titel

I alla exemplen ovan är titeln, texten och knapptexten också snedställda när snedheten appliceras på kortnivå. Detta är meningsfullt i perspektivfall (Y -axeln), men när snedställningen appliceras på X -axeln behöver textinnehållet inte vara snett. För att göra texten normal igen, använd bara samma grader i motsatt riktning.

Nedan är en exempelkod, applicering av +8 grader på kortnivå och återigen applicering av -8 grader på kortkroppsnivå för att få texten inuti kortets kropp att bli normal.

<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>

Det snedställda kortet med vanlig text ska se ut nedan och göra texten i ett mer läsbart format.

Hur man skapar ett anpassat Bootstrap skevt kort?

Justering på mobila enheter

Ovanstående snedställda kort kan se bra ut på stationära enheter. Men de kommer att gå utöver skärmen på mobila enheter och skapa en horisontell rullningslist. Använd CSS -mediafrågan nedan för att få kortet att se normalt ut på mobila enheter mindre än 480 pixlar. Detta betyder i huvudsak att vi gör kortet utan snedhet på mobila enheter medan snedheten visas på större enheter.

<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>

Ytterligare anpassningar

Om du har märkt att alla ovanstående koder har en extra "btn-md" -klass kopplad till knappelementet. Detta är inte en standard Bootstrap -klass, vi har lagt till för att visa boxskuggaeffekt. Några ytterligare effekter kan också läggas till för att sväva och ta bort kantradie.

<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>

Du kan använda mediefrågan och ytterligare anpassningsstilar i externa formatmallar. Om du lägger till stilarna i sidans huvuddel, glöm inte att använda kombinera och sätt in alla koder i … taggar. Kom ihåg att skapa separata CSS-klasser för varje obligatorisk stil som liknar ".btn-md" -klassen och applicera på obligatoriska kort på din sida. Annars påverkas alla kortelement på sidan om du använder stilar i huvudavsnitt eller i externt formatmall.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer