Здравствуйте!
Задача: есть макет, на нем три градиента, один — фон, другой — контент и третий — меню.
Если меню еще можно просто вырезать целиком ячейки, то как быть с фоном и контентом.
Пробовал сделать фон одной картинкой, получилось порядка 300 кб, с контентом не получается.. при вырезании полоски в 1 пх, градиент снизу не тот, который должен быть.
Подскажите, как это реализовать? Градиент хочу реализовать именно картинкой, без css3
сама картинка: https://snag.gy/13FUK.jpg
Вы лучше объясните смысл в отказе от CCS3?
Эмм….а глупый вопрос: с
DOCTYPE XHTML 1.0 Transitional//EN
градиенты — будут работать?
Если да, то тогда как узнать какие параметры нужно задать для рисования данного градиента, где их смотреть?
Вот скажем https://www.display-inline.fr/projects/css-gradient/ тулза для градиента, как определить начальную и конечную точку градиента? — На этот вопрос нашел ответ тут: https://zencoder.ru/photoshop-dlya-kodera/136-kak-perevesti-gradient-iz-photoshop-v-pravila-css.html
А отказ в том, что хочется понять как люди делали до появления CSS3.
А вы попробуйте. Никто не пишет вручную параметры, есть онлайн-генераторы, типа https://www.colorzilla.com/gradient-editor/
По поводу того, как делали раньше — ну я бы с фоном контента поступил так: вырезал бы статичный по высоте нижний градиент, а светлую часть задал бы фоновым цветом. Ну и верхнее закругление с нижним вырезал бы отдельно и подставлял 1) через одноразовые экспрешены отдельные блоки для IE7-6 2) для всех остальных браузеров через псевдоэлементы :before :after.
Так, вроде что-то стало получаться, но появилась новая проблема, фон не градиент, — это узор. Где можно почитать, про то, как его поставить в бекграунд?
А вот меню и контент именно градиент, буду пробовать.
За разъяснение спасибо, приму на заметку.
Хмм, на узоре был проставлен размер, в итоге сделал новый холст с заданными размерами и туда поставил этот узор, вырезал его и залил бекграунд, вроде получилось…правда не уверен в правильности данного решения, в итоге бекграунд 96кб
kukushka
Подскажите, а если такая ситуация: есть слой на нем определенный узор, к узору применен линейный градиент, плюс есть внутреннее\внешнее свечение и тень, как все это совместить в один фон, при учете что блок должен тянуться по вертикали?
Лучше идти от простого применения свойства
который редко хорошо подходит, далее с помощью тегов @media можно в вашем случае разрулить? В зависимости от размеров экрана грузить разные картинки, или указывать разные размеры для тега img.
По ходу уже не актуально))
Лично я не вижу здесь ничего сложного. Используйте CSS3 + префиксы браузеров з движками -o, -moz, -webkit для корректного отображения во всех «нормальных» браузерах. ІЕ 9 beta + тоже работает с градиентом. Буквально несколько строк CSS кода и градиент готов. Пример:
div#example {
background: -moz-linear-gradient(top,#EEEEF0,#D2CFD4);
background: -webkit-linear-gradient(top, #EEEEF0, #D2CFD4);
background: -o-linear-gradient(top, #EEEEF0, #D2CFD4);
background: -ms-linear-gradient(top, #EEEEF0, #D2CFD4);
background: linear-gradient(top, #EEEEF0, #D2CFD4);
}
Остается копи/пастить и поменять цвета на свои