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

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Есть все в документации. Важно понимать про позиционирование и работу relative и absolute. Пример расположения текста по четырем углам и по центру.

    Стили:

    .container {
      position: relative;
      text-align: center;
      color: white;
    }
    
    .bottom-left {
      position: absolute;
      bottom: 8px;
      left: 16px;
    }
    
    .top-left {
      position: absolute;
      top: 8px;
      left: 16px;
    }
    
    .top-right {
      position: absolute;
      top: 8px;
      right: 16px;
    }
    
    .bottom-right {
      position: absolute;
      bottom: 8px;
      right: 16px;
    }
    
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }


    HTML:

    <div class="container">
      <img src="imgage.jpg" style="width:100%;">
      <div class="bottom-left">Низ, слева</div>
      <div class="top-left">Верх, слева</div>
      <div class="top-right">Верх, справа</div>
      <div class="bottom-right">Низ, справа</div>
      <div class="centered">По центру</div>
    </div>
    Ответ написан
    Комментировать
  • Как затемнить фон сайта при открытии dropdown в бутстрап?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Такие вещи уже разбирались на Стэке. Хорошим способом сделать это будет использование toggleClass и размещение обертки вокруг содержимого.

    Код, который можно использовать для примера:

    $(document).ready(function(){
        $(".collapsed").click(function(){
        $("#coverthishere").toggleClass("coverall");
        });
    });


    Пример на fiddle.

    Используется класс меню collapsed в качестве триггера. И цель - ID coverthishere, чтобы добавить/удалить класс .coverall.
    Ответ написан
    Комментировать
  • Как называется такой дизайн? Как научиться правильно верстать такие макеты?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Называется инструмент Timeline. Ниже примеры того как можно делать на Bootstrap:



    Развлекайтесь.
    Ответ написан
    Комментировать
  • Как сделать темную тему 2gis?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Изучил API 2Gis, вот это вот skin=dark работает только для элементов управления. Вам, скорее всего, хотелось перекрасить всю карту в темный цвет (как ночью), но это скорее всего в API не заложено, это пользователь выбирает в настройках.

    Вы можете поиграться на Codepen, где сейчас стоит light и описание маркера на светлом фоне, а меняете в URL скрипта на Dark и описание маркера становится темным:



    Для пользователя же их приложения есть 4 режима:

    1. Как в приложении
    Навигатор и приложение 2ГИС всегда будут работать с одними настройками. Если тёмная тема включена в приложении, то она будет действовать и в навигаторе. Если выключить тёмную тему в приложении, она автоматически отключится в навигаторе.
    2. Автоматический
    Тёмная тема будет включаться автоматически после захода солнца и выключаться — после восхода.
    3. Включён всегда
    4. Выключен
    Ответ написан
  • Полоса с правой стороны в css?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Такой вариант может подойти:

    Ответ написан
    Комментировать
  • Как реализовать такой слайдер?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Есть такой пример:

    Ответ написан
    Комментировать
  • Как реализовать такую кнопку?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Такие кнопки можно делать двумя способами:
    1. Кнопку как картинка
    2. Задать свойство background-image для родительского элемента

    Или вот еще пример кнопок с фоном на чистом CSS3:

    Ответ написан
    2 комментария
  • Почему поле виджетов наезжает на footer?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Потому что вы не указали для плагина "q2w3 fixed widget" в настройках "Стоп ID".

    В вашем случае у футера есть ID "colophon_TesseractTheme". Его, скорее всего и нужно указать в настройках плагина.
    Ответ написан
    Комментировать
  • Как сделать такое меню?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Есть готовые решения, их много. Этот элемент называется Burger Menu. Ниже пример, который можно переделать по аналогии.

    Ответ написан
    1 комментарий
  • Fancybox работет не на всех страницах, как исправить?

    sergeiermilov
    @sergeiermilov
    Веб-дизайн, фронтенд и WordPress разработка
    Когда добавляли в статьей фотографии или галереи - вы указывали, чтобы ссылка вела на медиафайл? Если забыли, то при добавлении фото выбирайте: ссылка -> медиафайл.

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