Тень блока

@qu13t · Регистрация: 02.06.2010

Студворк — интернет-сервис помощи студентам

Можно сделать тень окна с помощью css? Если возможно, то помогите пожалуйста разобраться.

1. Первый вариант это с помощью тега border? Можно, нет?

2. Второй вариант с помощью jpg. Получается надо сделать одну картинку - то есть низ, чтобы было с закруглением(например высотой 15px, шириной 990px). И повторяющуюся по repeat-y (например высотой 1px, шириной 990px)?

Меня интересует первый вариант - это возможно?
А второй вариант я вообще правильно всё себе представил? Я просто ещё ни разу не делал тень для окна, которое меняет свой размер в зависимости от добавления информации.

То что мне надо ниже.
https://www.cyberforum.ru/atta... 1298646742

Vovan-VE · 25.02.2011, 19:00

box-shadow. Совместимость, тест-пример.

@qu13t · 25.02.2011, 19:15 **[ТС]**

чтот не получается.
а что такое moz?
-moz-box-shadow

Vovan-VE · 25.02.2011, 19:33

Сообщение от qu13t

а что такое moz?
-moz-box-shadow

Префикс производителя/разработчика/движка

-moz-	Mozilla FireFox
-o-	Opera
-webkit-	Chrome
-khtml-	Safari

@qu13t · 25.02.2011, 19:55 **[ТС]**

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

Vovan-VE · 25.02.2011, 20:17

qu13t, Так Вы эту тестовую страницу в разных браузерах пооткрывайте. Там же в совместимости все четко написано: IE9+, FF 3.5+ только с префиксом -moz-, Safari4+ и Chrome4+ только с -webkit-, Opera 10.53+. Надо их все вместе писать:

CSS
1
2
3
4
5
.foobar {
    box-shadow: -10px -10px 8px grey;
    -webkit-box-shadow: -10px -10px 8px grey;
    -moz-box-shadow: -10px -10px 8px grey;
}

Где поддерживается, там подействует.

@qu13t · 25.02.2011, 20:53 **[ТС]**

а как в низу тень сделать? и зачем там grey? это же зелёный?

Vovan-VE · 26.02.2011, 07:55

CSS
1
box-shadow: x y R C;

x y - смещение по X и по Y. В Вашем случае оба будут положительные. На глаз попробуйте сколько-нибудь px'ов.
R - радиус размытия тени.
C - цвет тени. В примере была серый grey. Вам надо что-нибудь вроде #444, #777, #bbb

Новые блоги и статьи Все статьи Все блоги /
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81

	Тень блока 25.02.2011, 18:27. Показов 3208. Ответов 7 Метки нет (Все метки) Можно сделать тень окна с помощью css? Если возможно, то помогите пожалуйста разобраться. 1. Первый вариант это с помощью тега border? Можно, нет? 2. Второй вариант с помощью jpg. Получается надо сделать одну картинку - то есть низ, чтобы было с закруглением(например высотой 15px, шириной 990px). И повторяющуюся по repeat-y (например высотой 1px, шириной 990px)? Меня интересует первый вариант - это возможно? А второй вариант я вообще правильно всё себе представил? Я просто ещё ни разу не делал тень для окна, которое меняет свой размер в зависимости от добавления информации. То что мне надо ниже. https://www.cyberforum.ru/atta... 1298646742 Миниатюры 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	25.02.2011, 19:00
	box-shadow. Совместимость, тест-пример. 1

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81
	25.02.2011, 19:15 [ТС]
	чтот не получается. а что такое moz? -moz-box-shadow 0

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81
	25.02.2011, 19:55 [ТС]
	так получается это только в мозиле работает? потому чт она других образцах тени не видно. 0

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81
	25.02.2011, 20:53 [ТС]
	а как в низу тень сделать? и зачем там grey? это же зелёный? 0