1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

Фильтр blur на блоке с изображением

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем immortal727, 31 июл 2018.

  1. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    Делаю слайдер через uk-grid
    Но в дизайне нарисовано
    https://yadi.sk/i/yTdGXAgz3ZkQe6

    Видно, что есть картинка, а на ней блок. Ясно, что данный блок позиционируется относительно самого изображения. Вся загвозка как сделать эффект размытия как на картинке. Есть фильтр blur, но он применим к изображению. К примеру https://wp-lessons.com/krossbrauzernyiy-effekt-razmyitiya-blur-izobrazheniya-v-css

    У меня же код
    <div class="uk-slider-container">
    <ul class="uk-slider uk-grid-width-medium-1-1">
    <li>
    <img src="../images/slider/slide1.png"/>
    <div class="desc">
    Заголовок
    <p>Описание</p>
    </div>
    </li>
    <li><img src="../images/slider/slide1.png"/></li>
    </ul>
    </div>
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Он применим к чему угодно! Его и используйте.
     
  3. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    В том-то и дело, что не получается такого эффекта как должно быть на скрине, что высылал выше. Если можете помочь, то помогите пожалуйста
     
  4. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    А какой получается? Дайте ссылку на вашу вёрстку.
     
  5. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    <div class="uk-slidenav-position" data-uk-slideshow>
    <ul class="uk-slideshow uk-overlay-active" data-uk-slideshow="{kenburns:'30s'}">
    <li>
    <img src="../images/slider/slide1.png"/>
    <div class="desc blur uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left uk-width-4-10" >
    <h3>Лестницы любой сложности на заказ</h3>
    <p>Мы используем высококачественный металлопрокат</p>
    <mark class="uk-float-left">От 50 000 руб.</mark>
    <button class="uk-flex uk-flex-middle uk-float-right">Подробнее &nbsp;<i class="fa fa-long-arrow-right"></i></button>
    </div>
    </li>
    <li>
    <img src="../images/slider/slide1.png"/>
    </li>
    </ul>
    <a href="" class="uk-slideshow-nav uk-slideshow-previous" data-uk-slideshow-item="previous"></a>
    <a href="" class="uk-slideshow-nav uk-slideshow-next" data-uk-slideshow-item="next"></a>
    </div>

    /*------Слайдшоу-----------*/
    .uk-slideshow .desc{
    top: 20px; left:20px; padding:10px; color:white;
    border-radius:15px;
    display: inline-table;
    }
    .blur{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px);
    }
    .uk-slideshow .desc h3{color:white; font-size:14pt; font-weight:bold; font-family: 'Roboto', sans-serif;}
    .uk-slideshow mark{background:none; color:white; font-size:18pt; font-family: 'Roboto', sans-serif; font-weight:bold;}
    .uk-slideshow-nav{
    height:27px;width:30px;background: #000; font: 18pt FontAwesome; text-align:center;
    position:absolute; top:85%; color:white;
    }
    .uk-slideshow-nav:hover{color:#ccc}
    .uk-slideshow-previous{left:20px;}
    .uk-slideshow-next{left: 65px;}
    .uk-slideshow-previous:before {content: "\f177";}
    .uk-slideshow-next:before {content: "\f178";}

    В итоге размытие есть, но размываются и буквы http://i.prntscr.com/5d4f97wdRpGXwsrmmNAlyg.png

    /*------Слайдшоу-----------*/
    .uk-slideshow .desc{
    top: 20px; left:20px; padding:10px; color:white;
    border-radius:15px;
    display: inline-table;
    }
    .blur{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    filter: blur(5px);
    }
    .uk-slideshow .desc h3{color:white; font-size:14pt; font-weight:bold; font-family: 'Roboto', sans-serif;}
    .uk-slideshow mark{background:none; color:white; font-size:18pt; font-family: 'Roboto', sans-serif; font-weight:bold;}
    .uk-slideshow-nav{
    height:27px;width:30px;background: #000; font: 18pt FontAwesome; text-align:center;
    position:absolute; top:85%; color:white;
    }
    .uk-slideshow-nav:hover{color:#ccc}
    .uk-slideshow-previous{left:20px;}
    .uk-slideshow-next{left: 65px;}
    .uk-slideshow-previous:before {content: "\f177";}
    .uk-slideshow-next:before {content: "\f178";}
     
  6. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Ну, так это же очевидно: если вы применяете этот фильтр к определённому блоку, то размывается всё внутри него.
    Вам нужно сделать блок обёртку и внутри него разместить отдельно блок с фоном и блок с текстом через абсолютное позиционирование. И применить фильтр только к блоку с фоном.

    И ещё: если у вас вёрстка сейчас онлайн недоступна, то при необходимости что-либо показать выкладывайте сюда https://codepen.io/pen/.
     
  7. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    Вот поэтому я прошу помочь. Подскажите как? Ведь у меня основной фон идет где сам слайдер. И там не бэкраунд идет, а изображение напрямую добавляется
    <img src="../images/slider/slide1.png"/>
    Даже если я сделаю:

    <div class="blur uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left uk-width-4-10">
    <div class="desc " >
    <h3>Лестницы любой сложности на заказ</h3>
    <p>Мы используем высококачественный металлопрокат</p>
    <mark class="uk-float-left">От 50 000 руб.</mark>
    <button class="uk-flex uk-flex-middle uk-float-right">Подробнее &nbsp;<i class="fa fa-long-arrow-right"></i></button>
    </div>
    </div>
    И у decs пропишу
    .decs{position: absolute; z-index: 999;} ничего не изменит.
    У blur я не могу прописать position:relative, так как у li в слайдшоу стоит абсолютное позиционирование.
     
  8. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Если вам лень выложить вашу вёрстку на Кодепен, то мне лень вам помогать!
     
  9. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    Я не могу её выложить. Не знаю как я там могу прикрепить картинки, как туда загрузить js от uk-grid
    Поэтому и пишу код сюда
     
  10. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Там есть кнопка Settings, через которую можно подключить внешние файлы. В случае популярных фреймворков там есть поиск по CDN и можно подключить прямо оттуда в два клика.

    И вам не нужно подключать вообще всё, только необходимое для вывода конкретного куска вёрстки.

    Будто сюда вы его пишите с изображениями, js и т.д. :Smile:
     
  11. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    Я понял. Вы сами не знаете как помочь, а просто выделываетесь. Я уже и код дал и всё. Если бы знали, то помогли бы давно
     
  12. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Я уже написал вам решение, вы его не поняли и хотите, чтоб я дал вам готовый пример на вашей вёрстке. И я не против это сделать, если вы дадите эту вёрстку в живом виде, но вам лень разобраться с элементарным сервисом, с которым умеет работать любой уважающий себя верстальщик.

    Если вы сомневаетесь в моей квалификации, посмотрите мои сообщения на форуме.
     
  13. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    Пожалуйста https://codepen.io/immortal727/pen/BPrJmJ
    Но как и говорил, картинки туда не подгрузить, скрипты js также, как и css от uk-grid
     
  14. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Для этого давно придумали сервисы, которые генерируют картинки плейсхолдеры.

    Вот результат: https://codepen.io/Dotrox/pen/xJWQWy и даже с картинкой. Стили, которые под нижним комментарием, вероятно, не понадобятся. Я их добавил, чтоб убрать косяки вызванные отсутствием UIkit.
    И вот второй вариант: https://codepen.io/Dotrox/pen/WKzYYj
    Когда я увидел первый вариант вживую, понял, что просто размытый фон не даёт нужного эффекта и сделал небольшой хак подложив фотографию в фон. И это ещё одна причина, почему вёрстку надо показывать вживую, а не выкладывать полотнище текста.

    Вам просто было лень разбираться. UIkit можно было подключить по ссылкам с cdnjs.com, которые указаны у него в документации.
     
    $iD нравится это.
  15. immortal727

    immortal727

    Регистрация:
    17 май 2018
    Сообщения:
    17
    Симпатии:
    0
    То что этот сервис хороший, я не спорю. Но он мне ни к чему. Первый раз такой дотошный человек как Вы попался. Да еще и платить за этот сервис, зачем? На это есть компьютер и еверноте
    А за сервисы спасибо. Не знал про них
    Второй вариант что надо, но он мне не пойдет никак. Так как как картинки-то на будущее будет подгружать клиент сам, а тут получается что надо еще в css это всё прописывать. Не пойдет. Придется обычно делать, через opaticy
    Тем более что уж слишком большое вложение блоков
     
    Последнее редактирование: 2 авг 2018
  16. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    У меня принцип: помогать только тем, кто прикладывает хоть какие-то усилия и не ленится думать.
    Я уже много лет консультирую на форумах по широкому спектру задач связанных с веб-разработкой и за эти годы выработалась стойкая неприязнь к халявщикам, которые хотят сразу получить готовое решение на блюдечке при этом не редко даже не в состоянии дать достаточно информации для решения проблемы. Последняя фраза не относится конкретно к вам, а в целом описывает моё отношение ко всем, кто допускает косяки при постановке вопроса (например сваливает код обычным текстом, когда есть специальная кнопка для его в вставки, тем более в случае, когда нужен не просто код, а живой пример).


    Платить?
    Никогда ничего там не платил и никогда не ощущал потребности в платных возможностях!
    Кстати, таких сервисов очень много. Я предложил именно этот потому, что для вёрстки он один из самых удобных.


    Используйте инлайн стили. У вас в любом случае ссылка на изображение будет динамически подставляться в тег img, вот и подставляйте её дополнительно ещё и в стиль в этом теге.

    О каком вложении идёт речь?
     
    $iD нравится это.