TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć niestandardowe przekrzywione karty Bootstrap?

2

W naszych samouczkach Bootstrap szczegółowo wyjaśniliśmy komponent karty. Ponieważ element karty jest jednym z najbardziej atrakcyjnych elementów, w całym Internecie można zobaczyć wiele odmian. Wyjaśniliśmy również widżet odwracanej karty i widżet profilu użytkownika jako dostosowanie. W tym artykule stwórzmy niestandardowe przekrzywione karty Bootstrap w różnych stylach.

Co to jest przekrzywiona karta?

Skośność to nic innego jak skręcanie elementów w jednym z kierunków X lub Y. Jest to bardzo łatwe do osiągnięcia za pomocą właściwości transformacji CSS. W naszym przykładzie stwórzmy następujące odmiany:

  • Przekrzywiona karta z ujemnym stopniem w osi X
  • Przekrzywiony dodatni stopień karty w osi X
  • Przekrzywiona perspektywa karty ujemny stopień w osi Y
  • Wykrzywiony dodatni stopień perspektywy karty w osi Y
  • Przekrzywiona karta ze zwykłym tekstem i tytułem

Użyjemy wbudowanego CSS do wskazania użytych stylów, możesz zdefiniować wszystkie style w zewnętrznym CSS, jeśli masz taki w swoim motywie Bootstrap. We wszystkich typach wystarczy dodać „transform:skewX()" lub „transform:skewY()” do istniejącej klasy „.card”. Dodatkowo użyliśmy również 1rem (20px) dla marginesu i 20rem dla szerokość dla prawidłowego wyrównania.

Przekrzywiona karta z ujemnym kierunkiem X

Stwórzmy przekrzywioną kartę o -8 stopniach w kierunku osi X, poniżej kod tego samego:

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

Wynik będzie wyglądał jak poniżej w przeglądarce:

Jak stworzyć niestandardowe przekrzywione karty Bootstrap?

Przekrzywiona karta z dodatnim kierunkiem X

Teraz zmień ujemny stopień na dodatni w skewX(), aby zmienić kierunek skośności.

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

Powinno to dawać następujące dane wyjściowe:

Jak stworzyć niestandardowe przekrzywione karty Bootstrap?

Karta perspektywy w ujemnej osi Y

Teraz zmień skewX() na skewY(), aby utworzyć kartę perspektywy z -8 stopniami.

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

Karta perspektywy z ujemnym kątem powinna wyglądać jak poniżej:

Jak stworzyć niestandardowe przekrzywione karty Bootstrap?

Karta perspektywy w dodatniej osi Y

Podobnie utwórz kartę pozytywnej perspektywy, zmieniając skośne() na +8 stopni.

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

Da to następujący wynik:

Jak stworzyć niestandardowe przekrzywione karty Bootstrap?

Przekrzywiona karta ze zwykłym tekstem i tytułem

We wszystkich powyższych przykładach tytuł, tekst i tekst przycisku są również przekrzywione, ponieważ przekrzywienie jest stosowane na poziomie karty. Ma to sens w przypadkach z perspektywą (oś Y), ale po zastosowaniu pochylenia na osi X zawartość tekstu nie musi być pochylona. Aby tekst wrócił do normy, po prostu zastosuj te same stopnie w przeciwnym kierunku.

Poniżej znajduje się przykładowy kod, stosujący +8 stopni na poziomie karty i ponownie stosujący -8 stopni na poziomie treści karty, aby przywrócić normalny tekst wewnątrz karty.

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

Przekrzywiona karta ze zwykłym tekstem powinna wyglądać jak poniżej, dzięki czemu tekst będzie bardziej czytelny.

Jak stworzyć niestandardowe przekrzywione karty Bootstrap?

Dostosowanie na urządzeniach mobilnych

Powyższe przekrzywione karty mogą wyglądać bardzo dobrze na urządzeniach stacjonarnych. Wyjdą jednak poza ekran urządzeń mobilnych, tworząc w ten sposób poziomy pasek przewijania. Użyj poniższego zapytania o media CSS, aby karta wyglądała normalnie na urządzeniach mobilnych mniejszych niż 480 pikseli. Zasadniczo oznacza to, że robimy kartę bez przekrzywienia na urządzeniach mobilnych, podczas gdy przekrzywienie jest widoczne na większych urządzeniach.

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

Dodatkowe dostosowania

Jeśli zauważyłeś, wszystkie powyższe kody mają dodatkową klasę „btn-md” dołączoną do elementu button. To nie jest domyślna klasa Bootstrap, dodaliśmy ją do pokazywania efektu cienia pola. Można również dodać kilka dodatkowych efektów do najechania i usunięcia promienia granicy.

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

Możesz użyć zapytania o media i dodatkowych stylów dostosowywania w zewnętrznym arkuszu stylów. Jeśli dodajesz style wewnątrz sekcji nagłówka swojej strony, nie zapomnij użyć łączenia i umieszczania wszystkich kodów w… tagach. Pamiętaj, aby utworzyć osobne klasy CSS dla każdego wymaganego stylu podobnego do klasy „.btn-md” i zastosować do wymaganych kart na swojej stronie. W przeciwnym razie wszystkie elementy karty na stronie zostaną naruszone, jeśli użyjesz stylów w sekcji nagłówka lub w zewnętrznym arkuszu stylów.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów