Ответы пользователя по тегу CSS
  • Как масштабировать сайт под маленькие устройства?

    @ned4ded
    Верстка, Фронтенд
    Это решит проблему:
    <meta name="viewport" content="width=device-width">


    TL;DR

    "Портативные устройства часто рендерят страницы в виртуальном окне, называемым вьюпортом, ширина которого обычно больше ширины экрана" - mdn. Для обхода этого поведения используется свойство width мета-аттрибута viewport, равное значению device-width: content="width=device-width". В таком случае ширина вьюпорта будет равна ширине экрана устройства.

    width - не единственное свойство, позволяющие изменять заложенное поведение вьюпорта, полный список доступен на mdn или в спеке. Стоит отметить, что это драфт, но современные браузеры его стараются имплементировать.

    Другое свойство, используемое тобой в примере, - initial-scale, устанавливающие зум вьюпорта в определенное значение при первичном запуске сайта. Значение может варьироваться от 0.1 до 10. При 1 зум равен ширине вьюпорта (можно сказать, что в данном случае зум отсутствует). По дефолту же зум равен значению auto, который высчитывается путем деления исходного значения вьюпорта на значение реально отрендеренного холста, что позволяет отобразить весь холст на экране (формула чуть сложнее). В твоем случае зум равен ширине экрана (т.к. ширина вьюпорта равна ширине экрана через width=device-width), т.е. 320px. Когда ты устанавливаешь ограничение на минимальную ширину тела документа, равную, например, 480px, то по дефолту у тебя будет горизонтальный скролл при зуме равном 1. Это логичное поведение, заложенное в спеке. Это как пытаться посмотреть сайт с ограничение в 1600px в ширину с ноутбука, там тоже будет горизонтальный скролл.

    Чтобы обойти это поведение достаточно установить initial-scale в значение auto, или убрать это свойство вообще, т.к. это значение по дефолту.
    Ответ написан
    Комментировать
  • Делать pixelperfect ломая поведение flexbox или же делать правильно flexbox ломая pixelperfect?

    @ned4ded
    Верстка, Фронтенд
    Добрый день. Вкусовщина, конечно, но я за нормальную работу стилей, а не подгон под пп, исключением является случай, когда такой подгод обусловлен некоторой идеей дизайнера (но в 90% случаев это просто недочет дизайна).

    Используя flexbox и делая все по PP приходится отказываться от justify-content, и использовать костыли в виде margin чтобы подогнать под макет, в свою очередь это здорово мешает при адаптации под меньшие разрешения, приходится постоянно перебивать размеры margin, с justify-content и flex-wrap адаптировать по сути и не надо оно само адаптируется но не подходит под PP c расхождением до 50-70 пикселей.


    Если расхождение на 50 пикселей, то используйте другой подход при верстке, чтобы быть ближе к макету. Тут же важно распределение пространства между блоками и их позиционирование в документе.

    Иными словами, если вы видите, что у вас в ряду 3 блока и пространство между ними должно распределяться +/- равномерно (но в дизайне один из блоков расположен не на месте), тогда justify-content будет оправдан, но если у вас 3 блока разной ширины с разными отступами и такое решение обусловлено некоторым "видением", то придется выкручиваться (:
    Ответ написан
    Комментировать
  • Как верстать radio-input?

    @ned4ded
    Верстка, Фронтенд
    Добрый день, самый простой способ - скрыть оригинальные радиокнопки, сверстать кнопки с двумя состоянием: вкл и выкл (через отдельный спан или :before + :after для лейбла). Сам чекбокс выбирается с помощью тега label и аттрибута for.

    Собственно, вот пример из бутстрапа: https://getbootstrap.com/docs/4.3/components/forms...

    Обратите внимание на стили
    .custom-control-input:checked ~ .custom-control-label::before { ... }


    Селектор .a ~ .b выбирает все элементы с классом .b, следующие за элементами с классом .a (на одном уровне дома). С помощью данной фишки можно исхитриться и делать много интересных вещей без js: слайдеры, выпадающее меню, реализовать любую логику, зависящую от двух состояний.

    ps как-то ради интереса реализовывал с помощью селекторов логику из 4х состояний, так что все ограничивается вашей фантазией ;)
    Ответ написан
  • Как убрать пустоту между блоками без Masonry?

    @ned4ded
    Верстка, Фронтенд
    .b2 {
        width: calc(50% - 2px); // 2px можете убрать, когда уберете бордер у b3
        float: right;
    }
    Ответ написан
    Комментировать
  • Как правильно использовать em в кнопках?

    @ned4ded
    Верстка, Фронтенд
    Добрый вечер!

    Насколько я понимаю работу браузера, то на уровне рендеринга нет никаких em, rem и иных относительных величин, пересчет идет в px, в связи с чем остаток от деления после рекалькуляции em, rem и т.д. иногда может быть бесконечным. Из-за этого у вас выскакивают такие неровные пиксели.

    Более общий момент: какой смысл присваивать значения шрифта для элемента равным rem, а остальным величинам в том же классе делать в em, а не в rem? Вся суть em в том, что такой элемент может быть засунут в тег small, например, и все значения будут пересчитаны относительно этого тега. REM создавался, чтобы избежать сложения значений вложенных em'ов (compounding), а вы в итоге создаете элемент, значения которого привязываются к локальному шрифту, а шрифт этого элемента привязываете к размеру рутового шрифта, WHAAT?

    Есть смысл сделать, например, так:
    .button {
      fz: 1em; // default
      p: 0.5em 0.75em;
      lh: 1.25;
    
      &--small {
        font-size: 0.75em;
      }
    }


    В данном случае кнопка у вас будет соответствовать размеру шрифта элемента-родителя, а если добавить к ней класс .button--small, то 75% шрифта родителя и все значения пересчитаются соответствующим образом.

    Но я бы так делать не рекомендовал из-за возможных проблем с вложенностью и расчетом em. Обычно кнопки редко встречаются в дизайне в строке (собственно, это единственная причина делать их em), и они, обычно, имеют строго заданные размеры, независимо от каких-то других элементов.

    Единственное, где можно считать em хорошей практикой по моему мнению, - это иконки и некоторые текстовые утилиты (типа бутстраповского .small).
    Ответ написан
    2 комментария
  • Как сделан скролл без скроллбара?

    @ned4ded
    Верстка, Фронтенд
    Он не скрыт, а отключен для вебкита. Если вы зайдете в фаерфокс, то увидите скролл.

    Собсвтенно, там отключает скролл псевдоэлемент ::-webkit-scrollbar;

    Вот код:
    * ::-webkit-scrollbar {
        display: none;
    }


    Проблема в том, что скролл не ререндерится после дизейбла данного свойства в хроме, а остается невидимым. Видимо, какой-то баг. Если изменить стили таким образом:
    * ::-webkit-scrollbar {
        display: block;
        background-color: hsl(240, 100%, 50%);
    }


    то увидите синюю полоску справа.
    Ответ написан
    1 комментарий
  • Как сделать, чтобы ребёнок с абсолютным позиционированием игнорировал релативное позиционирование родителя?

    @ned4ded
    Верстка, Фронтенд
    Никак.

    upd
    Наверное, немножко стоит пояснить, чтобы не быть голословным. Позиционирование элемента со свойством position: absolute; относительно родителя со свойством position: relative; - это заложенное в логику рендеринга поведение. Вы пытаетесь сломать то, что работает так, как задумано. Попробуйте положить мяч на наклонную поверхность и попросите гравитацию перестать работать, чтобы мяч не покатился вниз.

    Вот ссылка на спеку, если вам интересно, пример 13.
    Ответ написан
    1 комментарий
  • Как выбрать четные/нечетные дочерние элементы родителя только с определенным классом?

    @ned4ded
    Верстка, Фронтенд
    Ответ: Невозможно реализовать такую выборку через обычный css селектор.

    Каждый элемент в доме входит в "список сиблингов" (яхз как нормально перевести list of siblings), т.е. список таких нод, которые являются прямыми потомками для одной родительской ноды.

    Все структурные псевдо-классы (:nth-child, :nth-of-type, etc) работают именно со списком таких нод, т.е. выставляя любом селектору псевдокласс ":nth-child()" вы выбираете только те элементы, для позиции которых в списке сиблингов верна заданная в nth-child формула.

    На примере: .child:nth-child(1) { color: red; } не окрасит ни один элемент, по той причине, что ни один .child элемент не является первым в списке сбилнгов; однако, .child:nth-child(4) { color: red; } окрасит самый первый элемент с классом .child в приведенном ТС примере, т.к. он является 4 элементов в списке своих сиблингов.

    Вывод: без js вы не сможете сделать такую выборку. Я вижу два решения: 1) вы окрашиваете на стороне клиента эти элементы через js, 2) вы рассчитываете на стороне бека, какой из элементов является четным и добавляете ему класс .child--view--even, который в стилях будет окрашивать ваш элемент в красный цвет.

    Для фронта:
    (() => {
    	const elements = document.getElementsByClassName('child');
      
      const rec = (arr) => {
        if(!arr.length) return;
        
        const [even, odd, ...rest] = arr;
        
        even.setAttribute('style', 'color: red');
        
        return rec(rest);
      }
      
      rec(elements);
      
      return;
    })();


    ps если вы будете использовать мой пример в чистом виде, то лучше его отбабелить
    Ответ написан
    Комментировать
  • Как сделать контурную обводку png?

    @ned4ded
    Верстка, Фронтенд
    Добрый день. Т.к. изображение круглое, можно обойтись и без фотошопа. Удалите тег img. Сделайте картинку из img фоном для тега a. Используйте свойство border-radius. Пример:

    .shake {
      display:block;
      width: 90px;
      height: 90px;
      border: 5px solid transparent;
      border-radius: 100%;
      background-image: url(http://xn----8sbacs4bcidfthwu.xn--p1ai/wp-includes/images/call-img.png);
      background-repeat: no-repeat;
      background-size: cover;
      box-sizing: border-box;
    }
    
    .shake:hover {
      border: 5px solid hsl(0, 100%, 50%);
    }


    Пример на фидле.
    Ответ написан
    Комментировать
  • Как сделать переход по ссылке с помощью input?

    @ned4ded
    Верстка, Фронтенд
    Добрый день! Могу лишь помочь вам с высоты своих скромных знанйи (я в http не очень шарю). Но мне кажется, вы немного запутались в языке самого протокола и процессе отправки данных с формы.

    Текст отправляется именно такой, потому что ? - это %3F в unicode. Любое name с формы будет перекодировано в base64. Сам же ? в конец строки браузера подставляется при формировании запроса к серверу (т.е. браузером, а не вами), сл-но, его нужно исключить.

    Тоже самое происходит со знаком амперсанд. Браузером автоматически собираются параметры с формы и отправляются на сервер используюя такую структуру: key=value&key2=value2...

    Следующий код сформирует запрос ?kek=&results=<your_text> к целевому пути

    <form action="/targetPage.html" method="GET">
        <input name="kek" hidden>
        <input type="text" name="results" value=""> // здесь нужно будет ввести текст
      </form>


    Как видите, в таком случае после слова kek подставляется знак равенство, т.к. это соответствует протоколу http. Веротяно, можно настроить http сервер, который сможет принимать и обрабатывать запросы без = (без пустого параметра), но я в точности вас сейчас просветить по этому моменту не смогу.
    Ответ написан
  • Оцените вёрстку макета?

    @ned4ded
    Верстка, Фронтенд
    Привет из htmlacademy, тоже верстал этот макет )
    Индекс:

    1) Иконки на дашборде расположены неровно.

    2) Едет меню каталога товаров при переполнении.

    3) Спецификация товара, сделанная через флекс, не имеет свойства wrap, из-за чего при переполнении едет верстка.

    4) Псевдоэлемент after для кнопки Подробнее находится не по центру в firefox.

    5) В email форме нет стилизации бэкграунда для инпутов.

    6) Футер, по-моему, должен быть растянутым в края (как и фон для блока services, которого у тебя нет).

    Страница каталога:

    7) бэкграунд для фильтров не соответствует макету и должен быть в края.

    8) Bluetooth радиокнопки сделаны неровно.

    9) Цены под карточками сделаны неровно.

    10) При наведении на карточку товара должна становится прозрачной кратинка, а не серый фон + позиционирование неровное, какая-то линия на каждой карточкой по наведению.

    11) Пагинация без заливки.

    12) Селфи-палка «Следуй за мной» 4900 руь.

    13) И почти для всех блоков: ты используешь display:flex, но располагаешь элементы все равно используя margin. Да, в некоторых местах это необходимо, но, например, в меню каталог товаров, в info секции можно нормально расположить блоки, используя свойства флекс-боксов. А в каталоге (в лучшем месте для использования флекса), у тебя inline-block )

    14) В некоторых местах у тебя используются section теги, тогда как являются они, по сути, обычными дивами.

    Сколько времени тебе осталось до сдачи работы?) Я свою, помню, допиливал в последние минуты перед дедлайном ^^
    Ответ написан
    2 комментария
  • Как сделать эфект ховер на карточки товаров как на tiffany или sunlight?

    @ned4ded
    Верстка, Фронтенд
    На Tifanny это реализовано с помощью js. Сильно сомневаюсь, что тут нужна доп. библиотека. При наведении на товар добавляется целый блок в секцию товара. После mouseleave (хз, как назвать это по-русски, отведение курсора?) блок удаляется.

    У них использован js, вероятно, для сокращения веса страницы, увеличения скорости рендеринга.

    Как ни странно, на Sunlight это реализованно сильно по-другому. Там через js добавляется только класс к блоку, все остальные его элементы уже заранее собраны.

    Совпадение стилей - случайность, возможно, дизайн кто-то у кого-то стырил (причем весь дизайн, у них совпадает не только эффект при наведении на карточку товара, но много чего еще).

    На чистом css реализовать можно, но без анимации. Что-то вроде:

    .card
        .card__info
        .card__info-more

    .card__info:hover ~ .card__info-more { display: block };


    Все это вы вполне могли узнать сами, используя инструменты разработчика ;)
    Ответ написан
    3 комментария
  • Почему блок с outline не слушается z-index?

    @ned4ded
    Верстка, Фронтенд
    z-index работает только с абсолютной и относительной позиционкой.

    https://jsfiddle.net/ned4ded/cbn4dts3/
    Ответ написан
    Комментировать
  • Как зафиксировать текст на определенном месте страницы (при медиазапросах)?

    @ned4ded
    Верстка, Фронтенд
    Доброго дня.

    Предлагаю обернуть куб в контейнер, контейнеру задать относительное позиционирование (p: relative). Текст с p: absolute внутри такого контейнера будет позиционироваться относительно своего родителя, а не страницы. Если размер контейнера не будет изменяться, то не будет изменяться и позиция текста внутри этого контейнера.
    Ответ написан
    Комментировать
  • Как прижать блоки один блок к низу а другой к правому верхнему углу?

    @ned4ded
    Верстка, Фронтенд
    В общем, проблем несколько:

    1) вы редактируете позиционку div-контейнеров, а не самих svg внутри этих контейнеров.

    2) у вас есть небольшие проблемы с пониманием того, как работает viewBox. 3 и 4 значением свойства задаются ширина и высота svg элемента. Но т.к. у svg нет как таковой ширины и высоты, т.к. это векторная графика, то это больше соотношение ширины ии высоты + их дефолтные значения для ширины равной 100%. Более того, внутренние элементы svg (у вас - path в обоих случаях) начинают свой отсчет координат от верхнего левого угла svg, соответственно, чтобы они полностью поместили в svg контейнер, нужно, чтобы сам контейнер удовлетворял соотношениям сторон, которые были использованы при создании svg-элементов.

    Лучший выход:
    1) Задайте для body

    display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;


    Это позволит нормально расположить див - контейнеры svg.

    2) Задайте самим дивам относительное позиционирование:

    #buttom {
      position: relative;
    }
    
    #top {
      position: relative;
    }


    3) Добавьте svg элементам классы class="top" и class="bottom"

    4) Задайте классам следующие стили, чтобы расположить их внутри див-контейнеров:

    .top {
      position: absolute;
      width: 60%;
      right: 0;
    }
    .bottom {
      position: absolute;
      bottom: 0;
    }


    5) Измените viewBox для обоих svg согласно соотношениям их сторон:

    <!-- Для примера на моем фидле использовано именно такое значение.
    Вообще соотношение ~ равно 5,2 к 1, расчитать можете его делением ширины на высота 
    (или наоборот, как вам удобно) -->
    <svg class="top" viewBox="0 0 690 133" > ... 
    
    <!-- примерно 7,2 к 1 -->
    <svg class="bottom" viewBox="0 0 1170 163" > ...


    Пример тут:
    https://jsfiddle.net/ned4ded/jbw09skj/3/

    Надеюсь, я понял вас правильно и вы имели ввиду именно ресайз svg элементов в зависимости от ширины страницы. Чтобы посмотреть функционирование - сократите ширину iframe элемента с отображением результата
    Ответ написан
    Комментировать
  • Как подгонять макет под Pixel Perfect?

    @ned4ded
    Верстка, Фронтенд
    Доброго дня!

    У этого расширения есть поле "масштаб".

    5a140b32241b1741659528.png

    Вам нужен, судя по всему, масштаб = ~0,85.

    В любом случае, если не получится уменьшить масштаб картинки, то можно уменьшить масштаб отображения окна браузера (ctrl+колесо).
    Ответ написан
    1 комментарий
  • Как сделать автоматическое выравнивание блоков bootstrap по центру?

    @ned4ded
    Верстка, Фронтенд
    В общем, бутстрап 3 имеет свои неприятные особенности, выравнивание колонок - одна из них. Он написан на флоатах (в отличии от 4 версии) и единственное, что может помочь - это, пожалуй, динамиечское присвоение классов через js или на бэке. Это неприятный костыль, но флоатам нельзя просто так взять и напсиать: эй ты держись в середке.

    В чем суть: вам нужен js который при загрузке страницы будет считать количество загруженных элементов в каталоге. Если число кратно 3 - все огонь. Если остатаются 2 элемента, то предпоследнему элементу присваивается класс col-*-offset-2, если остается 1 элемент, то последнему элементу - col-*-offset-4. Офсеты добавляют margin слева любой колонке, имитируя нахождение n-го количества колонок слева от него.
    Вместо звездочки * - брейкпоинт (зависит от вашей сетки). По семантике работают как обычные колонки.

    Второй вариант: делать не через оффсеты, а через изменение класса колонки.
    Т.е. в случае двух элементов - col-*-6, в случае 1 - col-*-12
    Ответ написан
  • Приложение для верстки html-страниц?

    @ned4ded
    Верстка, Фронтенд
    Помимо ide, которые вам уже посоветовали, есть возможность использовать:

    1) таск ранер с BrowserSync или какой иной приблудой, позволяющей обновлять страницу после сохранения файла (browser livereload).

    Этот вариант требует знания js и умения настроить таскранер.

    2) в атоме (вероятно, как и в некоторых других редакторах, но эт не точно) есть возможность скачать доп. плагин, отображающий страницу и обновляющий ее после сохранения файла. Тут без ссылки, сорян.

    3) Есть редактор кода от adobe - Dreamweaver, в нем есть встроенный (из коробки) live preview. Сам редактор мне не нравится из-за своей негибкости и костности, но ты попробуй, может тебе понравится ;)
    Ответ написан
    Комментировать
  • Как сделать чтобы блоки не сдвигались при уменьшении ширины?

    @ned4ded
    Верстка, Фронтенд
    Добрый день! У вас огромные проблемы с разметкой, она начинает ехать уже при разрешении в 1700px.

    Но отвечая на конкретный вопрос: сделать это можно с помощью свойства min-width: 1200px для того блока, который не должен сужаться. Стоит добавить, что в данном случае будет лучше, если весь сайт не будет изменяться при ширине меньше 1200px. Более того, на всех устройствах с шириной окна браузера менее 1200px будет появляться горизонтальная прокрутка.
    Ответ написан
    Комментировать
  • Как применить фон ко всей странице сайта?

    @ned4ded
    Верстка, Фронтенд
    Добрый день!

    К сожалению, бесшевно подогнать такой фон невозможно, тому есть объективные причины:

    1) Ваш фон имеет неравномерный параметр inner shadow.
    2) Высота секций отличается друг от друга, фон каждый секции будет обрезаться в рандомном, непредсказуемом месте (bg-size: cover);
    3) Видно, что фон на картинке заканчивается не в том месте паттерна, в котором начинается (т.е. если поставить две эти картинки друг на друга, то они не будут стыковаться).

    Что можно сделать? Вам придется поработать с изображением, я предполагаю, что вы владеете ps и он у вас установлен. И тут возможно два варианта развития событий:

    А) Простой. У вас в psd шаблоне картинка фона и <конуса-колуна + стикера> не объединены и вы можете ее экспортировать отдельно. Тогда вам нужно:
    а.1) Создать из фона паттерн. Делать это придется подбором, если дизайнер вам не подвез паттерна.
    а.2) Применить паттерн фона к body с bg-repeat: repeat. Если фон имеет "вклееную" внутреннюю тень, то не забудьте осветлить изображение, чтобы оно было идентично по цветовой политре середине bg, или создайте паттерн из середины (как будет удобнее);
    а.3) Наложить на каждую секцию inner shadow.

    Б) Сложный случай, если ваш фон с конус-колуном представлен единым, неразделенным файлом. Тогда вам нужно выполнить весь А и подбирать bg-position для body попиксельно. Любое увеличение высоты первой секции повлечен за собой появление шва. Но выбора особого у вас нет.

    PS bg-size: cover скалирует изображение, подгоняя его под размер блока. Это еще одна проблема, которая вызовет шев. Уберите cover, поставьте 100%; В этом случае без repeat у вас появятся пустые области сверху и снизу, прикрыть которые можно тем же паттерном, что я описал в пунктах А-Б.
    Ответ написан