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

    serjikz
    @serjikz
    web-developer
    Можно сделать полностью резиновый сайт, который будет вменяемо смотреться на любом разрешении и получится как раз то, что вы хотите.

    Да, будет много @media, в частности сейчас у нас на проекте 21 media с изменениями размера шрифта, а все размеры полностью в rem и сайт резиновый.

    Да, это долбеж с размерами шрифта, да есть нюансы с выстраиванием некоторых элементов, но это вполне реально и сайт выглядит правильно. Хочется прям что-то дико огромное типа 8k – пожалуйста, просто больше @media.

    По итогу ваша задача – выбрать нужные размеры для всех разрешений, посмотреть, на каких @media нужно менять размер шрифта и на какое значение (шаг в px у нас к примеру иногда 2 иногда 1.5 иногда 1).

    Если хочется пример – ну вот такой балаган будет:
    Хотите вы с этим возиться? Если да – то видимо вам хорошо платят за это, но за 100k я б таким не морочился.
    Ответ написан
  • Как сделать, чтобы блок не уходил за пределы родительского?

    serjikz
    @serjikz
    web-developer
    1. Измерить блок-родитель
    2. Установить ограничение в точке, где будет останавливаться передвигающийся (ширина родитея наверно отнять сколько-то px так как у вас рамка там ну и точка остановки может должна быть ещё левее чем рамка начинается, вычислить это так)
    3. При движении вычислять каждый раз координаты правой грани передвигающегося блока и если координаты правой грани равны или больше чем ограничение - то приравнивать позицию left как координату ограничения минус ширина передвигающегося блока.

    Это решит выпадания из родителя слева и справа.

    Нужно чтоб не выпадал из потока (грубо говоря вниз не уезжал) - задайте элементу position: relative; или используйте margin-left/translateX для передвижения

    В целом тут js-а не много. Писать готовое решение не хочу вам, чтоб подумали и погуглили самостоятельно, как это можно сделать всё))

    CSS тут не поможет, position тут не причем, двигать можно хоть меняя margin-left, хоть translateX(), хоть будет передвигаемый с absolute (тогда блок родитель схлопнется, имейте ввиду, абсолютное позиционирование выводит блок из потока), хоть с relative, как угодно.
    Ответ написан
    Комментировать
  • Почему текст блока с абсолютным позиционированием внутри flex контейнера не растягивается на всю ширину?

    serjikz
    @serjikz
    web-developer
    Проблема не во flex-контейнере, а в особенности абсолютного позиционирования и центрирования таким образом (через transform: translatex()).

    Любой блок, спозиционированный абсолютно и которому не даны размеры, будет всегда пытаться ужать самого себя (и контент в себе) если он вылазит за родителя. Уберите transform - увидите, что блок у вас прилипает к правому краю вашего элемента и он уже в 2 строки сразу. Если вы сделаете left меньше (в вашем случае хотя бы 48%)- текст будет в одну строку даже с transform (но эффекта центрирования конечно тогда не будет). Всё из-за особенности позиционирования. Если использовать right - будет тоже самое.

    В то же время свойство transform делает следующее - оно не перемещает сам по себе элемент, а перемещает, можно сказать, отражение этого элемента. То есть сам по себе элемент остается на своём месте (left: 50%;) а transform просто двигает его "отражение" влево. Грубо говоря браузер фоткает ваш элемент, скрывает его и фотку двигает на нужное расстояние. Элемент то у вас в 2 строки - значит и на "фотке" он будет в 2 строки.

    Решить это можно только путем задания ширины блоку, который позиционируется абсолютно (задать ему нужную ширину).

    Также можно ещё как вариант центрировать блок через отрицательный левый margin, задавая точное значение в px (половину от ширины блока, который позиционируете).

    Если вам нужна резина - подумайте над тем, чтобы отказаться от абсолютного позиционирования. Если вам нужна и резина и абсолютное позиционирование - делайте ширину этому блоку 100% (будет он тянуться на всю ширину его родителя).

    Оч надеюсь, что объяснил понятно, в тексте такие штуки объяснять достаточно проблематично.
    Ответ написан
    Комментировать
  • Как настроить div?

    serjikz
    @serjikz
    web-developer
    Для красного display: flex; justify-content: space-around; и нужные padding сверху и снизу (может еще справа и слева понадобятся). Для зеленых - размеры просто, для синего - align-self: center; ну и тоже размеры если надо

    Советую глянуть сюда: https://webref.ru/css/align-self и поклацать примеры.
    Ответ написан
  • Несколько вопросов по HTML и CSS?

    serjikz
    @serjikz
    web-developer
    Я считаю что нужно полное разделение (собственно, чем и является компонентный подход). Без глобальных стилей жить вряд ли будет удобно. К примеру от normalize я не могу ну вот никак отказаться. Обертки (некоторые) в любом случае будут лишние у вас и будут загромождать код, к сожалению пока мы живем с флексами и флоатами не имея гридов - придется с этим мириться.

    Многие вовсе отказываются от БЭМ когда используют компонентный подход и обзывают элементы абракадаброй. Я лично от него не могу отказаться. Да, smart-grid, возможно, стоит попробовать, но опять же это не универсальное решение, как и бутстрап (ну вы меня понимаете), потому что замечательные дизайнеры и заказчики хотят от нас добиться феерических вещей, которые будут кружить голову каждого посетителя, который заходит на наш сайт.

    Универсального, к сожалению, а может и к счастью, вы не найдете. К сожалению - потому что хотелось бы все делать просто и быстро. К счастью - потому что работа за счет этой "неуниверсальности" не скучная и, естественно, прибыльная, так как не каждого можно научить хорошо верстать.

    Вспомните (если конечно застали) верстку таблицами. Та еще жуть была, но ничего, работали как-то. Мое личное мнение - работать как работаем, просто не отставать от быстро идущего паровоза под названием Front-end. Идти к идеалу и добиваться универсальности мы будем еще долго, если вообще придем когда-нибудь с нашими все теми же дизайнерами и заказчиками.
    Ответ написан
    8 комментариев
  • Как изменить высоту iframe через @media?

    serjikz
    @serjikz
    web-developer
    А вы не пробовали просто для iframe в css задать ширину и высоту?. Либо можете задать блоку оборачивающему нужные параметры а также position: relative и потом для iframe 100% высота и ширина а также абсолютное позиционирование.
    Ответ написан
    3 комментария
  • Как исправить проблему?

    serjikz
    @serjikz
    web-developer
    Если не хотите менять внешне никак - то тогда просто поставьте перед "на" <br>. Для десктопов скройте его через display: none; а для мобильных наоборот покажите. Этого будет более чем достаточно.
    Ответ написан
    Комментировать
  • Кто в production использует flexbox и какие хаки используете для определенных свойств?

    serjikz
    @serjikz
    web-developer
    htmlacademy перешли уже полностью на flexbox даже на своем базовом интенсиве html и css. Год назад еще учили float и inline-block. Вопрос не в том, надо переходить или нет. Надо использовать нужные техники в нужных местах. Я около 2х лет использую flex во всех своих работах (и в фриланс и на постоянке). Да, проблемы есть и они очень и очень забавны местами и решение этих проблем тоже имеется. К примеру есть проблема следующая - на iOS 11 в сафари сайт смотрится отлично, на iOS 10 нет. И думай в чем дело. Но опять же подобные проблемы выявляются только тестами и решаются без особого труда. IE 10-11 и Edge - тоже самое, только тесты и исправлять все что там не так. Опять же вряд ли вам нужно делать pixel perfect проекты для этих браузеров и поэтому проблемы использования flex я не вижу.
    Ответ написан
    Комментировать
  • Как лучше отверстать это?

    serjikz
    @serjikz
    web-developer
    Использовать flex. Конечно же, на мобильном разрешении у вас будет перенос всего этого и блоки будут друг под другом
    Ответ написан
  • Вопрос о препроцессоре less + БЭМ?

    serjikz
    @serjikz
    web-developer
    Пред P.S. Для начала я очень надеюсь что вы используете normalize в своих проектах

    1. Вы можете использовать чистый css в less файлах, но я сомневаюсь, что вам будет не интересно работать с вложенностью, которую позволяет сделать less.
    Этот less
    .footer {
        color: #fff;
        a {
            font-size: 24px;
        }
    }

    развернется в .footer {color: #fff;} .footer a {font-size:24px} это просто пример, я думаю вы понимаете в чем плюс такого подхода, а если еще работать с & то вообще все хорошо и удобно как по мне. Также использование переменных и миксинов тоже очень и очень порой помогает.
    Итог - никто вас не наругает за то, что у вас чистый css в less файлах, но стремитесь less узнавать и упрощать свой код, как раз используя возможности less (надеемся что многое скоро будет в чистом CSS, но до этого надо дожить)

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

    Или вы пытаетесь сделать какой-то костяк общих компонентов, при этом постоянно работаете с лендингами абсолютно разного дизайна? Тогда ваш вопрос понятен и вам не стоит пытаться тягать в абсолютно разные проекты одни и те же файлы. Запаритесь так переписывать каждый раз все стили. Для каждого проекта свой костяк файлов, которые для него нужны. Конечно, какой-то один, может два, а может 3 файла у вас будут одинаковыми на всех проектах, где у вас общие стили, которые вы используете всегда (у меня к примеру миксины, кнопки ну и конечно тот же normalise)

    3. А вы пробовали адаптивить страницы вообще без бутстрапа, а просто руками? Попробуйте, тогда ваш вопрос решится сам собой, иначе вы пытаетесь подгрузить бутстрап, использовать при этом его не будете, зато загрузите свой .css файл итоговый абсолютно не нужным кодом, который только место будет занимать.

    Также почитайте, что такое миксины. Если вы просто будете писать @media (max-width: 767px) это не миксин, а просто медиа-выражение. Миксины - совсем другая вещь.
    Ответ написан
    2 комментария
  • Премущества и недостатки Google Fonts?

    serjikz
    @serjikz
    web-developer
    Советую глянуть хоть и старую, но хорошую статью по шрифтам от google https://habrahabr.ru/post/159907/

    По поводу SEO что-то я ничего не слышал за такое)) Оно никак не связано с google fonts. На счет минусов - в google есть достаточное количество косячных шрифтов, поэтому надо смотреть каждый раз, не с косяком ли у вас шрифт (сравнить с макетом от дизайнера и с тем что у вас в верстке получается, если с косяком - подключать руками с сервера).
    Ответ написан
  • Как правильно верстать Landing Page?

    serjikz
    @serjikz
    web-developer
    1. Как в дизайне. Если заказчик/дизайнер сказал делать так - значит так. Если нет - значит нет.
    2. Как в дизайне (1920 не видел ширины центровщика ни разу, смотри вспомогательные линии голубого цвета в документе от края контента до края контента)
    3. Опять же - в дизайне как сделано? Делайте так, как сделал дизайнер.
    Ответ написан
    2 комментария
  • Правильно ли avocode отображает line-height?

    serjikz
    @serjikz
    web-developer
    Проверить проще всего - откройте в фотошопе и посмотрите, правильно или нет. Вам тут никто не скажет однозначно, правильно ли в вашем случае показывает потому что макета нет. Но такой line-height быть не должен это точно, как вам ответили в комментарии - это косяк дизайнера возможно.
    Ответ написан
    Комментировать
  • Как правильно и быстро определить тень из photoshop'a?

    serjikz
    @serjikz
    web-developer
    Если ФШ более менее новый - правой кнопкой на слое с тенью, в менюшке всплывшей выбрать "Копировать css".
    Ответ написан
    Комментировать
  • Можно ли наложить картинки друг на друга с помощью flexbox?

    serjikz
    @serjikz
    web-developer
    Я так понял это что-то типа слайдера изображений. Флексы так не умеют. Ищите подходящий скрипт слайдера под это дело
    Ответ написан
    Комментировать
  • Как в iframe менять css?

    serjikz
    @serjikz
    web-developer
    Этого нельзя делать, если страница загружена с чужого домена.
    Ответ написан
    Комментировать
  • Как сверстать такие декоративные полоски?

    serjikz
    @serjikz
    web-developer
    https://jsfiddle.net/ks74ddfj/

    задумка думаю ясна. У span (можно и не span а любой тег, просто он должен быть inline-block) ставим фон и обязательно ему z-index и для after z-index.

    Либо второй вариант - обе полоски через псевдоэлементы но это не универсальный пример получится (не выйдет воткнуть любой текст, в пример на который скинул ссылку можно воткнуть любой длины текст и все будет хорошо отображаться)
    Ответ написан
    Комментировать
  • Ка сделать разный тип и цвет шрифта в теге option тега select?

    serjikz
    @serjikz
    web-developer
    Лучше сделать кастомный select и с ним возиться, чем со стандартным select. Это не сложно. Вот тут посмотри zsa-studio.ru/project и разметку и jQuery в файле main.js
    Ответ написан
    Комментировать
  • Верстаю несколько страниц и подключать к разным страницам разные файлы стилей или писать все в одном?

    serjikz
    @serjikz
    web-developer
    1. Если элементы схожи и можно какие-то стили не писать снова а применить повторно (а скорей всего так и есть, если многостраничный сайт) - все в одном и подключать на всех страницах. Ну и конечно если смысловая часть от страницы к странице одна (то есть логично к примеру на тостере есть страница пользователя, страница вопроса самого и тд и тп все это один сайт и по нему полюбому будут ходить на разные страницы). Почему так лучше делать - кеш потому что. Стили кешируются и картинки из них по возможности тоже и следующая страница грузится быстрее.

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

    Выбирайте то, что вам нужно.
    Ответ написан
    Комментировать