Ответы пользователя по тегу CSS
  • HTML,JS,CSS. Можно ли засунуть pdf или doc под спойлер и открывать их при открытии спойлера?

    vetero4eg
    @vetero4eg
    Frontend
    Засунуть документ в обертку overflow: hidden и через js регулировать высоту блока. Может так что выйдет.
    Вставлять pdf, как выше написали, через iframe или object.
    Можете еще mozilla.github.io/pdf.js посмотреть, но не факт, что будет полезно.
    Ответ написан
    Комментировать
  • Это вообще люди делают?

    vetero4eg
    @vetero4eg
    Frontend
    Тут еще очень важно взаимодействие с дизайнером, помимо всего прочего. Для всех этих переходов и паралаксов нужна очень качественная графика. Мне за три года такого качества подготовки макетов не встречалось.
    Ответ написан
    Комментировать
  • Как сверстать такие кнопки с градиентом?

    vetero4eg
    @vetero4eg
    Frontend
    Проблема в градиентном бордере, верно?

    Можно попробовать похимичить с border-image.

    Если кнопка лежит на сплошном фоне - можно добавить ей элементa after или before нужного цвета, синего в вашем случае, и с позиционировать как надо, оставив торчать кусок градиента толщиной в нужный бордер.

    Можно использовать svg
    Ответ написан
    Комментировать
  • Как сделать затемнение блока div?

    vetero4eg
    @vetero4eg
    Frontend
    Для начала удалите все эти конструкции и напишите валидно. И по бутстрапу документацию тоже посмотреть не будет лишним. Там такая штука есть .row и что-то про 12 колонок.
    Ответ написан
    2 комментария
  • Как увеличить размер текста не изменяя размер его блока?

    vetero4eg
    @vetero4eg
    Frontend
    Выставите тексту и остальным пунктам одинаковый line-height. Отлично решит проблему line-height = необходимой высоте блока, если там вот такие короткие пункты и переносов не предвидится. Если не используете normalize или reset убедитесь что там нет лишних margin/padding. При использовании flex выравнивание по центру по высоте не должно быть проблемой вообще.
    Ответ написан
  • Почему блок слетает на хэдер?

    vetero4eg
    @vetero4eg
    Frontend
    Было бы проще вам помочь, залей вы код куда-нибудь на Codepen или jsFiddle. Так первое, что бросилось в глаза в разметке - ну есть у вас container, есть у вас col. А где row??

    Посмотрите внимательнее документацию bootstrap, если хотите его использовать. Вы сейчас это делаете несколько... странно.
    Ответ написан
  • Как адекватно сверстать этот заголовок?

    vetero4eg
    @vetero4eg
    Frontend
    Я бы сделала как before или after к текстовому блоку. Либо отдельным тегом с отрицательным margin вначале. Главное к картинке его не привязывать.
    Ответ написан
    Комментировать
  • Как сделать у div вогнутый border-radius?

    vetero4eg
    @vetero4eg
    Frontend
    Тут можно поставить before элемент с бордер радиусом 50% и заливкой этого бордера только с одной нужной стороны.
    Ответ написан
    1 комментарий
  • Как связать меню с сайтом?

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

    vetero4eg
    @vetero4eg
    Frontend
    Посмотрите связку Scrollmagic и GSAP
    Ответ написан
    Комментировать
  • Почему светлый блок не покрывает полностью экран?

    vetero4eg
    @vetero4eg
    Frontend
    Ширину и высоту можете убрать, поставьте
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    И если это оверлей для модального окна, логичнее его сделать fixed, а не absolute.
    Ответ написан
    Комментировать
  • Как сделать скошенные углы с тенью?

    vetero4eg
    @vetero4eg
    Frontend
    Боюсь, самым нормальным решением тут будет побить дизайнера..

    По существу - попробуйте задать этому "отрезающему" угол элементу тень только с одной нужной стороны. jsfiddle.net/agusesetiyono/1kwhsfvo/?utm_source=we... или вот https://codepen.io/iiil/pen/FAqjn так как-то. Возможно в вашем случае это будет внутренняя тень. Может поможет
    Ответ написан
    1 комментарий
  • Как правильно адаптировать сайт на Wordpress?

    vetero4eg
    @vetero4eg
    Frontend
    использовал плагин PageBulder
    - вот и радуйтесь теперь его "удобству". Имела радость раз адаптивить сайт на PageBuilder, никогда больше не возьмусь и никому не посоветую. Там же сплошная мешанина, обилие нездоровых классов и куча мусора в стилях. Сэкономили - поздравляю.
    Ответ написан
    Комментировать
  • Не работают media запросы при уменьшении экрана?

    vetero4eg
    @vetero4eg
    Frontend
    так у вас последний @media будет действовать на все экраны мельче 1200px в ширину и будет перебивать все предыдущие написанные вами @media. Либо поменяйте их порядок, от большего к меньшему, либо перепишите @media под min-width

    Ну и про скобки вам тоже верно написали. Если используете синтаксис без скобок, тут их тоже не должно быть
    Ответ написан
    Комментировать
  • Как сделать блок такого формата?

    vetero4eg
    @vetero4eg
    Frontend
    Белая подложка - обычный блок с border-radius, внутри item-ы, среди которых есть акцентные (через модификатор или доп класс) с другим цветом фона, position: relative и элементами :before & :after для прямоугольника и треугольника, составляющих тот левый загиб-хвостик. Их абсолютом позиционируете top: 0, left: -100% - прямоугольник, и скорее всего bottom: -100%, left: -100% для треугольника( если что подберете).

    Если не знаете на css как сделать треугольник - посмотрите тут https://html5book.ru/css-figury/
    Ответ написан
    Комментировать
  • Как сверстать этот блок?

    vetero4eg
    @vetero4eg
    Frontend
    Возможно не лучшее решение, но я бы делала так:
    веделила два блока, верхняя строка / нижняя строка. У верхнего блока бэкграунд черный с картинкой по url, спозиционированной вправо, занимающая 50% блока, внутри блока контейнер с контентом, там уже по сетке как делаете, так и располагайте. У нижнего то же самое, только фон белый, картинку позиционируете влево, также внутри контейнер с контентом уже по сетке.

    если что-то будет не получаться, картинки можно отдельным абсолютами повесить, с позиционированием относительно строки top: 0, bottom: 0, right: 0, left: 50% для верхнего блока, и то же самое для нижнего, только left и right наоборот.
    Ответ написан
    Комментировать
  • Верстка макета CSS стили на каждый чих, что я делаю не так?

    vetero4eg
    @vetero4eg
    Frontend
    научись выделять однотипные элементы, например текст в иконках трех нижних - с одинаковыми стилями, эти стили должен нести один класс, а не три разных.

    Эти иконки у тебя вообще как-то странно сделаны. Смотри, есть блок, пусть div, в нем есть иконка, ну можно img, можно вообще просто background, потому что особого смысла она не несет, и текст p. У блока скругляешь углы, задаешь рамку, внутренние отступы, если делать на флексбоксах остальное выравнивание этого куска - пара строк для внутри, и пара строк для выравнивания всех трех иконок относительно друг друга.

    не нужно позиционировать каждый элемент через relative или того хуже absolute. Очень советую сразу осваивать flexbox, если слишком сложно, просто научись логично выстраивать структуру блоков, чтобы было удобно выравнивать контент. Чтобы логически одинаковые элементы оформлялись одним классом и имели идентичную структуру. Желательно делай сразу все, что можно, в относительных величинах - % и тп. Представь, тебя сейчас это попросят переверстать на экран меньшего размера. Ты же чокнешься это все переписывать.... А не адаптивная верстка сейчас практически не востребована.
    Ответ написан
    Комментировать
  • Как сверстать такой блок?

    vetero4eg
    @vetero4eg
    Frontend
    Можно на флексах. Общий контейнер column шириной 100%, комплект картинка+текст - отдельный флекс row с выравниванием flex-start, каждый четный - flex-end. также в каждом четном выравнивание текст другое задаете. ну и немного с отступами поколдовать.
    Ответ написан
    Комментировать
  • Как реализовать валидацию формы?

    vetero4eg
    @vetero4eg
    Frontend
    Раз предыдущий ответ не подходит, то без js никак. Меняйте класс при нужном условии, и обратно, когда вам надо.
    Ответ написан
    Комментировать
  • Как логически решить данную задачу?

    vetero4eg
    @vetero4eg
    Frontend
    Да, через javascript, отслеживая либо высоту скролла и делая замену стилей/класса в нужный момент, либо навешивая на каждую секцию отслеживание события, когда блок попадает в видимую часть экрана и меняя его в этот момент. Возможно в решении это задачи вам поможет плагин fullpage.js
    Ответ написан
    Комментировать