При создании сайта, веб дизайнер часто использует фоновые изображения, как для меню, так и для отдельных блоков. Есть такой ресурс, как www.colorzilla.com, который позволяет заменить фоновое изображение, которое зачатую делается в фотошопе, на CSS код. Правда, это касается того фона, где нет графических изображений, а есть некий градиент.
К примеру, вы создаете кнопки для меню, и вам нужен простой фон для этих кнопок. Например такой, как на этом рисунки.
Такой фон можно создать в фотошопе, а можно пойти на сайт http://www.colorzilla.com/gradient-editor/
Выбрать соответствующий фон, и получить его CSS код. Для этой картинке код будет следующий:
|
1 2 3 4 5 6 7 8 9 10 |
background: #b7deed; /* Old browsers */ background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(51%,#21b4e2), color-stop(100%,#b7deed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* IE10+ */ background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */ |
