Як створити коробку-тінь для вставки лише з одного боку?


109

Чи можна якось мати лише вставну коробку-тінь на одній стороні діва? Зауважте, що я говорю тут про вставну коробку-тінь, а не про звичайну зовнішню тінь.

Наприклад, у наступному JSFiddle ви побачите, що вбудована тінь з’являється на всіх 4 сторонах, в різному ступені.

Як я можу отримати це ТОЛЬКО шоу вгорі? Або максимум ТІЛЬКИ вгорі та внизу?

JSFiddle: http://jsfiddle.net/ahmadka/KFrun/

.box {
  -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
  box-shadow: inset 0px 5px 10px 1px #000000;
}

.text {
  padding: 20px;
}
<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>


3
Альтернативним (і повністю настроюваним) способом буде фоновий градієнт ...
vals

Відповіді:


237

Це те, що ви шукаєте. У ньому є приклади для кожної сторони, яку ви хочете, з тінню.

.top-box
{
    box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
.left-box
{
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.right-box
{
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}
.bottom-box
{
    box-shadow: inset 0 -7px 9px -7px rgba(0,0,0,0.4);
}

Щоб отримати додаткові приклади, перегляньте фрагмент:


13

Трюк - це секунда .box-innerвсередині, яка має ширину більше, ніж оригінал .box, і box-shadowзастосовується до цього.

Потім додайте більше накладки до, .textщоб компенсувати додаткову ширину.

Ось як виглядає логіка:

логіка коробки

А ось як це робиться в CSS:

Максимальну ширину використовуйте для того, .inner-boxщоб не .boxрозширюватись, а overflowпереконатися, що залишилося обрізано:

.box {
    max-width: 100% !important;
    overflow: hidden;
}

На 110% ширше, ніж у батьків, що на 100% в контексті дитини (має бути таким самим, наприклад, коли батько .boxмає фіксовану ширину). Негативні поля компенсують ширину і приводять елемент до центру (замість того, щоб ховати лише праву частину):

.box-inner {
    width: 110%;
    margin-left:-5%;
    margin-right: -5%;
    -webkit-box-shadow: inset 0px 5px 10px 1px #000000;
    box-shadow: inset 0px 5px 10px 1px #000000;
}

І додайте трохи накладки на вісь X, щоб компенсувати ширші .inner-box:

.text {
    padding: 20px 40px;
}

Ось робоча скрипка.

Якщо ви оглянете Fiddle, ви побачите:

.box .box-внутрішній .текст


Як ви можете просто розмістити посилання на скрипку без коду? : O
Мохаммед Аріб Сиддікі

Людина! Це ТАК хак! Класно: П
Мохаммед Аріб Сиддікі

У своєму Firefox я не бачу тексту праворуч та ліворуч. Текст просто відрізається. (Ось знімок екрана goo.gl/aO8ZX ) Я спробував це сам і використав кілька додаткових divдля приховування тіні ... jsfiddle.net/KFrun/19
Fabian N.

Так, я використовую jsfiddle.net/KFrun/6/ Чи можлива проблема з версією Firefox? Я використовую Firefox 21.0 для Ubuntu ...
Fabian N.

Але внизу все ще є тінь
Коді Гулднер

8

Трохи пізно, але повторюваний відповідь, яка не потребує зміни прокладки або додавання додаткових дівок, можна знайти тут: У вас є проблема лише з вставним полем "тінь" . У ній сказано: "Використовуйте негативне значення для четвертої довжини, яка визначає відстань поширення. Це часто не помічається, але підтримується всіма основними браузерами".

З Відповідач в скрипку :

box-shadow: inset 0 -10px 10px -10px #000000;

7

Це трохи підходить.

.box
{
    -webkit-box-shadow: inset -1px 10px 5px -3px #000000;
    box-shadow: inset -1px 10px 5px -3px #000000;
}

Ось що я спробував! Але він цього не хотів, тому не опублікував це як відповідь! :(
Мохаммед Аріб Сиддікі

Великий, як. Дякую ❤️
mghhgm

Тут може бути найпростіша відповідь (хоча б на даний момент). Дякую
Гендріт

1

спробуйте, можливо, корисно ...

box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 3px #cbc9c9;
                    -webkit-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -o-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;
                    -moz-box-shadow: 0 0 0 3px rgb(255,255,255), 0 7px 5px #cbc9c9;  

вище, CSSтому що у вас внизу є тінь коробки.
Ви можете червоніші тут


1

Це може бути не точним, що ви шукаєте, але ви можете створити дуже подібний ефект, використовуючи rgbaв поєднанні з linear-gradient:

  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);

Це створює лінійний градієнт від чорного з непрозорістю 50% ( rgba(0,0,0,.5)) до прозорого ( rgba(0,0,0,0)), який починає грамотно прозоро 30% зверху. Ви можете грати з цими значеннями, щоб створити бажаний ефект. Ви можете мати його з іншого боку, додавши deg-value ( linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%)) або перемикаючи кольори навколо. Якщо ви хочете по-справжньому складні тіні, як різні кути з різних сторін, ви можете навіть почати шарувати linear-gradient.

Ось фрагмент, щоб побачити його в дії:

.box {
  background: linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

.text {
  padding: 20px;
}
<div class="box">
  <div class="text">
    Lorem ipsum ....
  </div>
</div>


0

Тінь для вставки лише на верхній стороні?

#box {
            background: #CCC;
            -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
            font: bold 18px/1.2em sans-serif;
            height: auto;
            margin: 15px auto;
            padding: 75px 15px 25px;
            text-align: center;
            width: 80%;
        }
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.