object 1 окт 2008 в 20:00

JS-тень

1 мин

1.4K

Веб-разработка*

+124

Комментарии 61

DarkPhoenix 1 окт 2008 в 20:24

Мне понравилось; пожалуй, буду использовать. Спасибо!

object 1 окт 2008 в 20:26

пожалуйста)

insecticide 1 окт 2008 в 20:49

хм… неплохо, понравилось :)

jAx 1 окт 2008 в 20:50

Прикильно, но тень немного грубоватой получается. Но для решения «без пнг» — здорово. Я видел похожее решение у Mootools, для их проекта Mocha (http://mochaui.com/demo/). Там похожая настройка есть.

alive 1 окт 2008 в 20:54

Если мне не изменяет моя память, в Mocha через canvas реализовано, а здесь дивами.

object 1 окт 2008 в 22:36

отлично, спасибо за ссылку

rossiysky 1 окт 2008 в 20:53

Отлично, только вот к сожалению в эксплорере прозрачности нет :-(

alive 1 окт 2008 в 20:56

У меня в IE7 отлично работает.

XaocCPS 1 окт 2008 в 21:19

подтверждаю, в ie8 beta 2 не работает прозрачность, но в режиме совместимости с ie7 все работает

это происходит в связи с тем, что в новом ie8 «filter», который использует автор, устранен
я не так давно описывал это habrahabr.ru/blogs/ie/39446/

необходимо использовать нечто вроде этого:
-ms-filter: «progid: DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)»

автор! поправьте скрипт для работы в ie8!

object 1 окт 2008 в 22:32

спасибо, сейчас поправлю

XaocCPS 2 окт 2008 в 08:43

так и не работает
что-то не получилось?

vietnamese 1 окт 2008 в 21:05

Довольно-таки громоздко… Кучу ненужных блоков. В 6 ие 100% будут тормоза. ИМХО этот скрипт лишний. Разве что для собственного развития.

НЛО прилетело и опубликовало эту надпись здесь

object 1 окт 2008 в 22:33

это и делалось для собственного развития, опубликовал чтобы доработать, плюс вдруг кто-то будет таки использовать, в любом случае спасибо)

vietnamese 3 окт 2008 в 11:53

и тебе «спасибо» за минус в карму.

-1

object 3 окт 2008 в 11:55

я не минусил, так что спасибо не мне)

vietnamese 3 окт 2008 в 12:04

:)
тогда сорри. Пусть тому чуваку икнется раз 300…

rossiysky 1 окт 2008 в 21:12

Я в 8b2 смотрел.

Zitrix 1 окт 2008 в 21:18

я, как фанат отсутствия хлама в html, в шоке :)
редкий пример когда статические блоки тормозят браузер. второй фокс.

Zitrix 1 окт 2008 в 21:22

ну, и раз на то пошло, то уж надо как в фотошопе: направление (угол) и «высота» источника освещения. а, да, там еще можно кривую интенсивности выстраивать :)

DarkPhoenix 1 окт 2008 в 21:30

Нулевой Хром, полет нормальный :)

Zitrix 1 окт 2008 в 21:37

разумеется, но не Хромом единым :) когда ие6 тормозит — еще простительно, но надо что-то переделать, а когда тормозит фокс/опера — надо подумать а стоило вообще браться?

object 1 окт 2008 в 22:35

я сам фанат отсутствия цсс хлама в хтмл, но тут что-то расслабился)

ring0 1 окт 2008 в 21:47

Круто, в мемориз. Спасибо.

Nikolay_Smeh 1 окт 2008 в 21:56

Красиво, но, имхо, это изобретение велосипеда. Лучше использовать пнг.

Banzeg 1 окт 2008 в 22:01

Это хороший пример, но все же соглашусь с критикой: лучше отдать пару «лишних» Кб png.

brain2xml 1 окт 2008 в 22:08

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

-1

proc 1 окт 2008 в 22:49

Тут уже писали. А можно менять направление? То есть чтоб она вылизала не со всех 4-ех сторон одинаково.

object 1 окт 2008 в 22:58

попробую сделать

object 1 окт 2008 в 23:58

готово

proc 2 окт 2008 в 00:03

Да, не полохо,. Только смещение должно по x и y, а не только по x или по y

Bonch 1 окт 2008 в 23:13

Это не тень. Это glow.

НЛО прилетело и опубликовало эту надпись здесь

indalive 1 окт 2008 в 23:24

оффтоп, почему JS, но ПНГ?]]

-1

object 1 окт 2008 в 23:57

уважение к джс и неуважение к пнг может быть, вообще не задумывался)

indalive 2 окт 2008 в 00:05

что по-русски пишется — не уважительно, по Вашему?

-1

indalive 2 окт 2008 в 01:46

«по-Вашему», умник! (сам себе)

-1

indalive 2 окт 2008 в 10:53

кому-то не понравился мой ход рассуждений=[

youmee 1 окт 2008 в 23:26

автор, ты молодец. Не важно велосипед это или нет. Это саморазвитие. Эксперементируй ещё!

ps: если так обо всём говорить, тогда бы и изобретений и «новых фишек» не было бы. Веб 2.0 никогда бы не стал таким и энергосберегающих лампочек бы не было.

object 1 окт 2008 в 23:57

спасибо)

name 2 окт 2008 в 00:36

Господи, этот вопрос люди решили ещё в 2006 году: www.erik-rasmussen.com/blog/2006/12/04/the-shadower-realistic-drop-shadows-in-javascript/

-4

gentleman 2 окт 2008 в 01:29

Что вы сразу «господи». Выше написано, что человек для саморазвития делал. Это во-первых. Во-вторых там целая библиотека под это подключается и выглядит корявенько, а здесь — 5 кб, которые еще и ужать можно. В-третьих человек старался, у него и получилось-то неплохо, чего тут вздыхать и разводить руками. Ну прям как 80-летняя бабка: «Помню, в 54-м мы и не такое делали...» )

progger 2 окт 2008 в 04:19

хм… Жалко, что в Firefox 3 не работает — тень черная.
Надо код глянуть

tigerman 2 окт 2008 в 05:06

У меня в FF3 все работает. Попробуйте уменьшить значение параметра «Плотность тени».

progger 2 окт 2008 в 05:42

версия 3.0, тень черная при любой плотности

reaferon 2 окт 2008 в 08:36

Использую для таких целей небольшой плагинчик для Jquery:
plugins.jquery.com/project/DropShadow
пример: eyebulb.com/dropshadow/

gentleman 2 окт 2008 в 12:04

Эх, доживу ли до тех времён, когда люди просто устанут писать в постах про js «а вот в jQuery ...»?

P.S. Хотя отмечу, что примеры как минимум забавные.

reaferon 2 окт 2008 в 12:10

А я и не утверждаю, что Jquery — ось добра. Если в проекте не используется, то и для требуемого функционала есть смысл использовать отдельный маленький скрипт. Другое дело, лично у меня всё больше проектов используют JQuery изначально.

НЛО прилетело и опубликовало эту надпись здесь

DeadLy 2 окт 2008 в 09:50

Ещё, если можно, попробовать прикрутить такое смещение, как «вправо и вниз» и т. д.

maxz 2 окт 2008 в 10:32

Замечательно, особенно понравилось это: «else alert('что-то вы, ребята, накликали не то :)')»

John_Cherep 2 окт 2008 в 11:09

по-моему, очень круто =)

затестил в ИЕ 5,5 и 6,0. Ну, подтормаживает, ну и, что =) Зато работает везде и не PNG.

Если так судить, то скрипты, которые прикручиваются к сайту, чтобы он нормально отображался вплоть до ИЕ 5,5 с какой либо картинкой ПНГшной в теле документа — тоже весят дохера.

Fade 2 окт 2008 в 11:32

Большое спасибо за труд. давно уже искал решение, т. к. существующие (представленные в комментариях к этому топику) не устраивают своей громоздкостью. У вас реально код получился очень компактный.

gdX 2 окт 2008 в 15:12

Интересно!
У тени можно ещё смещение в 2 стороны сделать — право/низ, к примеру.
И тип тени можно реализовать не уходящую в прозрачность, а с чёткими краями.

sergonavt 3 окт 2008 в 08:05

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

object 3 окт 2008 в 11:36

можно характеристики написать, а то на слух не сильно хорошо понял

sergonavt 3 окт 2008 в 21:23

Поставьте в Вашем примере размер тени побольше (чтобы было проще) и уменьшайте ширину окна браузера. Как только правый край окна наедет на тень — появится горизонтальный скроллинг. Проблема не в том, что кто-то будет сужать браузер (это его трудности), а в том, что div с тенью может открыться слишком близко к краю, и тогда появится скроллинг — хотя div-то уместился в области видимости целиком.

leshaogonkov 3 окт 2008 в 13:06

по мне, так лучше скопировать интерфейс фотошопа, что бы удобнее было бы оттуда настройки копировать )

object 3 окт 2008 в 15:14

хех, у шопа алгоритм просчета тени мне неизвестен, к тому же тут интерфейс просто для интереса, в реале если кто-то и будет юзать этот скрипт, то настройки тени будут задоваться один раз

НЛО прилетело и опубликовало эту надпись здесь

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

JS-тень

Комментарии 61

Публикации

Истории