Ответить на тему  [ Сообщений: 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
Сообщений: 556
Пол: мужской
Репутация: 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
Сообщений: 556
Пол: мужской
Репутация: 1046
Добавить пункт репутацииВычесть пункт репутации
Сообщение Re: Как правильно применить фильтр к картинке
Такой пример: http://codepen.io/Val_Ery/pen/ORyQPy
Я там просто взял цветопробу с Вашей красной картинки в первом посте и добавил этот цвет в качестве фона блока, в котором находится картинка. На саму картинку наложил фильтр opacity в 20%.
Получилось не идеально, но ... как направление движения может пригодится. Наверное...


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

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

kuzik

5

4586

28 апр 2011, 14:10

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

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

в форуме ИНТЕРНЕТ-МАГАЗИН VIRTUEMART

kuzik

3

1789

03 май 2012, 11:55

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

Нет новых непрочитанных сообщений в этой теме не могу правильно прикрепить форум на сайте.

в форуме ДРУГИЕ ВОПРОСЫ ПО РАЗМЕЩЕНИЮ САЙТА

krv

2

1772

15 ноя 2010, 21:52

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

Нет новых непрочитанных сообщений в этой теме Не могу правильно русифицировать тему WordPress

в форуме WORDPRESS

Maxen

4

1944

18 янв 2011, 01:20

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

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

в форуме HTML

V@doS

2

1482

01 ноя 2009, 00:30

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


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

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


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

Перейти: