CSS3 - Градиенти

Беше ми малко интересно… та ето малко информация за градиентите в CSS 3.

Не е кой знае какво, но биха били много полезни примерно за някакви текстове – в красиви квадратчета със сянка и тн примерно. Ми, направо да разгледаме…

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

и директен пример:

body{
 background-color:#440951;
 background-image: linear-gradient(top, #b032cb, #440951);
}

- супер: просто нали? задава се от къде да “тече” градиента, начален и краен цвят. За радиал градиента е кажи речи същото, като тук имаме и възможност за форма – било то circle или ellipse. На мястото на size имаме стойности от тип closest-side, closest-corner, farthest-side, farthest-corner, contain и cover.

Но, както е споменато в един сайт- тез неща не се подържат в IE (дори и във версия 9)… така че… ще си почакаме. Всъщност- защо сайтовете да изглеждат еднакво под всички браузъри?!?

За повече информация посетете:

http://dev.w3.org/csswg/css3-images/#radial-gradients

http://www.leemunroe.com/css3-gradients/

…и нещо интересно: http://csswizardry.com/2010/10/are-css3-gradients-fools-gold/