Ответить на тему  [ Сообщений: 4 ] 
Как правильно применить фильтр к картинке 
Автор Сообщение
Бывалый

Зарегистрирован: 11 сен 2009, 11:19
Сообщений: 213
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение Как правильно применить фильтр к картинке
Здравствуйте
У меня есть изображение.
Изображение


Нужно к нему подобрать фильтр - чтобы выглядело так
Изображение

может кто-то знает решение?

еще - нужно чтобы картинки была такая же как и высота текста, но начиная с 1241 px
отображение правильное
Изображение

когда ширина меньше 1242 появляется отступ снизу - как сделать так чтобы отступ остался под текстом и картинка увеличилась в размерах

ИзображениеИзображение


код HTML
Код:
<section id="sed">
       <div class="row">
        <div class="image col-sm-6 col-xs-12">
            <img src="img/photo1.png" alt="">
        </div>
        <div class="text-wrap right col-sm-6 col-xs-12">
            <h1>Sed faucibus quis</h1>
            <p class="text">Fusce bibendum luctus massa,
ut tincidunt lectus tincidunt in.
Nulla tristique ipsum vitae lacus
ullamcorper, at dictum nunc
scelerisque.</p>
        </div>
    </div>
        </section>


sass
Код:
img
    width: 100%

section
    h1
        font: 700 22px FiraSans
    img
        height: 500px
   
#sed
    background-color: $sed-bgcolor
    color: #666666
    img
        filter: sepia(100%)
.image
    padding: 0
.text-wrap
    padding: 55px 55px 55px
    .text
        font-size: 31px
    &.right
        padding-right: 20%
    &.left
        padding-left: 20%


заранее спасибо


06 сен 2016, 17:47
Профиль Отправить личное сообщение WWW
Опытный

Зарегистрирован: 12 дек 2011, 21:34
Сообщений: 538
Пол: мужской
Репутация: 1046
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как правильно применить фильтр к картинке
Относительно фильтров (если правильно понял)... Примеров много.
Например тут - http://html5-demos.appspot.com/static/c ... index.html - можно подергать ползунки
А тут (каюсь, мой пример :oops: ) - https://codepad.co/snippet/5CsM956K - без ползунков,но можно посмотреть сам css-код. На скрипт внимания не обращайте, это я просто прописывал изменения, когда производится выбор в раскрывающемся списке. Там же есть ссылки на описания (мозилла, в3скул) и проверка, под какими браузерами енто работает.
Использовать просто: картинке добавляете класс, например blur, и прописываете правило типа .blur {filter: 5px;}. Для Вас может подойти invert + saturate... Всё зависит от картинки. Только Вы можете подобрать нужные значения в соответствии с вашими пожеланиями. А может и лучше :)

С размером картинки... У вас там бутстрап? С ним проще было бы код на codepen.io посмотреть. Выложите...


06 сен 2016, 20:53
Профиль Отправить личное сообщение
Бывалый

Зарегистрирован: 11 сен 2009, 11:19
Сообщений: 213
Репутация: 0
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как правильно применить фильтр к картинке
Спасибо за ответ
Пока подобрать красноту пока не получается. Наверное нужно применить overlay

ccылка на часть кода
http://codepen.io/olezya/pen/XjmzQK


10 сен 2016, 20:41
Профиль Отправить личное сообщение WWW
Опытный

Зарегистрирован: 12 дек 2011, 21:34
Сообщений: 538
Пол: мужской
Репутация: 1046
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как правильно применить фильтр к картинке
Такой пример: http://codepen.io/Val_Ery/pen/ORyQPy
Я там просто взял цветопробу с Вашей красной картинки в первом посте и добавил этот цвет в качестве фона блока, в котором находится картинка. На саму картинку наложил фильтр opacity в 20%.
Получилось не идеально, но ... как направление движения может пригодится. Наверное...


10 сен 2016, 22:55
Профиль Отправить личное сообщение
Показать сообщения за:  Сортировать по:  
Ответить на тему   [ Сообщений: 4 ] 
   Похожие темы   Автор   Ответов   Просмотров   Последнее сообщение 
Нет новых непрочитанных сообщений в этой теме как правильно подключить скрипт от Google Adsense

в форуме JAVASCRIPT

mrmarkov

0

2505

21 дек 2015, 22:13

mrmarkov Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Как правильно сохранять фото для шапки сайта?

в форуме PHOTOSHOP

vse.kiev

4

2239

09 дек 2009, 12:00

vse.kiev Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме flasnews - код шаблона как правильно? Переопределение вывода

в форуме ШАБЛОНЫ И ВНЕШНЕЕ ОФОРМЛЕНИЕ JOOMLA

MansEL

0

1442

20 окт 2011, 09:40

MansEL Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Кто нибудь подскажите как правильно настроить слайдер

в форуме ШАБЛОНЫ И ВНЕШНЕЕ ОФОРМЛЕНИЕ JOOMLA

kuzik

0

1862

05 авг 2011, 16:10

kuzik Перейти к последнему сообщению

Нет новых непрочитанных сообщений в этой теме Как правильно составить robots.txt ? Боты поисковиков.

в форуме CSS И ВЕРСТКА

dimaan777

2

1726

07 июн 2010, 21:15

Pega Перейти к последнему сообщению


Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Перейти:  
 cron