Новые сообщения · Участники · Правила форума · Поиск
Страница 1 из 11
Модератор форума: z-17, Anarki 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Добавляем тень для видео-плеера (Красивое решение!)
Добавляем тень для видео-плеера
MHДата: Пятница, 11.11.2011, 01:39 | Сообщение # 1
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
Я думаю, уже всем известно, что css3 дает возможность добавлять тень не только для элементов текста (text-shadow), но и для блоков (box-shadow). Обычно это свойство используют для внешнего оформления стандартных объектов. Но почему бы нам не применить его в стилях к iframe ?

Сразу приведу 1 пример и 2 пример реализации для большей наглядности.

А это картинка для тех, кто боится переходить по ссылкам:



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

Как этого добиться?

Видео вставлено на страницу с помощью кода, реализованного через iframe (обычный код, взятый для вставки видео из контакта или YouTube и прочих сервисов). Вот как он выглядит:

Code
<iframe src="ссылка на видео" width="***" height="***" frameborder="0"></iframe>


Все, что мы делаем, это добавляем к нему необходимые стили (значения цвета #000000 и размера 50px беру условно):

Code
style="box-shadow:0px 0px 50px #000000; -webkit-box-shadow:0px 0px 50px #0000000; -moz-box-shadow:0px 0px 50px #000000;"


В итоге у нас получается следующий код:

Code
<iframe src="ссылка на видео" width="***" height="***" frameborder="0" style="box-shadow:0px 0px 50px #000000; -webkit-box-shadow:0px 0px 50px #0000000; -moz-box-shadow:0px 0px 50px #000000;"></iframe>


Вот и все! Думаю, подобное решение многим придется по вкусу)) лично мне очень нравится))

P.S. не обязательно постоянно прописывать тень через style. Можно создать необходимый класс и присваивать его всем необходимым элементам. Допустим так:

Это в css:

Code
.videoten {box-shadow:0px 0px 50px #000000; -webkit-box-shadow:0px 0px 50px #0000000; -moz-box-shadow:0px 0px 50px #000000;}


Это готовый код видео:

Code
<iframe src="ссылка на видео" width="***" height="***" frameborder="0" class="videoten"></iframe>


____________________________________________

Материал подготовил - MH

____________________________________________
Как установить кнопки социальных сетей?

Не поленитесь просмотреть весьма внушительный Список рабочих uCoz скриптов

http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH


Сообщение отредактировал MH - Пятница, 11.11.2011, 10:34
 
djemNaДата: Пятница, 11.11.2011, 16:43 | Сообщение # 2
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
MH, а не легче будет просто вставить плеер в div и ему присвоить класс с теню?
-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
MHДата: Пятница, 11.11.2011, 19:16 | Сообщение # 3
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
djemNa, попробуй и ты увидишь, что это плохо сработает))) div будет немного шире видео-плеера и тень не будет его обтекать)
http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH
 
djemNaДата: Пятница, 11.11.2011, 19:22 | Сообщение # 4
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
MH, я знаю.. я это решал двумя дивами и width:auto; помоему)) я рамку создавал вокруг аватара))
-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
MHДата: Суббота, 12.11.2011, 00:25 | Сообщение # 5
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
djemNa, мой вариант проще)))
http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH
 
AnarkiДата: Суббота, 12.11.2011, 09:32 | Сообщение # 6
Генералиссимус
Сообщений: 2386
Репутация: 162
Социальная репутация:

Статус: Offline
Я бы вариант Эмиля бы взял. Просто так удобней например когда модел адаптирован под видео, т.е. видео каталог.
"Если не можешь сделать сам — по крайней мере, помешай другому."
Карел Чапек

◘ Я снова в деле.. >:D ◘
 
SleepWalkerДата: Воскресенье, 13.11.2011, 17:24 | Сообщение # 7
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
а я бы склонился к варианту MH, единственное, что стили бы я вешал бы через цсс, привязываясь через класс дива в котором находится контент всего материала
Code
.class iframe {...}

Time Waits For No One
 
MHДата: Воскресенье, 13.11.2011, 19:16 | Сообщение # 8
Генерал-майор
Сообщений: 394
Репутация: 61
Социальная репутация:

Статус: Offline
SleepWalker, да, хороший вариант))
http://mni.my1.ru/
Подключаем iLoad3 к фотоальбому uCoz
Заменяем стандартную галерею uCoz на FancyBox
Нестандартные решения в системе uCoz
Добавляем тень для видео-плеера
Кнопка "добавить фото" в стиле Google
Вид материалов Фотоальбомы от MH
Кнопки в стиле google
"Страница с полной фотографией и комментариями" by MH
 
UnShameДата: Воскресенье, 13.11.2011, 22:44 | Сообщение # 9
Генералиссимус
Сообщений: 1869
Репутация: 173
Социальная репутация:

Статус: Offline
ТЕНЬ?? Oo
как это я пропустил такой отличный стиль?))

Тот, кто удалит этот пост будет гореть в аду.
 
SandroДата: Вторник, 30.04.2013, 16:01 | Сообщение # 10
Рядовой
Сообщений: 7
Репутация: 0
Социальная репутация:

Статус: Offline
А как мне сделать чтобы была тень, подключаю видео через мультимедиа?

<br><br></span><br><div align="center"><script src="http://tehnomanyak.at.ua/media/?t=video;w=600;h=350;f=http%3A//www.youtube.com/watch%3Fv%3D8wHMBk6j8cw%26feature%3Dplayer_embedded%23%21" type="text/javascript"></script></div>

Добавлено (30.04.2013, 16:01)
---------------------------------------------
Очистите свой сайт от этого

 
Форум о uCoz и Web » Система uCoz » Скрипты для uCoz сайта » Добавляем тень для видео-плеера (Красивое решение!)
Страница 1 из 11
Поиск: