Как да кодирам градиен със CSS

[ventsi34]

Здравейте, искам да попитам как да кодирам този градиен със CSS?

Без да бъгва под различните резолюции?

 

[dimitrov0720]

Направи го с дължина(width) 1 пиксел като за начало.
Пишеш така
background-image: url(...);
background-repeat: repeat-x;
background-color: #задаваш цвят като този най-отдолу на картинката примерно ако е 0000ff пишеш "background-color: #0000ff"
Това е!

 

[ventsi34]

да но това означава, че ако съдържанието на сайта ми е по малко от дължината на тази картинка дето се повтаря сайта няма да се събере, ще стой празен.

 

[dimitrov0720]

да но това означава, че ако съдържанието на сайта ми е по малко от дължината на тази картинка дето се повтаря сайта няма да се събере, ще стой празен.

Ще намалиш и височината на картинката. То ако е така, също ще стои празо .
Моля, обясни по-ясно, че не схванах. Как така ще стои празно? Аз ти казвам как се прави, ако искаш да стане.

 

[shterev]

да но това означава, че ако съдържанието на сайта ми е по малко от дължината на тази картинка дето се повтаря сайта няма да се събере, ще стой празен.

Направиго както са ти казали и виж какво ще стане, как ще стои празен, винаги ще имаш бекграунд. Идеята му е че имаш градиент и там къдео свършва започва само цвета.

 

[embaka]

ето за градиент как да си го оправиш

  	background-image: -moz-linear-gradient(top, #9ed438, #3d840d); /* FF3.6 */
  	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9ed438),color-stop(1, #3d840d)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#9ed438', EndColorStr='#3d840d'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9ed438', EndColorStr='#3d840d')"; /* IE8 */

 

[ventsi34]

ето за градиент как да си го оправиш

  	background-image: -moz-linear-gradient(top, #9ed438, #3d840d); /* FF3.6 */
  	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9ed438),color-stop(1, #3d840d)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#9ed438', EndColorStr='#3d840d'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#9ed438', EndColorStr='#3d840d')"; /* IE8 */

embaka кода ти под Mozila аз съм с една от най-новите се бъгва нещо (става на малки чертички, който се повтарят) под опера изобщо не се визуализира, а под ИЕ 6 бачка идеално. Какво имам в предвид с това "ще остане празно" ми примерно ако тази снимка която ще се повтаря по "x" е със дължина 700 пиксела, а широчина 1. Пиша текст или там запълвам с каквото и да е и става 800 пиксела супер няма бъгове но решавам да махна определена информация и останалата информация в сайта става 500 пиксела, а картинката с градиент ни е 700 и тогава остават 200 пиксела празно пространство и тогава идва footer-а.

 

[shterev]

ами така малко не мога да ти хвана идеята, ако футъра има градиент и той и трябва да пасва с тоя другия, просто сложи един min-height и проблема ти е оправен, но пак трябва да се види за какво става въпрос

 

[ventsi34]

Футъра е бял няма градиент и не трябва да пасва.

 

[shterev]

тогава какъв е проблема, ако го беше направил и показла как не трябва нямаше да има толкова много говорене

 

[mitko666]

Защо не го направиш с jquery става доста бързо и лесно.

 

[shterev]

Защо не го направиш с jquery става доста бързо и лесно.

Ти не знаеш ли че за такива простотии когато се използва js хич не е практично , а и нотоварва допълнително сайта, като може да се направи само с CSS

 

[relax15pyt]

Защо не го направиш с jquery става доста бързо и лесно.

И ако потребителя реши да си изключи JavaScript и сайта му гърми на човека. Хората са измислили CSS, за какво да прави "шано-мании" с JavaScript.

Към автора: я дай един скрийн да видим какво имаш предвид, че така на сляпо да гадаем не е лесно.
Ти уж искаш фон(background), хем се притесняваш, че ще остава празно място. Еми нормално е да остава празно място.
Остави както ти казаха 1px за width, repeat-x и фонов цвят, който да отговаря на най-долния цвят.

background: краен-фонов-цвят url('път-до-градиента') repeat-x;
width: 1px;