Нормально ли такое расхождение с макетом?

Question

[YellowFellow]

Нормально ли такое расхождение с макетом,если не было задачи сделать pixelperfect?


Так же есть вопрос по поводу меню.Пробовал через border-bottom:dashed;Но тогда получается,что граница примыкает к тексту+ кол-во полос не две,а в зависимости от длины текста.Как сделать такое нижнее подчеркивание?

Comments

[Dymok]

на кнопках размер шрифта явно не тот

Answer 1

[Alexey10]

Да нормально, даже хорошо. Если заказчик нормальный человек (что все таки большинство), то хорошо. По поводу меню, нужно сделать через ::after, ::before

.menu li a::before,
.menu li a::after{
   content: "";
   position: absolute;
    bottom: 0;
    width: 49%;
    height: 2px;
}

Comments

[YellowFellow]

спасибо,у меня была ещё идея пихнуть туда один псведоэлемент, но это не дало бы результата.

[Ankhena]

YellowFellow, это делается, конечно, одним псевдоэлементом или вовсе без него. Но уж не двумя.

[Alexey10]

Ankhena, а как ты две линии по бокам собрался делать одним псевдоэлементом?

[YellowFellow]

Ankhena, а как это реализовать одним?двумя у меня ещё есть представление,но как это сделать одним?

[Alexey10]

YellowFellow, Ankhena , я предполагаю картинкой или вот так

.menu li a::after{
   content: "_ _";

}

но вторым способом далеко не факт, что получится адекватно )

[Ankhena]

Alexey10, YellowFellow, написала ответом оба варианта

[Alexey10]

Ankhena, Согласен, имеет право на жизнь =). Я просто всегда так делал

Answer 2

[Ankhena]

Подчеркивание делается либо одним псевдоэлементом или вообще без них
https://jsfiddle.net/fzhec4bo/

просто код

.nav1 a {
  position: relative;
  display: inline-block;
  margin: 20px;
  text-decoration: none;
}

.nav1 a::before {
  content: "";
  position: absolute;
  top: 100%;
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, violet calc(50% - 1px), transparent calc(50% - 1px), transparent calc(50% + 1px), violet calc(50% + 1px));
}

.nav2 a {
  display: inline-block;
  margin: 20px;
  padding-bottom: 3px;
  text-decoration: none;
  background: linear-gradient(to right, violet calc(50% - 1px), transparent calc(50% - 1px), transparent calc(50% + 1px), violet calc(50% + 1px)) no-repeat bottom center / 100% 3px;
}

<nav class="nav1">
  <a href="">text</a>
  <a href="">texttext</a>
</nav>
<nav class="nav2">
  <a href="">text</a>
  <a href="">texttext</a>
</nav>

Comments

[YellowFellow]

спасибо,это гениально!

Answer 3

[McBernar]

Нормально, никто не заметит.

Answer 4

[Александр Флоренко]

Нормально.
С учетом того, что браузер и фотошоп/скетч/фигрма рендерят картинку по разному.

Главное что бы все отсутпы, лайнхейты и т.д. соответствовали макету.

Comments

[YellowFellow]

по поводу лайнхейтов.Я в некоторых однострочных местах ставил намного меньший лайнхейт,например, в логотипе мне пришлось поставить не 56,как это сделано в макете,а намного меньше.Если поставить 56,то текст будет отступать от верхнего края блока на лишних 10 пикселей.Или я не правильно всё понимаю?

[Александр Флоренко]

Сложно сказать не видя макет и код)

Answer 5

[dom1n1k]

Допустимо, но не топ-класс.