Задать вопрос
Ответы пользователя по тегу Вёрстка
  • Как сделать background в виде такой полосы?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    самое простое - линейный градиент на общий блок
    Ответ написан
    Комментировать
  • Изображения вставлены через атрибут тега style="background-image: url()". Почему?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Вы не усмотрели самого главного:
    5c1a74d4749cd428813580.png

    Чтобы оценить, смотрим уровень браузерной поддержки здесь https://caniuse.com/#feat=object-fit
    и здесь https://caniuse.com/#feat=background-img-opts

    И понимаем, что надежнее вставить картинку фоном, нежели использовать object-fit на теге img
    Ответ написан
    1 комментарий
  • Как с CSS скрыть все элементы порядковый номер которых больше 4-х?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    https://jsfiddle.net/3ryg76hb/1/

    nth-of-type использовать на элементах списка немного бессмысленно =) Кроме элементов li список не может содержать ничего другого. Достаточно nth-child.
    Ответ написан
    3 комментария
  • Как Вы относитесь к SMACSS?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Css классы вообще не несут никакой семантики. Хоть как обзывайте, всем пофиг. Если вы говорите о "понятности" для программиста/верстальщика, то тут вы правы — мнения разные.
    Что такое .title? Заголовок. Какой заголовок? А хз...
    А что такое .product-item__title? Это заголовок блока в списке товаров. Very good.

    Окей. Но мы же видим в разметке class="title _product-item". А в css мы это видим? Нет. У нас голый класс .title {}, и еще где-то составной есть .title._product-item. Очевидно, что .title используется с другими блоками тоже. Пришел новый человек с задачей поменять поменять цвет тайтлов ну допустим в отзывах. Он откроет страницу, посмотрит в инспектор, увидит что цвет заголовка задан в классе .title, а про .title._product-item он даже не в курсе будет, это на другой странице сайта, в css через 1000 строк. Он просто поменяет цвет в .title. А потом выяснится что заголовки в товарах тоже поменяли цвет. А не надо было.

    Короче, ребята, зачем вы ищете и выдумываете разную хрень? Всё уже придумано до вас — БЭМ. И не дураки это придумывали, а люди с большим опытом верстки и поддержки проектов разного уровня. А претензии типа "мне не нравятся длинные названия классов" — ну право же, детский сад, надо взрослеть.

    Ну и можно слегка поэкспериментировать, объединив SMACSS с BEM.
    Оставить уровни base и layout. Оставить уровень modules — по сути это будут БЭМ-блоки. Стейты выкинуть — состояния блока лучше в нем самом описывать. Темы — по желанию.

    если не использовать SASS - а это зачастую не используется, так как работаю часто с готовыми проектами.

    Если приходится лезть в готовый проект, то стоит изучить его и придерживаться стиля заданного автором. Если там нет никакого стиля, то сам бог велел наговнокодить =)) Ну или отрефакторить, если заказчик готов платить.
    Ответ написан
    1 комментарий
  • Эти картинки лучше делать через тэг img(или псевдоэлемент)?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Именно эти картинки (иконки) лучше всего загнать в символьный спрайт и вставлять в html особой конструкцией (покажу ниже).

    Символьный спрайт — это один svg файл с набором множества символов. Из каждой иконки достается картинка (отбрасывается вся служебная инфа) и добавляется в общий файл тегом symbol. Такой файл-спрайт будет выглядеть примерно так:

    <?xml version="1.0" encoding="utf-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
    	<symbol viewBox="0 0 60 60" id="accounting" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    
    	<symbol viewBox="0 0 60 60" id="archive" xmlns="http://www.w3.org/2000/svg">
    		<path d="M59 20....."/>
    		<path d="M35 32....."/>
    		<path d="M38 5h....."/>
    	</symbol>
    </svg>


    Обратите внимание на идентификаторы символов — по ним будут вставляться иконки в html. Также обратите внимание на отсутствие стилизующих атрибутов и атрибутов style в элементах (path) картинки. Это важно, если вы хотите задавать цвет картинки через css.

    Картинка из такого спрайта вставляется в html следующей конструкцией:

    <svg class="my-icon">
        <use xlink:href="images/svg-sprite.svg#archive"></use>
    </svg>


    Здесь указывается путь к картинке и после решетки тот самый идентификатор символа, указанный внутри спрайта.

    Теперь вы можете полностью управлять вставленной картинкой стилями:

    .my-icon {
      width: 50px;
      height: 50px;
      fill: orange; /* Цвет заливки */
      stroke: blue; /* Цвет обводки */
    }


    Вы можете задать цвет, равным currentColor, и тогда иконка будет того же цвета, что и свойство color. Это бывает удобно.

    .my-icon {
      fill: currentColor; /* Цвет заливки */
    }


    Примечание. В IE есть небольшие проблемы с этим способом. СВГ-спрайт должен быть вставлен в тело страницы. Рекомендую для устранения проблемы воспользоваться скриптом svg4everybody.
    Ответ написан
    Комментировать
  • Сетки, с чем их едят?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Сетка нужна, в первую очередь, дизайнеру. Чтобы выстроить элементы дизайна ровненько, по феншую, на всех страницах одинаково — блоки на скачут в положениях и размерах.

    Верстальщик, в свою очередь, видит, что дизайн выстроен по сетке, и решает упростить себе задачу верстки. Он пишет базовые классы для разметки на странице колонок и размещает блоки в них. Отсюда отпадает необходимость сидеть с линейкой и выравнивать блоки по дизайну.

    Всё остальное — следствие. Верстальщику становится мало просто классов для описания раскладки макета. Он решает приправить их медиа-запросами, чтобы и базовая адаптивность страницы была что называется "из-коробки". Опять же для упрощения и ускорения своего труда. Потом решает еще что-то добавить, к примеру смещение колонок и т.п.

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

    Потом появились дизайнеры, которые стали рисовать свои макеты "под бутстрап" =) Ничего плохого, это ускоряет (а значит удешевляет) разработку конечного продукта. Но нужно понимать, что дизайн первичен. А сетку можно любую сделать.
    Ответ написан
    Комментировать
  • Как исправить некорректное поведение блока при наведении в браузерах Chromium?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Ощущение, что браузер самостоятельно определяет в какую сторону "расширить" контент (увеличивающийся тег параграфа) так, чтобы он был на виду. А из-за флексов возникает визуального ощущение смещения соседнего контента. На самом деле изменяется скролл страницы.

    Интересно, что при наличии в области видимости других элементов, такого поведения не наблюдается. https://jsfiddle.net/s9n85rd7/106/

    Вряд ли это можно исправить.
    Ответ написан
    1 комментарий
  • А для чего @retina-dpi:144dpi; @retina-dppx:1.5dppx; и как часто используется и для чего @media(min-resolution: ??

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    про retina-dpi:144dpi слышу впервые. а вот мин-резолюшн это вполне нормальное правило. Используется для подгонки дизайна под разную плотность дисплеев
    Ответ написан
    6 комментариев
  • "Колоночная простановка" flexbox?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Флексы так не умеют.
    Как вариант, можете попробовать использовать колоночную раскладку.
    https://jsfiddle.net/0o3cps48/1/
    Ответ написан
  • Как в бутстрапе сделать контейнер в контейнере или такой отступ?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Не в ту сторону смотрите скорее всего.
    Во-первых, эти отступы актуальны только на больших экранах
    Во-вторых, вряд ли принципиально то, что они равны ширине колонки.

    Просто сделайте свой кастомный контейнер с фиксированными паддингами, пикселей 70-80.

    .my-container {
      max-width: 1300px;
      margin: auto;
    
      @include media-breakpoint-up(xl){
        padding: 0 80px;
      }
    }
    Ответ написан
    Комментировать
  • Экспортирую изображение с фотошопа, но получаю без обрезов, получаю обычное изображение. Как правильно экспортировать?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Картинка должна быть прямоугольная, без вырезов. Чтобы ее можно было легко заменить. А всё остальное уже делается средствами css

    Примерно так https://codepen.io/delphinpro/pen/xaoEZx
    Ответ написан
    2 комментария
  • Как убрать отступы под лого и сделать, чтобы заползало на нижний бэграунд?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Примерно так https://codepen.io/anon/pen/NLVQQm
    Ответ написан
    Комментировать
  • Как убрать отступы у текста?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Да изучите вы уже как устроены шрифты... css-live.ru/css/metriki-shrifta-line-height-vertic...
    Постоянно об одном и том же спрашивают.
    Ответ написан
    Комментировать
  • Как можно с помощью css сделать закругление углов как показано в картинке?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    jsfiddle.net/bx8p2gk6

    Это чисто верстка. Промаркировать ячейки нужными классами отдельная алгоритмическая задача.
    Ответ написан
    Комментировать
  • Для чего делать такие размеры?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Смотрите ситуацию. Я человек с плохим зрением. В моём браузере стоит увеличенный размер шрифта. Я открываю сайт в котором верстальщик шрифты указал как надо, в rem, а на размеры/отступы забил и задал их в пикселях. Получается уродство:

    5b935705491c9619831053.png

    Потом верстальщик стал умнее, и переписал размеры/отступы в rem'ы и сразу всё стало очень хорошо:

    hzhezdpprfkudyrsgnvz0iz1bhs.png

    Понятно?
    Ответ написан
    3 комментария
  • Зачем дизайнеру подстраиваться под верстальщика в случае с Bootstrap?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Вы абсолютно правы во всём.
    И если у вас, как у дизайнера, хорошо продуманный макет на выходе, пусть и "нестандартный", у нормального верстальщика никаких, я акцентирую, никаких проблем при верстке не возникнет.

    С другой стороны, некоторые комментаторы тоже правы по-своему. Если на первом месте для проекта стоит цена, то оптимальнее идти по проторенной дорожке.

    Итог в том, что придется выбирать: ширпотреб или авторская работа. А выбирать, понятно, заказчику.
    Ответ написан
    Комментировать
  • Не работает overflow, bootstrap 4, в чем проблема??

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Отвечу только на последний вопрос
    Ставил overflow-x на хедер, но тогда меню обрезается вообще полностью по все осям и Х, и Y, что за бред? почему по Y вы высоту меню обрезается-то??


    Если вы задаёте свойство overflow, неважно, по одной оси, или по обеим, то контент в любом случае будет обрезан. Вы можете лишь контролировать как он будет обработан — обрезан (hidden), либо появится полоса прокрутки (scroll/auto). Значение visible заданное лишь по одной оси не сработает.

    Касаемо основного вопроса — лучше бы приложили пример в песочнице, чем скриншоты. Вероятность получения ответа существенно возросла бы.
    Ответ написан
    Комментировать
  • Чем адаптивное меню на чистом css лучше такого же меню на js?

    delphinpro
    @delphinpro Куратор тега Вёрстка
    frontend developer
    Если задумка дизайнера позволяет реализовать задуманное без джаваскрипта, то понятно, что лучше реализовать без него.

    Если нет, и джаваскрипт необходим для реализации, то в этом нет абсолютно ничего страшного.

    В обоих случаях действует одно и то же правило: не делайте через жопу.
    Ответ написан
    4 комментария
  • Универсальная верстка для sidebar-content-sidebar?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Заворачиваем все в контейнер и делаем что хотим

    <div class="layout">
      <main class="layout__main"></main>
      <aside class="layout__aside1"></aside>
      <aside class="layout__aside2"></aside>
    </div>


    .layout {
      display: flex;
    
      &__main   { order: 2; width: auto;  flex: 1 0 auto; }
      &__aside1 { order: 1; width: 300px; flex: 0 0 auto; }
      &__aside2 { order: 3; width: 200px; flex: 0 0 auto; }
    }

    Меняя order, меняем порядок
    Ответ написан