TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити нестандартні перекошені картки під час завантаження?

1

У наших підручниках Bootstrap ми детально пояснили компонент карт. Оскільки компонент картки є одним з найпривабливіших компонентів, ви можете побачити багато варіантів у всьому Інтернеті. Ми також пояснили віджет фліп -карти та віджет профілю користувача як налаштування. У цій статті давайте створимо нестандартні перекошені картки Bootstrap у різних стилях.

Що таке перекошена карта?

Перекос – це не що інше, як скручування елементів в одному з напрямків X або Y. Це дуже легко досягти за допомогою властивості CSS -трансформації. У нашому прикладі створимо такі варіанти:

  • Перекошена карта з негативним ступенем по осі X
  • Позитивний ступінь перекосу карти по осі X
  • Негативний ступінь перекосу карти перспективи по осі Y
  • Позитивний ступінь перекосу карти перспективи по осі Y
  • Перекошена картка з простим текстом і заголовком

Ми будемо використовувати вбудований CSS для позначення використовуваних стилів. Ви можете визначити всі стилі у зовнішньому CSS, якщо він є у вашій темі Bootstrap. У всіх типах вам просто потрібно додати “transform: skewX()" або “transform: skewY ()” до існуючого класу “.card”. Крім того, ми також використали 1rem (20px) для поля та 20rem для ширина для правильного вирівнювання.

Перекошена карта з негативним напрямком X

Давайте створимо перекошену картку з -8 градусом у напрямку осі X, нижче наведено код для того ж:

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

Результат буде виглядати так, як показано нижче у браузері:

Як створити нестандартні перекошені картки під час завантаження?

Перекошена карта з позитивним напрямком X

Тепер змініть негативний ступінь на позитивний у skewX (), щоб змінити напрямок перекосу.

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

Він повинен видавати наступний результат:

Як створити нестандартні перекошені картки під час завантаження?

Картка перспективи у від’ємній осі Y

Тепер змініть skewX () на skewY (), щоб створити картку перспективи з -8 градусом.

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

Карта перспективи з від’ємним кутом має виглядати так:

Як створити нестандартні перекошені картки під час завантаження?

Картка перспективи у позитивній осі Y

Подібним чином створіть позитивну картку перспективи, змінивши параметр skewY () на +8 градусів.

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

Це дасть наступний результат:

Як створити нестандартні перекошені картки під час завантаження?

Перекошена картка з простим текстом і заголовком

У всіх наведених вище прикладах заголовок, текст та текст кнопки також перекошені, оскільки перекіс застосовується на рівні картки. Це має сенс у випадках перспективи (вісь Y), але коли перекіс застосовується до осі X, зміст тексту не потрібно перекошувати. Щоб повернути текст до нормального стану, просто застосуйте ті ж градуси у протилежному напрямку.

Нижче наведено приклад коду, що наносить +8 градусів на рівні картки і знову наносить -8 градусів на рівні тіла картки, щоб привести текст всередині корпусу картки до нормального.

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

Перекошена картка зі звичайним текстом має виглядати так, як показано нижче, що робить текст у більш читабельному форматі.

Як створити нестандартні перекошені картки під час завантаження?

Коригування на мобільних пристроях

Вищевказані перекошені карти можуть добре виглядати на настільних пристроях. Але вони будуть виходити за межі екрану мобільних пристроїв, створюючи горизонтальну смугу прокрутки. Використовуйте наведений нижче медіа -запит CSS, щоб карта виглядала нормально на мобільних пристроях розміром менше 480 пікселів. Це, по суті, означає, що ми робимо карту без перекосів на мобільних пристроях, тоді як перекос відображається на більших пристроях.

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

Додаткові налаштування

Якщо ви помітили, всі вищевказані коди мають додатковий клас “btn-md”, приєднаний до елемента кнопки. Це не клас завантаження Bootstrap за замовчуванням, ми додали його для показу ефекту тіні вікна. Також можна додати деякі додаткові ефекти для зависання та видалення радіусу кордону.

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

Ви можете використовувати медіа -запит та додаткові стилі налаштування у зовнішній таблиці стилів. Якщо ви додаєте стилі всередині розділу заголовка вашої сторінки, не забудьте скористатися комбінацією та розмістити всі коди всередині… тегів. Не забудьте створити окремі класи CSS для кожного необхідного стилю, подібного до класу “.btn-md” та застосувати до необхідних карток на вашій сторінці. Інакше всі елементи картки на сторінці постраждають від використання стилів у розділі заголовка або у зовнішній таблиці стилів.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі