Как создать градиент непрозрачности без цветов на границах div?
У меня есть небольшая проблема, которая, я не уверен, имеет решение.
В основном я хочу создать градиент непрозрачности на границах div, не зависящих от цвета.
Позволь мне объяснить.
У меня есть "переполнение: скрытый" div (который мы будем называть MainDiv), который содержит еще один большой div (который будет называть SlideDiv), который я перемещаю по области просмотра с помощью jquery. Основной div имеет фоновое сложное изображение с "полным окном просмотра", которое также перемещается. Все это создает действительно хороший эффект параллакса.
Как и ожидалось, содержимое "SlideDiv" исчезает за границей области просмотра. Теперь вот трюк. Я бы хотел, чтобы контент не просто исчезал, а исчезал:)
Чтобы это работало, мне нужно создать градиент прозрачности на границах области просмотра. А поскольку на фоне сложное изображение, которое должно быть видно постоянно, этот градиент не может быть связан с цветом. Другими словами, я бы хотел, чтобы "непрозрачность:1 (мы видим содержимое) к непрозрачности:0 (мы не видим содержимое)" градиент, а не "непрозрачность:0 (мы видим содержимое) к белому / Непрозрачность Black/Green/AnyColor:1 (содержимое скрыто за непрозрачным цветом) "градиент.
Это означает, что я не могу использовать -webkit-градиент или -moz-linear-градиент. Или я могу?
Боюсь, я не могу вам ничего показать по причинам, связанным с бизнесом.
Вопросы: - Возможно ли использовать CSS2 или 3, jQuery или плагин или любую другую технологию (кроме flash)? - А если так, то как?:)
Я надеюсь, что я ясно, но я не уверен, так что извините, ребята;)
С уважением, Jibou
2 ответа
Круто.. То, что я получаю от всего вашего запроса, это i.) Вы хотите применить градиент к границе ii.) Также вы хотите, чтобы эффект Eade-In и Fade-Edge на границе.
если я понял это правильно или очень близко, вы можете использовать следующие приемы. я.) Перейдите по этой ссылке, чтобы получить градиент на границе с CSS. II.) Это может быть сложно: вы можете создать фигуру SVG для с градиентами и поместить ее с абсолютным позиционированием в ваш основной div с полной шириной и высотой (есть много других способов управления высотой и шириной элемента.). Поскольку это будет изображение или скрипт SVG, вам не нужно беспокоиться о результате.
если я не иду к решению вашей проблемы. дайте мне знать, я попробую еще раз.
Посмотрите на это. Вы можете выбрать градиент, который вам нравится, и из него вы можете сохранить CSS для любого браузера, который поддерживает градиенты