Создание динамического радиального фона

Я пытаюсь создать веб-сайт и хотел бы добавить фон, где пользователь мог бы выбрать цвет.Создание динамического радиального фона

Я хотел бы добавить своего рода лучевую светлую тень, вместо того, чтобы иметь плоский цвет на фоне.

Я нашел изображение, которое я имею в виду, может быть, это может помочь вам понять, что я пытаюсь достичь: Red background with a slightly lowered centered radial shadow.

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

источник

2015-06-02 auhmaan

Я думаю, вы найдете этот сайт полезным: http: //www.cssmatic.com/gradient-generator# '\ -moz \-linear \ -gradient \% 28left \% 2C \% 20rgba \% 28248 \ % 2C80 \% 2C50 \% 2C1 \% 29 \% 200 \% 25 \% 2C \% 20rgba \% 28241 \% 2C111 \% 2C92 \% 2C1 \% 29 \% 2050 \% 25 \% 2C \% 20rgba \% 28246 \% 2C41 \% 2C12 \% 2C1 \% 29 \% 2051 \% 25 \% 2C \% 20rgba \% 28240 \% 2C47 \% 2C23 \% 2C1 \% 29 \% 2071 \% 25 \% 2C \% 20rgba \% 28231 \% 2C56 \% 2C39 \% 2C1 \% 29 \% 20100 \% 25 \% 29 \% 3B ' – Daemedeor

Это действительно так! Я просто настраиваю его, и я отправлю ответ, может быть полезен кому-то позже. – auhmaan

Я не совсем уверен, что вы захотите сделать это в SVG .... хотя. он создает ... загрузка на браузер без необходимости. если вы не планируете что-то делать с этим. – Daemedeor

Для эффекта я искал, это довольно близко к ответу (я не подправить положение фона, как я хотел немного понижен, но это не важно):

<!DOCTYPE html> 
<html> 
<style type="text/css"> 
    html { 
     /* Background solid color */ 
     background: rgba(255, 127, 0, 1); 

     /* Old Browsers */ 
     background-image: rgba(0, 0, 0, 0); 

     /* FF3.6+ */ 
     background-image: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%); 

     /* Chrome, Safari4+ */ 
     background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.20))); 

     /* Chrome10+,Safari5.1+ */ 
     background-image: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%); 

     /* Opera 11.10+ */ 
     background-image: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%); 

     /* IE 10+ */ 
     background-image: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%); 

     /* W3C */ 
     background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.20) 100%); 

     /* Fixes to set the radial shadow fixed */ 
     background-repeat: no-repeat; 
     background-attachment: fixed; 

     /* Fix to set the radial shadow the height of the window */ 
     min-height: 100vh; 
    }  
</style> 

<body> </body> 
</html>

Edit

Я работал с фонами и нашел ответ, который я хотел в самом начале:

background-image: 
    radial-gradient(
    50vw 80vh at 50vw 80vh, 
    rgba(0, 0, 0, 0) 50%, 
    rgba(0, 0, 0, 0.25) 100% 
);

Пояснение:

Первый 50vw 80vh было установить радиальный градиент с 50% от виртуальной ширины окна и 80% виртуальной высоты;
Второй 50vw 80vh должен был установить радиальный градиент 50% виртуальной ширины слева и 80% виртуальной высоты сверху;
Первый rgba(0, 0, 0, 0) 50% устанавливает цвет радиального градиента от 0% до 50% от размера градиента полностью прозрачным;
Второй rgba(0, 0, 0, 0.25) 100% устанавливает цвет радиального градиента от 50% (поскольку последний цвет-стоп равен 50%) до 100% от градиента, черный, слегка прозрачный (1/4 или 25%, если быть точным);

Надеюсь, я не сказал ничего плохого и что это может быть полезно для кого-то.

источник

2015-06-02 02:33:03 auhmaan

Создание динамического радиального фона

ответ

Смежные вопросы