Преобразование CSS: смещение масштаба перекрывающихся разделов

ProgramBox

Преобразование CSS: смещение масштаба перекрывающихся разделов

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#html #css #css-transforms #shadow

#HTML #css #css-преобразования #тень

Вопрос:

Я создал ленту CSS с другой лентой CSS непосредственно за первой, которая служит тенью.

Я пытаюсь масштабировать оба из них вместе.

Я обернул ленты в a div и применил a transform: scale к этому родительскому div элементу. Вместо того, чтобы увеличивать или уменьшать ленты, как ожидалось, они стали смещенными.

Что вызывает смещение лент при scale применении и как это можно исправить?

 .container {
  align-items: center;
  display: flex;
  justify-content: center;
}
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}
.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}
.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}
.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}

 <div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

1. Я полностью понимаю, что это не ответ на ваш вопрос, но, может быть, было бы лучше использовать filter: drop-shadow() для достижения того же эффекта?

2. @SergeyZdobnov Это фантастика! Я пытался box-shadow , но это наложило тень на весь прямоугольник ленты вместо того, чтобы следовать его контурам. filter: drop-shadow() это гораздо более простое решение, чем наложение лент.

3. они становятся смещенными, потому что вы масштабируете родительский элемент, и от него зависит один из его дочерних top: 0.9em; элементов, поэтому его также необходимо масштабировать, что вызывает смещение

Ответ №1:

Дочерние элементы

Измените размер элементов, а не родительского элемента. Это дает более точные результаты.

Показать фрагмент кода

 .container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container div {
  transform: scale(0.8);
}

.bookmark,
.bookmark-shadow {
  border: 0.7em solid;
  border-bottom-color: transparent;
  box-shadow: 0 -1em;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 0;
  text-align: center;
  vertical-align: middle;
  width: 0;
}

.bookmark {
  color: #337ab7;
  position: relative;
  z-index: 10;
}

.bookmark-shadow {
  border: 0.75em solid;
  border-bottom-color: transparent;
  color: rgba(64, 64, 64, 0.5);
  margin-left: -0.05em;
  position: absolute;
  top: 0.9em;
  z-index: 5;
}

 <div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
    <div class="bookmark-shadow"></div>
  </div>
</div>

На самом деле, элементы здесь не связаны со сквозным. По этой причине можно вычислить ".7em" значение с ".75em" помощью value как ".05em" математически. Но когда в работу входит определение размеров, браузеры округляют некоторые значения. Вот почему 0,05em в «Масштабе 100%», «масштаб 80%» не вычисляется по формуле 0.05 * 80/100 . Естественно, темпы роста или усадки обоих отдельных элементов не совпадают точно.

К сожалению, браузеры обладают такой способностью. Потому что то же самое можно увидеть и в SVG форматах. Если point они не связаны друг с другом, два «разных» масштаба дают разные результаты.

Еще один: ограничение по родительскому

Для достижения точного результата было бы разумнее использовать элементы в вложенном. ::before ::after Это возвращает вас как элемент для «закладки».

Показать фрагмент кода

 .container {
  align-items: center;
  display: flex;
  justify-content: center;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.bookmark-container {
  transform: scale(0.8);
}

.bookmark {
  box-sizing: border-box;
  color: #337ab7;
  cursor: pointer;
  display: inline-block;
  height: 0;
  box-shadow: 0 -1em;
  text-align: center;
  vertical-align: middle;
  width: 0;
  position: relative;
}

.bookmark::before {
  content: "";
  color: #337ab7;
  box-shadow: 0 -1em;
  border: 0.7em solid;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 10;
}

.bookmark::after {
  content: "";
  color: rgba(64, 64, 64, 0.5);
  border: 0.75em solid;
  box-shadow: 0 -1em;
  border-bottom-color: transparent;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 5;
}

 <div class="container fixed-header" style="background: #fefefe; height: 50px;">
  <div style="padding: 20px;">Unscaled: </div>
  <div>
    <div class="bookmark"></div>
  </div>
  <div style="padding: 20px;">Scaled to 80%: </div>
  <div class="bookmark-container">
    <div class="bookmark"></div>
  </div>
</div>

Как я упоминал выше, кажется, что есть две перекрывающиеся тени. Но это относится только к браузеру. Если вы подойдете слишком близко, вы на самом деле получите более плавный внешний вид.