Форум

WoW-rotfl · #1 (**permalink**) 19.09.2012, 20:09

всем привет, подскажи пожалуйста как сделать тень внутри дива только сверху и снизу?! без малейшего размытия по бокам, разумеется только css спасибо

dmitry111 · #2 (**permalink**) 19.09.2012, 20:37

не знал что 4-ый параметр можно писать с минусом.

Aetae · #3 (**permalink**) 19.09.2012, 23:04

На самом деле логичнее это делать градиентом..

WoW-rotfl · #4 (**permalink**) 20.09.2012, 12:40

Дзен-трансгуманист,
Спасибо действительно то что нужно, а то уже итак и эдак..
Aetae,
А можешь показать рабочий пример буду очень признателен.

P.S. В который раз убеждаюсь что на этом форуме сидят не тролли отправляющие читать мануал, даже на самые глупые вопросы оказывают помощь.

ksa · #5 (**permalink**) 20.09.2012, 13:18

Сообщение от WoW-rotfl

Aetae,
А можешь показать рабочий пример буду очень признателен.

В ЦСС3 поддерживается несколько фоновых картинок...

background-image: url(путь к файлу) | none[, url(путь к файлу) | none]*

Умеешь делать одну тень градиентом? Таки сделаешь и вторую, через запятую...

ksa · #6 (**permalink**) 20.09.2012, 13:20

Можно еще сделать несколько ДИВов внутри материнского, у которых бордер (верхний и нижний) будут имитировать тень...

Но это все старые приёмы...

Aetae · #7 (**permalink**) 20.09.2012, 14:56

ksa, щито?

<!DOCTYPE html>
<html>
<head>
<style>
 
.shadow {
  background:#fc0 -moz-linear-gradient(rgba(0,0,0,0.5) 0, transparent 25%, transparent 75%, rgba(0,0,0,0.5) 100%);
  background:#fc0 -webkit-linear-gradient(rgba(0,0,0,0.5) 0, transparent 25%, transparent 75%, rgba(0,0,0,0.5) 100%);
  background:#fc0 -o-linear-gradient(rgba(0,0,0,0.5) 0, transparent 25%, transparent 75%, rgba(0,0,0,0.5) 100%);
  background:#fc0 linear-gradient(rgba(0,0,0,0.5) 0, transparent 25%, transparent 75%, rgba(0,0,0,0.5) 100%);
  padding: 10px;
}
 
</style>
</head>
<body>
<div class="shadow">всем привет, подскажи пожалуйста как сделать тень внутри дива только сверху и снизу?! без малейшего размытия по бокам, разумеется только css спасибо</div>
</body>
</html>

Aetae · #8 (**permalink**) 20.09.2012, 18:09

Не вижу разницы в отображении, честно говоря.

В плане логики - это именно градиент, а не тень.

В плане же реализации применяется 1 градиент вместо 2х теней, что:
1. производительнее,
2. лаконичнее,
3. градиент поддерживаться начал раньше чем возможность задания сразу нескольких значений одного параметра, и сам параметр box-shadow.

WoW-rotfl · #9 (**permalink**) 21.09.2012, 10:40

спасибо вам обоим, правда есть что почерпнуть

Форум

Справочник

Discord чат

Курсы javascript