Вопрос:

CSS3 Box-Shadow Линейный градиент?

css cross-browser css3 linear-gradients

45962 просмотра

5 ответа

9442 Репутация автора

Есть ли способ в CSS3 создать кросс-браузерную (например: Mozilla, Webkit и Opera) тень вставки, которая будет переходить с черного сверху на белый снизу? Самый близкий способ, который я обнаружил, это сделать только для внешней стороны тени один цвет, а затем перейти к другому цвету внутри, на этой странице: http://www.css3.info/preview/box-shadow /

Автор: Oliver Spryn Источник Размещён: 10.03.2012 08:00

Ответы (5)


2 плюса

9713 Репутация автора

Решение

К сожалению, это невозможно. Я предлагаю просто использовать div с фоновым изображением, которое вы создаете в Photoshop или аналогично.

Автор: jacktheripper Размещён: 10.03.2012 08:19

14 плюса

3110 Репутация автора

Взгляните на это видео от Lea Verou . Раздел, на который я ссылаюсь, говорит о чем-то очень похожем, где вы используете градиенты фонового изображения, чтобы создать нечто вроде тени. Если я смогу найти хороший рабочий пример, я отправлю ответ, но это должно дать вам хорошее место для начала. Вы также можете сделать некоторые действительно классные вещи, такие как скручивание тени блока с :afterпсевдоклассом, чтобы создать тень.

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

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  
  background:
    radial-gradient(at 50% 0, black, transparent 70%),
    linear-gradient(0deg, black, transparent 50%) bottom;
  background-size: 100% 15px;
  background-repeat: no-repeat;
}

.underline {
    width: 6em;
    text-align:center;
    font-size:30px;
}

.underline:after {
    content: '\00a0';
    background-image:
      radial-gradient(at 50% 0, blue 0%, red 50%, transparent 75%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    float:left;
    width:100%;
}
<div class="container">
  <div class="underline">Hello, world!</div>
</div>

Автор: redbmk Размещён: 05.04.2013 06:17

3 плюса

71 Репутация автора

Попробуйте использовать элемент: before, чтобы создать «тень».

  .classname {
    &:before {
      content: '';
      position: absolute;
      display: none;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      z-index: -1;
      background: linear-gradient(to bottom, red, blue);


    }

    &:hover {
      &:before {
        display: inline-block;
      }
    }
  }

Приведенный выше код является примером того, как настроить такой эффект при наведении.

Автор: ink Размещён: 23.03.2016 08:30

2 плюса

49 Репутация автора

Необходимо два div:

1: с линейным градиентом + размытие:

.gr{/* Permalink - use to edit and share this gradient:         http://colorzilla.com/gradient-editor/#f2305a+0,fca832+100 */
background: #f2305a; /* Old browsers */
background: -moz-linear-gradient(left, #f2305a 0%, #fca832 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #f2305a 0%,#fca832 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #f2305a 0%,#fca832 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2305a', endColorstr='#fca832',GradientType=1 );  

filter:blur(10px);

height:200px;
}

2: над другим, содержание.

.zz {background:#fff;  position: relative; top:-200px;
height:200px;
}

Затем:

<div class='gr'></div>
<div class='zz'>BOX</div>

DEMO

Автор: Ignacio Ramos Размещён: 25.06.2018 09:03

0 плюса

1 Репутация автора

Поздно на вечеринку, но, возможно, кто-то найдет это полезным! На самом деле вы можете сделать это с несколькими тенями на box-shadow:

box-shadow: inset 0px 33px 25px 0 #000, inset 0 66px 15px 0px #ccc ,inset 0 99px 5px 0px #fff

пример codepen: https://codepen.io/InFecT3D/pen/JQdmeL

Примечание: это может быть немного «хакерский» подход, но в некоторых случаях это помогает.

Автор: Niv'O Размещён: 13.06.2019 09:12
Вопросы из категории :
32x32