Фон Градиент.

[sentenello]

Как да направя фона ми да е градиент. Примерно от зелено към бяло...

 

[sinn]

С фотошоп.

 

[sentenello]

Градиента си го правя аз със фотошоп и ако страницата ми е с Height="500" и градиента е с 500 добре, но ако в даден случай страницата стане 600px ????
Какво правим ?

 

[lichnoooo]

еми направи 1600 да се вижда добре с всяка резолюция и хем никъде няма да се бъгва поне аз тей бих го направил но не си казал за фон ли ще е за какво ще е ?

 

[sinn]

Градиента си го правя аз със фотошоп и ако страницата ми е с Height="500" и градиента е с 500 добре, но ако в даден случай страницата стане 600px ????
Какво правим ?

Тогава гледаме поредицата CSS за напреднали - правилно кодиране
http://videotutorials-bg.com/lessons.php?action=viewsub&id=26
Почвай от първия урок. Ако нещо не ти е ясно питай






П.П. Ако ще е за фон аз лично го правя 1024х768

 

[sentenello]

еми направи 1600 да се вижда добре с всяка резолюция и хем никъде няма да се бъгва поне аз тей бих го направил но не си казал за фон ли ще е за какво ще е ?

За фон ми е...
Ще се оправя няма да гледам уроците... отвътре ми казва, че трябва да ги пропусна :?:

 

[lichnoooo]

 

[adrian]

Правилният избор тук е да зададеш вертикално или хоризонтално повторение на картинката.
В зависимост от това какъв ти е градиента (хоризонтален или вертикален) трябва да направиш това:

.myClass {
background-image: url('image.gif');
background-repeat: repeat-x;
}

или

.myClass {
background: url('image.gif') repeat-x;
}

Това са стойностите, които можеш да сложиш на мястото на червения код.

repeat - по подразбиране. Фонът се повтаря вертикално и хоризонтално
repeat-x Фонът се повтаря хоризонтално
repeat-y Фонът се повтаря вертикално
no-repeat Фонът се показва веднъж

Има си правилни начини на кодиране. Няма смисъл да правиш картинка 500 на 500 като можеш да я направиш 1 на 500 и да и зададеш да се повтаря.

 

[sentenello]

Пич това ми е напълно ясно, но проблема в случая е, че Градиента е преливащ и когато го направя по твоя начин SUCKS.

Иначе мерси това за repeat-x/y не го знаех.

 

[adrian]

Ако прелива в една посока може да се направи без никакви проблеми. Ще ти дам пример ако прелива по хоризонтала (от ляво е черно, а от дясно вече е бяло).
В този случай правиш картинката да е 500px широка (по този начин запазваш градиента от черно към бяло) и висока 1px.
После на дива, който искаш да кодираш просто слагаш височина и даваш на картинката да се повтаря по вертикала (или иначе казано repeat-y).
Единствено не може да се направи ако преливането на цветовете е в много посоки.
Предимството е, че при картинка от 500px височина съкращаваш големината на файла 500 пъти.

Аналогично се прави ако фонът ти прелива по вертикала. Просто правиш повторението да е по хоризонтала.

 

[sentenello]

Сега ще ти дам +1 макар и това което ми обясни да го знаех.
А иначе ако задам на градиента height=500px примерно а сайта ми е 600px висок.. какво ще стане ?

Макар и да е в дива би трябвало да остане празно място нали ?

 

[adrian]

Aко го правиш с повторение на фона ще запълни височината, която си задал на дива.

 

[sentenello]

Да кажем, че повтарям само дължината като размера на градиента е 500px височина и 1px дължина.

 

[FestarBG]

Виж това, би трябвало да ти свърши работа.

 

[afsh]

В този случай, за който говориш обикновено се взима с пипетка най-долния пиксел на градиента и се слага за background-color на слоя.

 

[afsh]

Виж това, би трябвало да ти свърши работа.

FestarBG, ти изби рибата бе брат! Много полезна информация!
Има ли начин да ти накликам някоя точка, като е чужда темата?

 

[FestarBG]

Не, но и няма нужда..