Как сделать перо на изображении?

У меня есть изображение, которое требует эффекта оперения в основании. как сделать это, используя только css3.Как сделать перо на изображении?

в качестве примера я помещенного как мой feathered и no-feathered изображение в demo

with feather

Without feather любой пожалуйста предложить мне правильный путь, чтобы добавить перо в нижней части?

Live Demo

источник

2015-07-05 user2024080

Просто добавьте градиент над ним? Что вы пробовали? – Jonathan

Изображения различной высоты, поэтому это затрудняет создание желаемого эффекта. Если вы замените нижнее изображение на один, идентичный верхнему, но без вашего влияния на него, будет легче воссоздать. – 2ne

CSS3 Градиенты были использованы для достижения эффекта пера здесь. Поскольку перо находится внизу, вы можете использовать значение linear-gradientto bottom с процентными значениями. т.е. на разных уровнях остановки.

Измените opacity на каждом уровне остановки, чтобы добиться более плавного эффекта.

.shadow { 
 
    background: url(https://dl.dropboxusercontent.com/u/10268257/Feather/withFeather.png) no-repeat; 
 
    height: 216px; 
 
    width: 215px; 
 
} 
 
.no-shadow { 
 
    background: linear-gradient(to bottom, rgba(22, 49, 102, 0) 0%, rgba(22, 49, 102, 0) 80%, rgba(22, 49, 102, 0.99) 87%, rgba(22, 49, 102, 1) 100%), url(https://dl.dropboxusercontent.com/u/10268257/Feather/withoutFeather.png); 
 
    display: inline-block; 
 
    height: 216px; 
 
    width: 215px; 
 
}

<div class="no-shadow"></div> 
 
<div class="shadow"></div>

источник

2015-07-05 10:33:05

Это не работает для меня, вы можете здесь зарегистрироваться? http://jsfiddle.net/ymatcamj/ – user2024080

И вы используете «с перьями» изображения png. здесь нет градиента. – user2024080

Можете ли вы удалить изображение 'withFeather.png' из div. но я не получаю результата. – user2024080

Как сделать перо на изображении?

ответ

Смежные вопросы