Бормотухи.НЕТ

Вернуться   Бормотухи.НЕТ > Web-мастеру > vBulletin 3.х
Расширенный поиск

vBulletin 3.х Раздел о vBulletin и всем что касается этого скрипта

Ответ
 
Опции темы Поиск в этой теме
Старый 03.12.2010, 14:59 Вверх   #1
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
Вопрос Как добавить тень к раскрывающемуся списку

Вот такую хочетца:



к примеру, к этому списку:



  Ответить с цитированием
Старый 03.12.2010, 22:09 Вверх   #2
Старший модератор
 
Аватар для Prometej
Prometej вне форума
Доп. информация
По умолчанию

Можно к любому меню присобачить. Если Вы дружите с js
  Ответить с цитированием
Старый 03.12.2010, 22:19 Вверх   #3
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
По умолчанию

А поподробнее можно?) Ооочень нужно.
  Ответить с цитированием
Старый 03.12.2010, 23:17 Вверх   #4
Старший модератор
 
Аватар для Prometej
Prometej вне форума
Доп. информация
По умолчанию

Jawa Scripts.
  Ответить с цитированием
Старый 04.12.2010, 18:04 Вверх   #5
forever alone
 
Аватар для no name
no name вне форума
Доп. информация
По умолчанию

Цитата Сообщение от Prometej Посмотреть сообщение
Jawa Scripts
java scripts
  Ответить с цитированием
Старый 05.12.2010, 03:12 Вверх   #6
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
Счастье

Оказывается все очень просто... даже java scripts не надо изучать)))

Вот готовые коды на радость всем:

1-Тень объекта со всех сторон:

PHP код:
box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555; 
2-Тень объекта справа и снизу:

PHP код:
box-shadow:5px 5px 10px 0 #555555;
-webkit-box-shadow:5px 5px 10px 0 #555555;
-moz-box-shadow:5px 5px 10px 0 #555555; 
3-Тень объекта слева и сверху:

PHP код:
box-shadow:-5px -5px 10px 0 #555555;
-webkit-box-shadow:-5px -5px 10px 0 #555555;
-moz-box-shadow:-5px -5px 10px 0 #555555; 
4-Тень направлена внутрь объекта:

PHP код:
box-shadow:inset 0 0 10px 0 #555555;
-webkit-box-shadow:inset 0 0 10px 0 #555555;
-moz-box-shadow:inset 0 0 10px 0 #555555; 
Как Вы видете указаны 4 значения и цвет:

0 0 10px 0 #555555;
Первое значение (у меня выставлено “0″) – сдвиг на X px по горизонтали;
Второе значение – сдвиг на X px по вертикали;
Третье значение (10px) – радиус размытия (X px);
Четвертое значение – радиус растяжения тени (X px);
Ну, и пятое значение – это цвет.

Применить и проверить любую тень можно, прописав код в: Ваш стиль -> Основная таблица CSS -> Граница таблицы -> Дополнительные атрибуты CSS -> Сохранить


Браузеры, которые на данный момент поддерживают это свойство: Firefox 3.6.3 (начиная с 3.5); Opera 10.51 (10.50); Chrome 4.1.249.1045; Safari 4.0.4.
  Ответить с цитированием
2 пользователя(ей) сказали cпасибо:
Старый 05.12.2010, 03:17 Вверх   #7
Модератор
 
Аватар для Slavok47
Slavok47 вне форума
Доп. информация
По умолчанию

можно проще, поддержка всех браузеров
КОД
Код:
<style type="text/css">
		
/* Задание стилей для слоя тени */
.shadow {
     background:#bbb; /* Задание цвета тени */
     border:1px solid #ddd; /* Задание стиля и цвета границ тени */
     width:200px; /* Задание ширины всего блока */
}

/* Задание стилей для слоя блока */
.block {
     background:#fff; /* Задание цвета фона для блока */
     border:1px solid #6b6b6b;  /* Задание стиля и цвета границ блока */
     position:relative;  /* Задание позиции блока текста относительно тени */
     padding:5px;  /* Задание отступа */
     top:-3px;  /* Отступ сверху (для тени) */
     left:-3px; /* Отступ слева (для тени) */
}
</style>

<html>
<head>
</head>
<body>
<div class="shadow">
<div class="block">
Содержание блока
</div>
</div>
</body>
</html>
РЕЗУЛЬТАТ:
  Ответить с цитированием
2 пользователя(ей) сказали cпасибо:
Старый 05.12.2010, 11:54 Вверх   #8
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
По умолчанию

С тенями я разобрался, а как вот теперь ее правильно "прикрутить" к низпадающим спискам - не знаю... пытался создать условие в таблице css, во втором окошке "Дополнительные определения", вставлял туда код:
PHP код:
.vbmenu_popup {
box-shadow:2px 2px 5px 0 #9F9F9F;
-webkit-box-shadow:2px 2px 5px 0 #9F9F9F;
-moz-box-shadow:2px 2px 5px 0 #9F9F9F;

Помогите присвоить полученную тень... хотя бы на примере низпадающего списка "Навигация", тот что в панели навбар. Плиииз!

Оффтоп

Поможет кто-нибудь или нет?

Последний раз редактировалось Ghost; 20.12.2010 в 20:31..
  Ответить с цитированием
Старый 16.12.2010, 15:42 Вверх   #9
Модератор
 
Аватар для Slavok47
Slavok47 вне форума
Доп. информация
По умолчанию

Оффтоп
  Ответить с цитированием
Cказали cпасибо:
Старый 20.12.2010, 20:26 Вверх   #10
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
Вопрос

Оффтоп
  Ответить с цитированием
Старый 21.12.2010, 12:41 Вверх   #11
Модератор
 
Аватар для Slavok47
Slavok47 вне форума
Доп. информация
По умолчанию

там проблемка с display:none, пока не пойму с чем это связано...
  Ответить с цитированием
Cказали cпасибо:
Старый 24.12.2010, 17:56 Вверх   #12
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
По умолчанию

slavok47, получилось что-нибудь?
  Ответить с цитированием
Старый 24.12.2010, 21:24 Вверх   #13
Модератор
 
Аватар для Slavok47
Slavok47 вне форума
Доп. информация
По умолчанию

нет, уже думаю передалеть меню на ul и li но это нужно подкулючать JS, и тут вопрос, стоит ли эта тень этого?
  Ответить с цитированием
Старый 24.12.2010, 23:22 Вверх   #14
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
По умолчанию

Цитата Сообщение от slavok47 Посмотреть сообщение
нет, уже думаю передалеть меню на ul и li но это нужно подкулючать JS, и тут вопрос, стоит ли эта тень этого?
Стоит!
  Ответить с цитированием
Старый 27.03.2011, 14:58 Вверх   #15
Грамотный форумчанин
 
Аватар для TOREON
TOREON вне форума
Доп. информация
По умолчанию

slavok47, получилось сделать что-нибудь?
  Ответить с цитированием
Ответ

Метки
css3, меню с тенью, тень, тень вокруг объекта

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[Вопрос] Добавить материал blokpravy vBulletin 4.x 7 27.04.2011 01:06
Добавить в закладки vcrimy vBulletin 3.х 7 09.11.2010 18:53
Как добавить колонку еще? sertaras DataLife Engine 3 04.08.2010 02:52
[Вопрос] Как добавить разделы? nE4eHbKoO vBulletin 3.х 2 15.01.2010 20:41
Добавить в избранное kep vBulletin 3.х 12 11.06.2009 16:29


Текущее время: 05:20. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2022, vBulletin Solutions, Inc. Перевод: zCarot
 

Время генерации страницы 0.23799 секунды с 14 запросами