Преобразовать в CSS3 Градиент

Question

Я новичок в использовании CSS3 (особенно градиенты). Как преобразовать следующую кодированную границу HTML / CSS в границу с градиентом на основе CSS3 (т.е. без изображения)

Я хочу конвертировать ОТ

Нормальный CSS бордюр / цвет фона

К

Коробка с градиентом

Ширина / высота приблизительно указаны на рисунке выше ... Мне нужно знать, как получить градиент согласно 2-му рисунку?

Answer 1

Эта ссылка должна вам помочь. Там вы найдете синтаксис для градиентов.

Это для всех основных браузеров:

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 
  background-image: -webkit-linear-gradient(top, #444444, #999999); 
  background-image:    -moz-linear-gradient(top, #444444, #999999); 
  background-image:     -ms-linear-gradient(top, #444444, #999999); 
  background-image:      -o-linear-gradient(top, #444444, #999999); 
  background-image:         linear-gradient(to bottom, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

… тогда как #444444 - это цвет в верхней части градиента, а #999999 - цвет градиента в нижней части.

Различные «вендоры-префиксы» гарантируют, что градиент работает в разных браузерах, так как синтаксис «по умолчанию» теперь поддерживается не всеми браузерами. Свойство filter заставит работать градиент в Internet Explorer 8 и ниже. Но это имеет некоторые недостатки (производительность так же…). Просто используйте его, если действительно необходимо.

Редактировать: Изменен синтаксис линейного градиента. Синтаксис спецификации:

background-image: linear-gradient(to bottom, #444444, #999999);

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

Answer 2

Не видя цветов, с которыми вы работаете, вы хотите сделать что-то вроде этого

.class{
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background: -moz-linear-gradient(top, #fff, #000);
}

Вот инструмент, который может помочь:

http://gradients.glrzad.com/

Answer 3

CSS-градиенты - классная штука. Но у вас есть одна проблема . Когда вы используете фоновые градиенты в ie9. Вы не можете использовать радиус границы других CSS3. Свойство фонового фильтра для ie это отстой. У меня есть лучшее решение для этого. Это исправить проблему в ie9.

С помощью этого инструмента вы создаете градиент: http://www.colorzilla.com/gradient-editor/ И с помощью этого инструмента вы создаете SVG для ie9: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Теперь у нас есть этот код:

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDQ0NDQ0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOTk5OTk5IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTgpIiAvPgo8L3N2Zz4=);
background: #444444; /* Old browsers */
background: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444444 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444444 0%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #444444 0%,#999999 100%); /* IE10+ */
background: linear-gradient(top, #444444 0%,#999999 100%); /* W3C */

Answer 4

Лучшее место для поиска ниже:

Градиенты CSS3