Как сверстать лучше сверстать блок

[Anna Zharova]

Встала вот такая задача сверстать вот такой блок: http://prntscr.com/5sbbku

 

Сейчас это выглядит вот так: http://azharova.ru/test/card_place2.html#

 

Дизайнер предложил делать это с помощью скрипта, например вот такого http://blurjs.com/, но не совсем понятно к какому месту это применять

 

Задача заключается в следующем, необходимо что бы на картинку натягивался градиент (на подобии слайдеров), если правая стороны превысит высоту картинки (она не измена и всегда 370рх)

 

 

[satantx]

А почему бы картинкой или блоком с градиентом не сделать?

[Anna Zharova]

Так вот стала я писать, блок с градиентом, но возник вопрос, как он поймет что ему надо тянуться вместе с правым блоком, где стоит описание

[satantx]

У вас есть description_block

Добавьте

.description_block:after {content: '';width: 575px;height: 140px;background-image: linear-gradient(to top, #f3eee4, #f0ebe2 40%, rgba(243,238,228,0));position: absolute;left: 0;bottom: 0;}

Edited January 14, 2015 by satantx

[Great Rash]

Дизайнер предложил делать это с помощью скрипта, например вот такого http://blurjs.com/, но не совсем понятно к какому месту это применять

Дизайнер такой дизайнер Умеют они предложить бесполезную хрень

 

http://codepen.io/GreatRash/pen/pveeVN

[Anna Zharova]

 

Дизайнер предложил делать это с помощью скрипта, например вот такого http://blurjs.com/, но не совсем понятно к какому месту это применять

Дизайнер такой дизайнер Умеют они предложить бесполезную хрень

 

http://codepen.io/GreatRash/pen/pveeVN

 

О даааааааааааа

Причем намекают, шефу, что я не компетентна и вообще ничего не умею

 

Рашик, огромное спасибо.

У вас есть description_block

Добавьте

.description_block:after {content: '';width: 575px;height: 140px;background-image: linear-gradient(to top, #f3eee4, #f0ebe2 40%, rgba(243,238,228,0));position: absolute;left: 0;bottom: 0;}

Satantx, тоже спасибо. Сейчас начну пробовать))))

А кто-то может объяснить, про установку скриптов blur

[Great Rash]

Ну для начала blur.js - это плагин к jQuery, т.е. как минимум потребуется jQuery (если ещё не подключен). А дальше всё просто, скачиваем скрипт, подключаем после подключения jQuery и пробуем примеры с сайта. На гитхабе есть полный список параметров.

 

Но повторюсь: этот скрипт на 100% бесполезен для вашего случая.

[Anna Zharova]

Ну для начала blur.js - это плагин к jQuery, т.е. как минимум потребуется jQuery (если ещё не подключен). А дальше всё просто, скачиваем скрипт, подключаем после подключения jQuery и пробуем примеры с сайта. На гитхабе есть полный список параметров.

 

Но повторюсь: этот скрипт на 100% бесполезен для вашего случая.

Согласна на 100%, в отношении моего примера

 

А вот для такого варианта, как можно сделать http://prntscr.com/5sdvmi

[Great Rash]

А вот для такого варианта, как можно сделать http://prntscr.com/5sdvmi

Под какие браузеры надо? Старые ИЕ интересуют? 

[Anna Zharova]

 

А вот для такого варианта, как можно сделать http://prntscr.com/5sdvmi

Под какие браузеры надо? Старые ИЕ интересуют? 

 

Нет не интересует

[Anna Zharova]

 

 

А вот для такого варианта, как можно сделать http://prntscr.com/5sdvmi

Под какие браузеры надо? Старые ИЕ интересуют? 

 

Нет не интересует

 

браузеры стандартный пакет. ИЕ10,11. Опера, Хром, Сафари и Фаирфокс

[Great Rash]

http://codepen.io/GreatRash/pen/WbpMbR

[Anna Zharova]

Вот ведь засада, не работает вот этот вариант http://codepen.io/GreatRash/pen/pveeVN в FF и Сафари под МАК 

[Great Rash]

Это не был готовы вариант, я лишь подсказал идею. Дальше надо включать мозги

[Anna Zharova]

Буду грызть...........................