Задать вопрос
ZloDeeV

Alexey ZloDeeV

Верстаю в своё удовольствие
Ответы пользователя по тегу CSS

  • Как сверстать по такой сетке?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие 
    .header
  .container
     .col
     .col
     .col
     ...
    Ответ написан
    Комментировать
    Комментировать

  • Первые проекты (верстка)?

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

    Если хочешь зарабатывать хорошо и без ежедневных правок по предыдущим проектам, то учись, верстай. Бери готовые бесплатные шаблоны PSD+HTML, сначала верстай сам, а потом смотри как это сделано там. Воруй приемы и решения у профессионалов. Не обращайся к бутстрапу если это не нужно, он предназначен для быстрой верстки админок, юзер-панелей и простых леднингов, где либо дизайн, либо скорость работы не важны.
    Ответ написан
    3 комментария
    3 комментария

  • Встречали ли вы такую сетку/расположение блоков?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Либо, как ты сказал, две колонки по 50% ширины и уже внутри разбивать на "большой"/"маленький" пост, либо копать в сторону masonry.
    Ну и в качестве сумасшествия попробовать на флексах организовать, что-то вроде такого https://jsfiddle.net/apjkw6n3/, но пострадает порядок и часть универсальности решения по отношению к masonry
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать маркер страницы?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Есть несколько путей реализации разной сложности.
    1. JS-версия: через класс-модификатор "active" двигаем и изменяем размеры ползунка сделанного отдельным элементом. js же и вычисляем необходимые размеры и положение.

    2. CSS#1 - Двигать ползунок в зависимости от активного пункта меню через селектор ".active ~ .underline"
    Пример частичной реализации нашел на codepen
    Минус в том, что активное состояние каждого пункта нужно описывать отдельно ручками, и если это проект обновляемый, то такое решение слишком геморойное в плане добавления и изменения пунктов меню.

    3. CSS#2 - Играть анимациями в пределах одного пункта меню. Например, дял смены на соседний пункт, ползунок от первого пункта сдвинуть на 50%, показываем ползунок(display: block) следующего пункта с задержкой анимации сдвинутым в сторону предыдущего на 50%, скрываем ползунок предыдущего (display: none), заканчиваем анимацию сдвигом видимого ползунка.
    Тут проблема в переходе с переходом через 2-3 пункта меню. Не думаю, что это нереально, но реализуется не без костылей. Плюс в том, что размеры и положение вычислять через js нет необходимости.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как пофиксить блок css?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Вёрстка унылая, не понимаю зачем костылить изначально хреновый код, но если так надо, то просто добавь для #rest_name свойство width: 200px;
    Ответ написан
    5 комментариев
    5 комментариев

  • Разница между background: url('...') и background: url(...)?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Нет правильной причины не оборачивать строки в кавычки. По гайдлайнам CSS/SCSS - все строки оборачиваются в одинарные кавычки(их проще набрать на клавиатуре, чем двойные), для лучшей читаемости кода(подсветка кода срабатывает на содержимое кавычек) и для того, чтобы синтаксический анализатор не полыхнул пламенем при виде строки без кавычек.

    Комментарий Евгений Петров не соответствует действительности - CSS не требует, чтобы строки были помещены в кавычки, даже те, что содержат пробелы. Строка в кавычках является точным соответствием её двойника без кавычек. Просто в предложенном примере с data:uri в строке имеются другие кавычки и интерпретатор банально сходит с ума, такие символы нужно экранировать.
    Ответ написан
    32 комментария
    32 комментария

  • Как заполнить пустоту при работе float?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Ширину блоков в процентах и добавить min-width
    Ответ написан
    Комментировать
    Комментировать

  • Как решить проблему с неотображением Grid Layout?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    caniuse.com/#search=grid

    Я думаю, что всем бы хотелось использовать это на всех браузерах, но увы
    Ответ написан
    Комментировать
    Комментировать

  • Как писать на коде CSS?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Как будто Promt перевел текст с русского на русский х_х
    position - позиционирование элемента относительно родителя и соседей.
    margin - отступ снаружи блока, НЕ изменяет его размеры
    padding - отступ внутри блока, изменяет его размеры
    float - это вообще обтекаемость

    Столько статей про позиционирование написано
    Ответ написан
    Комментировать
    Комментировать

  • Какой CSS селектор вычленит первое вхождение по классу?

    ZloDeeV
    @ZloDeeV Автор вопроса
    Верстаю в своё удовольствие
    В общем, решение имеется, но оно лишь усложнило задачу.
    Чтобы выделить первый элемент по классу можно сделать следующее:
    Навесить стили на весь класс .highlight {}, а потом перекрыть их селектором .highlight ~ td.highlight {}, который сработает на всех элементах, которые идут после первого попавшегося по классу.
    Ответ написан
    Комментировать
    Комментировать

  • Как добавлять класс при скролле?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Чувак в комментарии под постом прав. toggle меняет класс, тут нужен addClass вместо него
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать подобный эффект?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Самый популярный из таких - masonry
    Лучшее из перепробованных мною.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать заголовок страницы с горизонтальным разделителем?

    ZloDeeV
    @ZloDeeV
    Верстаю в своё удовольствие
    Помню статью, в которой такую полосу делали для стилизации легенды(legend)
    Я оттуда утянул пару строк кода на свой сайт (заголовки публикаций с линией)
    Вот то, что утянул
    .legend::before, .legend::after{
    content: "";
    position: relative;
    display: inline-block;
    width: 50%;
    height: 2px;
    vertical-align: middle;
    background: none repeat scroll 0% 0% padding-box content-box #000;
}

.legend::before {
    left: -0.5em;
    margin: 0px 0px 0px -50%;
}

.legend::after {
    left: 0.5em;
    margin: 0px -50% 0px 0px;
}


    Но этот код для полос по бокам блока, думаю, что его можно подогнать под линию между двумя блоками
    Ответ написан
    1 комментарий
    1 комментарий