Страница 1 из 11
Модератор форума: Yuri_G 
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Как сделать рамку вокруг PNG\GIF картинки?
Как сделать рамку вокруг PNG\GIF картинки?
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 1 | 19:08:21
Есть вот такое изображение в формате GIF.. его задний фон прозрачен как в PNG картинках
Нужно вокруг него сделать свечение цветом.. по контурам видимого - не просто квадратик!
Не нахожу ни редактор, ни средства CSS которые позволили бы сделать это
Есть варианты?


WWW.DOGICA.COM / WWW.DOGICA.ORG
JIussandra
Сообщений: 2
Репутация: 0

Сообщение # 2 | 20:38:06
Плохо ищешь.
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 3 | 14:57:29
ну блестните если нашли
фотошопа 25й версии у меня нет если вы об этом


WWW.DOGICA.COM / WWW.DOGICA.ORG
Rostislav
Сообщений: 2395
Репутация: 591

Сообщение # 4 | 15:19:00
средствами css (box-shadow) вы можете сделать только обводку всей картинки (квадратом), а не видимого

для изменения самой картинки вам потребуется редактор GIF, необходимую программу можете поискать в интернете ("редактор gif")

$Vladimir$
$SUPPORT$
Сообщений: 6207
Репутация: 971

Сообщение # 5 | 15:20:02

Тень блока

Цитата Dogica ()
Нужно вокруг него сделать свечение цветом.. по контурам видимого - не просто квадратик!

Dogica, а как вы представляете это?

Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 6 | 15:50:13
Цитата Rostislav ()
для изменения самой картинки вам потребуется редактор GIF, необходимую программу можете поискать в интернете ("редактор gif")
поэтому и создал этот топик
знаю кучу онлайн гиф редакторов - они не умеют это делать

Цитата $Vladimir$ ()
Dogica, а как вы представляете это?
такую тень я тоже умею сделать и на CSS и в редакторах
а нужна тень по контуру видимого (а не по контуру квадрата картинки)


WWW.DOGICA.COM / WWW.DOGICA.ORG
-SAM-
Сообщений: 117
Репутация: 35

Сообщение # 7 | 00:52:53
Dogica, я бы просто советовал сделать подложку под вашу gif-картинку, или как уже посоветовали - редактором графическим обработать каждый слой, потом до кучи заново собрать gif-ку.
В общем, ничего сложного я в этом не вижу, если вы замахнулись на пропись стилизации - таких стилей я что-то не припомню, а в графических редакторах чего хочешь замутить можно (как и сказал, разбить на кадры, отредактировать их, наложив тень, потом собрать обратно в gif-ку - для этого даже редактор не требуется, есть онлайн-сервисы, которые собирают gif из нескольких картинок, задаются свои эффекты и анимация).
UPD.: начал писать про эффекты, потом вспомнил, что возможности HTML5 позволяют многое, погуглисть "эффекты canvas" "canvas свечение" - а так, я с ними не работал (это я к тому, что обработать можно без редактора графического, особенно когда речь идёт о присвоении такового вот вида свечения каждой картинке на странице, чтобы каждую редактировать отдельно в графическом редакторе не пришлось... были бы знания, в вашем же случае - придётся редактировать с помощью редактора графического, наверное, + свои заморочки есть в работе с растровыми\векторными изображениями, а у вас ко всему прочему еще и GIF-анимация).

Ex-ID: 179703 [11 Авг 2012]
Сообщение отредактировал -SAM- - Вторник, 23 Июн 2015, 01:44:07
Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 8 | 13:41:40
Цитата -SAM- ()
UPD.: начал писать про эффекты, потом вспомнил, что возможности HTML5 позволяют многое, погуглисть "эффекты canvas"
спасибо!
думаю это именно то что нужно


WWW.DOGICA.COM / WWW.DOGICA.ORG
GAL8793
Сообщений: 13
Репутация: 13

Сообщение # 9 | 10:19:53
Знаю что можно сделать маску
  • -webkit-mask-image:url(ссылка на картинку);
  • -webkit-mask-repeat: repeat;
    у блока будет контур как у картинки, то есть в изображении что нарисовано это будет видимая часть блока, прозрачный фон у картинки это будет и невидимая часть блока. Можно сделать на картинку маску саму на себя. Но вот box-shadow чот не работает с этим
  • Dogica
    Сообщений: 1230
    Репутация: 352
    Уровень замечаний:

    Сообщение # 10 | 15:13:51
    интересное решение.. поиграюсь посмотрю как работает
    спасибо вам!


    WWW.DOGICA.COM / WWW.DOGICA.ORG
    Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Как сделать рамку вокруг PNG\GIF картинки?
    Страница 1 из 11
    Поиск: