Как создать собственные перекошенные карты начальной загрузки?

В наших руководствах по Bootstrap мы подробно объяснили компонент карт. Поскольку компонент карты является одним из самых привлекательных, вы можете увидеть множество вариаций в Интернете. Мы также объяснили виджет флип-карты и виджет профиля пользователя как индивидуальную настройку. В этой статье давайте создадим пользовательские перекошенные карточки Bootstrap в разных стилях.

Что такое перекошенная карта?

Асимметрия — это не что иное, как скручивание элементов в одном из направлений X или Y. Этого очень легко добиться с помощью свойства преобразования CSS. В нашем примере создадим следующие варианты:

  • Перекошенная карта с отрицательным градусом по оси X
  • Наклон карты положительный градус по оси X
  • Перекошенная перспектива карты отрицательная степень по оси Y
  • Перекошенная перспектива карты в положительном градусе по оси Y
  • Перекошенная карточка с простым текстом и заголовком

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

Перекошенная карта с отрицательным направлением оси 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="https://www.webnots.com/create-custom-bootstrap-skewed-cards/#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

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

Перекошенная карта с -8 градусов по оси X

Перекошенная карта с положительным направлением 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="https://www.webnots.com/create-custom-bootstrap-skewed-cards/#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

Он должен выдать следующий результат:

Перекошенная карта с +8 градусом по оси X

Карточка перспективы в отрицательной оси 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="https://www.webnots.com/create-custom-bootstrap-skewed-cards/#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

Карточка перспективы с отрицательным углом должна выглядеть так:

Карточка перспективы с осью Y -8

Карточка перспективы в положительной оси 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="https://www.webnots.com/create-custom-bootstrap-skewed-cards/#" class="btn btn-md btn-primary">Primary Button</a>
</div>
</div> 
</div>

Это даст следующий результат:

Карточка перспективы с +8 осью Y

Перекошенная карточка с обычным текстом и заголовком

Во всех приведенных выше примерах заголовок, текст и текст кнопки также искажены, поскольку наклон применяется на уровне карты. Это имеет смысл в случаях перспективы (ось 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="https://www.webnots.com/create-custom-bootstrap-skewed-cards/#" 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», и применить их к нужным карточкам на вашей странице. В противном случае все элементы карточки на странице будут затронуты, если вы используете стили в разделе заголовка или во внешней таблице стилей.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.