Soft Edges с использованием CSS?

20

Я использую RGBA для создания прозрачного фона, который накладывается поверх изображения. Работает отлично. Мои вопросы таковы: есть ли способ «размягчить» края окна, где он больше течет в изображение, и жесткий край.

Вот мой CSS для коробки:

#past{
    position:absolute;
    left:0;
    top:363px;
    background-color: rgba(34,34,34,0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    /* For IE 8*/
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
    z-index:10;
    padding:10px;
}

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

Также я бы предпочел, чтобы это вообще возможно для работы во всех браузерах.

Спасибо за помощь. = & GT;     

задан L84 06.08.2011 в 06:34
источник
  • ссылка не работает. –  Mick 09.03.2013 в 07:30

3 ответа

39

Другой вариант - использовать один из моих личных любимых инструментов CSS: box-shadow .

Тень коробки - это тень на узле. Это выглядит так:

-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);

Аргументы:

1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect.  0 means no blur.
color: The color of the shadow.

Итак, вы можете оставить свой текущий дизайн и добавить тень в виде тени:

box-shadow: 0px -2px 2px rgba(34,34,34,0.6);

Это должно дать вам «размытый» верхний край.

Этот веб-сайт поможет с дополнительной информацией: Ссылка

    
ответ дан OverZealous 06.08.2011 в 07:23
источник
  • Это отличное объяснение ящика, которое я продолжу возвращать! Хорошо подходит для моего стиля обучения. –  Thomas 14.12.2016 в 20:19
  • Пожалуйста, не связывайтесь с w3schools, скорее обратитесь к mdn developer.mozilla.org/en-US/docs/Web/CSS/box-shadow –  surfer190 21.10.2017 в 17:33
4

Это зависит от того, какой тип затухания вы ищете.

Но с теневыми и закругленными углами вы можете получить хороший результат. Закругленные углы, потому что чем больше тень, тем более странная она будет выглядеть по краям, если вы не сравните ее с закругленными углами.

Ссылка

также .. Ссылка

    
ответ дан Joonas 06.08.2011 в 07:27
источник
1

Вы можете использовать CSS-градиент - хотя в браузерах нет согласованного согласования, поэтому вам нужно будет его кодировать для каждого

Аналогично: прозрачность CSS3 + градиент

Градиент должен быть более прозрачным сверху или в правом верхнем углу (в зависимости от возможностей)

    
ответ дан Jacek Kaniuk 06.08.2011 в 06:52
источник
  • Выглядит интересно ... Придется им возиться и посмотреть, что я получу. –  L84 06.08.2011 в 06:55