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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    прозрачность?
    Да.
    Ответ написан
  • Стоит ли оборачивать button в div?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Думаю, что особого смысла в "оборачивании" в контексте Вашего вопроса - нет. У любого из известных мне тегов, в т.к. и у <button/> можно выставить любые параметры, в т.ч. касающиеся его позиционирования.

    Отцентрировать его можно указав родительскому блоку display: block;, а самой кнопке margin: auto; или же отцентрировать её через flex...
    Ответ написан
  • Как выравнять все столбцы в таблице?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Подскажите, как можно исправить?

    1. Задавать столбцам фиксированную ширину
    или
    2. Использовать одну таблицу
    Ответ написан
  • Как сделать на чистом css, когда в родительском пункте есть разделы, то через before показать стрелочку?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Если я правильно понимаю Ваш вопрос, то либо через селектор :has(), который пока из черновиков не вышел. Либо рисуйте эту самую стрелочку у первого пункта, который "есть" (а если его нет, то и стрелочки соотв. не будет). Либо через известное место... Но последнее я бы не рекомендовал.
    Ответ написан
  • Какие особенности верстки под iPhone и как можно тестировать без данной техники?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Какие особенности верстки под iPhone и как можно тестировать без данной техники?
    Особенности вёрстки в рамках статьи или тем более ответа - Вы вряд ли сможете найти, по причине большой обширности данного материала и сложности его изложения, особенно с учётом того, что разные устройства/браузеры могут давать различные "артефакты" (назовём это так).

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

    Ну и конечно, не забывайте предварительно тестировать Вашу вёрстку в "мобильном" режиме Хрома (о собственно писали выше).
    Ответ написан
  • Почему высота не работает?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    почему не срабатывает высота у wrap,
    По тому, что у родительского (по отношению к нему) элемента не задана высота. Проценты - это относительная величина, в данном случае, она будет равна 100% height родителя, а height у родителя не задан(а).

    P.S. Если добавить родителю height: 100%;, думаю проблема решиться.
    Ответ написан
  • Видимый блок внутри скрытого блока?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    можно ли header_promo сделать видимым?
    Можно, но не так как Вы это пытаетесь сделать. Я думаю, Вам стоит просто вынести этот блок выше или назначать (не)видимость нужных блоков на каждом варианте разрешения отдельно, либо скрывать прочие (соседние) ненужные блоки, а этот блок оставить как он есть.

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

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Я бы сделал например так:
    Ответ написан
  • Почему происходит задержка анимации?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Почему происходит задержка анимации?
    По тому, что у блока который Вы сворачиваете не фиксированная высота (точнее по тому, что вы меняете её на height: auto). И в Вашем случае, он сворачивается так, буд-то он имел высоту 500px, а не ту, которую он имел фактически (если вы зададите ему фактическую высоту в 500px или растянете его с помощью содержимого до 500px - задержки не будет).

    "Хорошего" решения - нет. Единственное решение в данном случае - не используйте height: auto.
    Ответ написан
  • Где брать уникальные иконочные шриты с макета?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Где брать уникальные иконочные шриты с макета?
    У дизайнера.

    создаёте ли вы сами иконочные шрифты вытаскивая svg с макета
    Из личного опыта - нет. Как дизайнер так и делаем. Если дизайнер прислал не так, то в следующий раз пришлют нового дизайнера. Дизайнер сделал иконки шрифтом - значит так и верстаем. Сделал их SVG'шкой? Значит верстаем SVG'шкой. Сделал PNG - соответственно... Если он что-то не прислал - не грех конечно ему напомнить, что "а пришли ка мне "вот это".

    P.S. Поиском для этих целей настоятельно не рекомендую пользоваться, по тому, что тот шрифт который использовал дизайнер и тот который Вы найдёте в поисковике, с таким же точно названием - далеко не факт, что будут одинаковыми, и далеко не факт, что в найденном вами шрифте будут все символы. В частности, неоднократно были случаи, когда у дизайнера есть какой-то символ в "его" шрифте (например, символ "рубля"), а в "моём" такого символа почему-то не оказывалось... Откуда он взялся у него - уже другой вопрос, но как факт...
    Ответ написан
  • Как сделать обтекание картинок с нестандартным позиционированием?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Если я правильно понял Ваш вопрос, то вам нужен CSS Shapes. Но, на тот момент, когда я пытался его использовать последний раз - поддерживался браузерами он не очень хорошо...
    Ответ написан
  • Как задать динамическую высоту у absolute?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    По моему, вот здесь на Ваш вопрос уже ответили...
    Ответ написан
  • В каких случаях работает display: inline-grid?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Пишу родителю display: inline-grid и дети остаются так же в положении column.
    Я думаю, помимо типа отображения, стоит ещё и колонки например задать? Например так: grid-template-columns: 1fr 1fr 1fr; (ну и прочие необходимые параметры, по мере необходимости)
    Ответ написан
  • Как правильно расположить стили CSS по папкам если их много?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Почитайте про методологии CSS (я думаю тут описаны не все, но для начала уже что-то). Среди прочего ряд методологий описывает так же и структуру хранения CSS-файлов ну и в целом, я думаю Вам будет полезно ознакомиться с тем, что уже придумали другие, ну и в будущем около-подобных вопросов будет меньше :)
    Ответ написан
  • Расположение элементов в flex?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Например, вот так.
    Ответ написан
  • Есть ли альтернативный подход для верстки?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Есть какие-любо предложения? Неужели в 2019 году люди продолжают верстать вручную?
    Я конечно могу ошибаться, но насколько мне известно - на данный момент всё ещё продолжают. Относительно недавно (месяца 2-3 назад, приблизительно) сталкивался с подобным вопросом и... могу сказать, что "абсолютное позиционирование элементов на странице" - это не ключевая проблема. В том смысле, что какой-то софт эту проблему решать уже научился (какой именно - сейчас точно не вспомню, под "тест" попало всё, что уадалось найти в интернете, включая различные онлайн-сервисы). Основная проблема, как я уже говорил сместилась в с "абсолютного позиционирования" в сторону г-о кода, все образцы в той или иной мере обильно гадили в конечный код.

    Есть много разных вариантов, облегчающих жизнь в целом, которые Вам наверняка известны не хуже чем мне, такие как препроцессоры, подготовка различных шаблонов, сборщики и т.д. но, того, чего Вы хотите, боюсь пока ещё не придумали и судя по всему придумывать не спешат. В мои руки (для анализа) попадал даже код с шильдиком "создано с помощью нейросети", который не многим лучше чем то, что генерирует среднестатистическая программа аналогичного направления.

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

    P.S.
    не застал табличную верстку, а может быть оно и к лучшему
    Я застал времена, когда CSS ещё не придумали :)
    Ответ написан
  • Возможно ли сделать такой фон средствами CSS?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Добрый день. Возможно ли сделать такой фон средствами CSS? Или же будет лучше сохранить картинку с этими полосками и все?
    Добрый день. Возможно. Я бы сделал, пожалуй, через repeating-linear-gradient так как меньше картинок = меньше запросов к серверу ну и я уверен, что CSS-будет более компактным, чем аналогичная картинка.
    Ответ написан
  • Правильно ли я делаю?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Подскажите, как лучше верстать проекты. Может быть вы посоветуете другие подходы в разработке
    Как лучше - зависит от конкретного случая, но, когда я занимался вёрсткой это выглядело примерно так:
    0. Используем препроцессор, какой-нибудь, например SASS (SCSS)
    1. Благодаря препроцессору, среди прочего - Вы можете дробить файлы стилей на сколь угодное число оных (хотя, я бы так делать не стал)
    2. CSS (при нашем подходе) мог делиться на следующие части:
    • Файл с основными (базовыми) стилями (в отдельных случаях он может быть включён в inline-виде прямо в заголовок страницы)
    • Файл с дополнительными стилями
    • Файл с общими медиа-запросами (по необходимости)
    • Файлы с медиа-запросами на каждое разрешение (каждый файл грузится в зависимости от разрешения устройства)
    • Файл с темой (если таковые есть)


    Касательно файлов с медиа-запросами, в общей сложности выглядит это примерно так: сначала делается вёрстка в базовом разрешении (либо "мобильная", либо "десктопная"), а потом пишутся общие стили для адаптации оной, действительные для всех разрешений, потом пишется "слой корректировок" под каждое отдельно взятое разрешение (по необходимости).

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

    Так же, рекомендую ознакомиться со списком методологий (от себя к этому списку хочу добавить то, что подход "гадить в HTML-код, создавая при этом элементы без которых легко можно обойтись" - нарушает основополагающие рекомендации CSS-основоположников, по этому, в большинстве случаев, методологии пропагандирующие подобный подход нами даже не рассматриваются).
    Ответ написан
  • Как вывести такое форматирование на php?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    Данные будут генерится автоматом, как сделать чтоб под текст такое форматирование было?
    Возможно я чего-то не знаю, но первый способ который приходит мне в голову, в рамках "PHP" и "что бы универсально было" - это: отрисовывать каждую надпись нужным шрифтом на картинке, потом измерять её ширину, отдельно измерять ширину точки (или нескольких точек подряд, таким же способом, по картинке). Аналогичным принципом можно так же рассчитать и переносы.

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

    Самый простой вариант - использовать моноширинный шрифт (коих много), для отображения такой информации, тогда "подгонять" ничего не придётся, достаточно будет считать кол-во букв и легко высчитывать их ширину.

    Выше описанные варианты касаются именно "PHP" (хотя и очень условно), но я бы всё-же сделал отображение информации такого характера на уровне HTML/CSS, они куда больше приспособлены для решения таких задач.
    Ответ написан
  • Какие медиа запросы лучше сделать при верстке сайта?

    Wolfnsex
    @Wolfnsex Куратор тега CSS
    Если не хочешь быть первым - не вставай в очередь!
    То есть, ожидается, что от дисктопной версии до мобильной будет резина, но если блоки уже не могут дальше сжиматься, это начинает выглядеть плохо, то я могу ведь раньше перестроить их, как в мобильной версии?
    Вы можете сделать перестроение хоть на каждый пиксель ширины (высоты и т.п.), или указывать диапазоны (min/max). Если я правильно понял Ваш вопрос - Вы можете сделать перестроение отдельно взятых элементов начиная с разрешение в котором [как Вы это обозначили] "блоки уже не могут дальше сжиматься", т.е. адаптировать эти самые блоки "отдельно" от других элементов.

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