Как сделать округлую тень на изображении png - PullRequest
Новая
       19

Как сделать округлую тень на изображении png

0 голосов
/ 10 ноября 2018

Я пытаюсь воссоздать шаблон сайта, который нашел в Behance. Хотя я нашел отличное решение и узнал что-то новое с помощью фильтра: dropshadow (); Я действительно хотел бы просто сделать тень на моем png округленной. Я пробовал изменения радиуса границы, но, возможно, не свидетельствовал о размытии (), но это размывает изображение, и я надеялся, что вы могли бы сделать что-то вроде drop-shadow (blur ()); что было бы нахально.

Вот кодовое примечание , для ясности ниже и код. Спасибо.

enter image description here

.weapon-1{

    background: url(../pictor/pistols/360fx360f.png) center center no-repeat;
    background-size: contain;
    width: 100px;
    height: 100px;
    -moz-filter: drop-shadow(0 0 10px #B3135D);
    -webkit-filter: drop-shadow(0 0 10px #B3135D);
    filter: drop-shadow(0 0 10px #B3135D);

}

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

Вы также можете комбинировать элементы для действительно уникального эффекта, особенно с составными цветами. Здесь я использую синий и фиолетовый. 

.weapon-1{
    background: url(https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_hkp2000_aq_p2000_boom_light_large.39f01b0b86b795bea56300432fecfbf93415ee58.png) center center no-repeat,  radial-gradient(ellipse at center, #9C08E2 -100%, transparent 40%);
    background-size: contain;
    width: 200px;
    height: 200px;
    -moz-filter: drop-shadow(0 0 10px #2C18AF);
    -webkit-filter: drop-shadow(0 0 10px #2C18AF);
    filter: drop-shadow(0 0 10px #2C18AF);
}
<div class="weapon weapon-1 mx-2"></div>
0 голосов
/ 10 ноября 2018

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

исходное изображение, используемое во фрагменте исходное изображение Пожалуйста, обратитесь к фрагменту. 

body{background-color: black}
img {

    /* For browsers that do not support gradients */
    background-image: radial-gradient(circle, white, black, black);
    padding: 50px;
}
<body>

<img src="https://vignette.wikia.nocookie.net/fantendo/images/a/ae/250px-Captain_Falcon_SSB4.png" />
</body>
...