Ответы пользователя по тегу CSS
  • Можно ли задать тексту атрибут, согласно которому дата не будет обрабатываться в ссылку на календарь на смартфонах?

    YourDesire
    @YourDesire
    Я вообще по образованию бухгалтер...
    На сколько я знаю, запретить автоматическую линковку можно только для телефона и адресов, и то, на уровне мета-тега... И по-моему это сработает только для iOS
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no"/>


    Хотя, можно попробовать:
    <meta name="format-detection" content="date=no"/>

    :))

    Для всех остальных случаев используется css
    .date-link {
      color: #333;
      text-decoration: none;
    }


    Есть еще вариант, чтобы намеренно сделать дату невалидной для парсера, например вставив пустой span между днем и месяцем
    Ответ написан
    1 комментарий
  • Как изменить цвет выделения для изображений?

    YourDesire
    @YourDesire
    Я вообще по образованию бухгалтер...
    Проблемы выделения в конкретном браузере?
    У меня и картинка и текст выделяются серым. Google Chrome

    На моей памяти, с изменением цвета выделения по отношению к картинкам, были проблемы у Firefox

    codepen.io/anon/pen/BLWKad
    Ответ написан
    1 комментарий
  • Как вывести надпись на передний план?

    YourDesire
    @YourDesire
    Я вообще по образованию бухгалтер...
    Вступление:
    Это НЕ невозможно. Приблизительный пример.
    codepen.io/anon/pen/kkgZrm

    Как заставить "это" работать:
    • slick.css правило для .slick-slider. Отключаем position: relative
    • slick.css строка 38, 39 и далее. Отключаем transform
    • slick.css строка 96. Прописываем внутрь правила .slick-initialized .slick-slide следующее z-index: auto !important
    • slider-fade.css строка 2 правило .header-image. Отключаемposition: relative и z-index
    • layout-slider.css строка 112 правило .header-image Отключаем z-index
    • slider-fade.css Правило .header-content Строка 35 прописываем position: absolute; z-index: 2000;
    • slider-fade.css Строка 25 Правило .header-color-overlay ставим z-index: 1000;


    Или переопределить эти правила в другом css файле... Что болеее предпочтительно...
    После (в обоих случаях) придется пофиксить z-index для пары других элементов (например белая граница), но суть должны уловить...

    Постараюсь объяснить почему даже при условии того, что вы задали z-index для элемента с текстом бОльший, чем у блока с серым фоном, элемент с текстом всеравно остался позади.
    Да и что тут объяснять, все довольно просто:
    Дочерние элементы наследуют z-index родителя и "находятся в его уровне z-index".
    Чтобы наглядно продемонстрировать это, приведу ссылку на пример, который разместил в начале. С небольшими правками.
    Сравните код и вы все поймете

    codepen.io/anon/pen/ORWQEw

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

    Блин какая простыня текста. Да я мастер выражаться коротко и доходчиво
    Ответ написан
  • Как сделать предзагрузку?

    YourDesire
    @YourDesire
    Я вообще по образованию бухгалтер...
    Можно воспользоваться готовыми плагинами
    https://www.niklausgerber.com/projects/preloadme-a...

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

    Основные пункты реализации -
    • Создать элемент прелоадера
    • Поместить элемент прелоадера сразу после <body>
    • Прописать стили, анимации
    • Написать сам скрипт в $(window).on('load', function() { ... });

    Например:
    $(window).on('load', function () {
        var pre= $('.preloader');
        var indicator = pre.find('.indicator');
        indicator.fadeOut();
        pre.delay(350).fadeOut('slow');
    });
    Ответ написан
    Комментировать
  • Как разместить кнопки и текст на картинку?

    YourDesire
    @YourDesire
    Я вообще по образованию бухгалтер...
    Как насчет такого варианта:
    Картинку не трогать, а сделать вложенный контейнер, где будут храниться элементы управления, задаем ему
    position: absolute и прочее, z-index например (в таком случае возможно придется указать картинке position: relative и z-index меньший, чем у контейнера с элементами управления), растянуть на высоту и ширну родительского контейнера.

    Примерно так в разметке:
    <div class="slider">
      <div class="slider-slide">
        <img src="..." alt="..."/>
        <div class="slide-controls">
          <!-- place controls here -->
        </div>
      </div>
    </div>


    Прошу прощения, если не совсем правильно понял задачу
    Ответ написан