Только для CSS и дружественный к макету Reveal Focus от Fluent Design System - PullRequest
Новая
       28

Только для CSS и дружественный к макету Reveal Focus от Fluent Design System

0 голосов
/ 12 мая 2018

В Показать документы фокусировки его:

enter image description here

Но, как документы

Отображение фокуса увеличивает размер визуального фокуса, что может вызвать проблемы с макетом пользовательского интерфейса. В некоторых случаях вам может понадобиться настроить эффект фокуса «Выявить», чтобы оптимизировать его для вашего приложения.

Как бы вы подошли к созданию эффекта, который не влияет на пользовательский интерфейс, как описано выше?

Компонент фокусировки My Reveal:

  1. Выявить свечение box-shadow
  2. Визуальный фокус: outline
  3. Вторичный фокус визуальный это border
  4. Фон

но что-то не так, и я не могу понять это. Это box-shadow, это интервал (например, margin, я не устанавливаю ни одного, как вы можете видеть), или это еще что-то еще? Как бы вы это исправить, если бы вы хотели, чтобы это выглядело на GIF ниже? 

body {
  background-color: #000;
  padding: 5px 100px;
}
.tile {
  display: inline-block;
  height: 82px;
  background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }

.reveal-focus {
  border: 1px solid transparent;
  outline: 2px solid transparent;
}

.reveal-focus:focus {
  outline-color: #61B250;
  box-shadow: 0 0 15px 3px #61B250;
}
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>

enter image description here

1 Ответ

0 голосов
/ 12 мая 2018

Тень размещается над элементами, которые появляются перед сфокусированным, но под элементами после него. Вам нужно добавить position: relative ко всем элементам и z-index: 1 к выделенному.

Чтобы убедиться, что это не мешает любой другой укладке, примените position: relative; z-index: 0 к контейнеру. Это гарантирует, что он имеет собственный контекст стека.

GIF, который вы показываете, по-видимому, также имеет небольшой анимационный эффект: свечение становится более интенсивным в течение всего лишь секунды, прежде чем оно затухает до нормы. Это может быть достигнуто довольно просто с помощью animation. 

body {
  background-color: #000;
  padding: 5px 100px;
}
.tile {
  display: inline-block;
  height: 82px;
  background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }

.reveal-focus {
  border: 1px solid transparent;
  outline: 2px solid transparent;
  position: relative;
}

.reveal-focus:focus {
  border-color: #000;
  outline-color: #61B250;
  box-shadow: 0 0 15px 3px #61B250;
  animation: glowfade 0.4s linear;
  z-index: 1;
}

@keyframes glowfade {
  from {box-shadow: 0 0 30px 6px #61B250;}
  to {box-shadow: 0 0 15px 3px #61B250;}
}
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x2"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>
<a href="#" class="tile reveal-focus x1"></a>

Отрегулируйте значения по желанию.

...