[CSS3] Хоризонтален и вертикален gradient едновременно.


0

Здравейте, проблема ми е следния. Искам да направя един html блоков елемент с фон преливащ към прозрачно в краищата му (горе, долу, ляво, дясно). Със radial gradient не се получава желания ефект.

Единственото решение, до което стигнах, до момента е с вложени елементи и използване на image файл, но е доста грозно откъм mark up и се чудя дали има някакво по-културно решение.

Цел:
horizontal and vertical alignКвадрата е с цвят: #001420 и прозрачност 30%. Във всички краища прозрачностаа се увеличава до 100% и се слива с background-а (в случая с бяло)




Отговори



1

http://www.colorzilla.com/gradient-editor/

ЕDIT: Поиграй си с radial gradient-a (добави още точки и тн). Ако не стане прати screenshot както е предложил колегата.


от Mihail Gochev (0 точки)


0
не е това търсения ефект, иначе сайта го знам ;)

от NikiOnTime (1139 точки)

0
Единственото което ми хрумва сега е border-radius и box-shadow Например: background-color:rgba(0,20,32,0.3); box-shadow: 0 0 5px rgba(0,20,32,0.3); border-radius:5px;

от Mihail Gochev (0 точки)



0

 

Постни една снимка, на грозното решение, да видим горе-долу какво трябва да се получи
 



0
готово .

от NikiOnTime (1139 точки)


2

Ето ти вариант който може да ти е полезен.

Това е празен див със следните стилове:

 

div {
background-color: red;
width: 400px;
height: 400px;
margin: auto;
 
-webkit-box-shadow: 0 0 5px 5px red;
box-shadow: 0 0 20px 25px red;
}
 
Надявам се да свърши работа
 
Поздрави
Мартин

от Mahata231 (1351 точки)