Uber крутые линейные градиенты в CSS3

Question

Можно ли создать (без изображений) действительно круто выглядящие линейные градиенты, подобные тем, которые вы видите в элементах управления ленты?

Кто-нибудь знает какие-либо учебные пособия, статьи, ресурсы или образцы, которые демонстрируют / демонстрируют этот своего рода градиент?

Answer 1

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

Я использовал это в прошлом. Это хорошо, потому что он делает несколько вариантов градиента, поскольку точный синтаксис еще не определен.

Answer 2

Градиент фона:

background: -moz-linear-gradient(center top , #ededed, #ededed) repeat scroll 0 0 transparent;
border: 1px solid #e1e1e1;
/* For WebKit (Safari, Google Chrome etc) */
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ededed));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #ededed, #ededed);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#ededed)";

Эффект тени текста:

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);