Проблемы с реализацией эффектов.

[galloko]

Всем доброго времени суток.

В общем у меня 2 вопроса. Времени на них убил уже неделю. Рад буду любой помощи.

1) Пытаюсь реализовать эффект с картинкой. В определенном месте сайта висит полупрозрачный логотип в виде прожектора, который должен качаться из стороны в сторону. Пытался сделать на css3 но он мне уже всю плешь проел.

2) Реализовал кнопки с подменой картинок. Но при открытии сайта с мобильно этот эффект естественно не работает. Как можно сделать чтобы при открытии с мобильного устройства показывалась только вторая картинка?

Спасибо за внимание, Надеюсь на вашу помощь.

[Alarr]

1) Такие логотипы обычно делают гифками. ПРосто в фотошопе создаёшь гифку и ставишь на фон своего лого.

Ну и если пользоваться хтмл5, то можно поробовать сделать логотип с помощью тега <video>. Хотя сам такого никогда не делал, просто предлагаю как вариант для рассмотрения

2)

Реализовал кнопки с подменой картинок.

Спрайты? Можно попробовать сделать так, что бы вторая картинка появлялась не на :hover, а на :active.

[galloko]

1) Такие логотипы обычно делают гифками. ПРосто в фотошопе создаёшь гифку и ставишь на фон своего лого.

Ну и если пользоваться хтмл5, то можно поробовать сделать логотип с помощью тега <video>. Хотя сам такого никогда не делал, просто предлагаю как вариант для рассмотрения

2)

Реализовал кнопки с подменой картинок.

Спрайты? Можно попробовать сделать так, что бы вторая картинка появлялась не на :hover, а на :active.

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

[Alarr]

Тогда по первому скорей всего <video>.

Тут класно реализовано видеоhttp://eu.battle.net/hearthstone/ru/

[galloko]

Тогда по первому скорей всего <video>.

Тут класно реализовано видео http://eu.battle.net/hearthstone/ru/

То что надо! Спасибо огромное за помощь! Буду пробовать, о результатах отпишусь!

[Alarr]

Тогда по первому скорей всего <video>.

Тут класно реализовано видео http://eu.battle.net/hearthstone/ru/

То что надо! Спасибо огромное за помощь! Буду пробовать, о результатах отпишусь!

Пожалуйста, и ссылочку тоже если можно кините, что бы посмотреть на результат

[galloko]

Тогда по первому скорей всего <video>.

Тут класно реализовано видео http://eu.battle.net/hearthstone/ru/

То что надо! Спасибо огромное за помощь! Буду пробовать, о результатах отпишусь!

Пожалуйста, и ссылочку тоже если можно кините, что бы посмотреть на результат

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

Кстати с актив по кнопкам тоже не помогает

Edited June 3, 2013 by galloko

[galloko]

Как можно загрузить альтернативный лист CSS или HTML страницу при условии открытия с мобильных устройств? Уже прям голову сломал с этими кнопками и подменой картинок.

[Vulner]

Как можно загрузить альтернативный лист CSS или HTML страницу при условии открытия с мобильных устройств? Уже прям голову сломал с этими кнопками и подменой картинок.

Я, честно говоря, не силен пока в таких вопросах, но может быть вам нужно использовать это : http://htmlbook.ru/css/media ?

Edited June 4, 2013 by Vulner

[galloko]

Как можно загрузить альтернативный лист CSS или HTML страницу при условии открытия с мобильных устройств? Уже прям голову сломал с этими кнопками и подменой картинок.

Я, честно говоря, не силен пока в таких вопросах, но может быть вам нужно использовать это : http://htmlbook.ru/css/media ?

не помогает,браузеры телефонов определяются как десктоп уже.

[klierik]

не помогает,браузеры телефонов определяются как десктоп уже.

а ты точно дочитал до "Пример 4. Ширина макета"

даная технология позволять применить стили при условии в которм учавствует ширина экрана.

вот пример: http://twitter.github.io/bootstrap/getting-started.html#examples

всё отлично работает и на мобильниках и на десктопе.

[galloko]

не помогает,браузеры телефонов определяются как десктоп уже.

а ты точно дочитал до "Пример 4. Ширина макета"

даная технология позволять применить стили при условии в которм учавствует ширина экрана.

вот пример: http://twitter.githu...d.html#examples

всё отлично работает и на мобильниках и на десктопе.

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

[klierik]

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

других простых способов это сделать, скорее всего, нет.

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

[galloko]

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

других простых способов это сделать, скорее всего, нет.

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

а как мне это поможет? у меня у самого телефон с фул хд экраном, +последний iPad еще круче

[klierik]

дело в том что не важно сколько у него точек на дюйм -- ведь размер самого устройства не меняется.

можно отталкиватся от: http://www.w3.org/TR/css3-mediaqueries/#device-width

к примеру под устройства с высоким dpi подойдет:

http://www.w3.org/TR/css3-mediaqueries/#resolution

полный список в начале страницы.

[galloko]

Есть вопрос касательно позиционирования. Имеется таблица с разрешением 1920*990, как можно сделать чтобы при прогрузке на мониторах с малым разрешением, таблица была по средине а не по левому краю? А для тех кому нужно есть скрол?