CSS gradients

Если вы вдруг решили изучить что такое css gradient и с чем его едят, то я для вас собрал ссылки на полезный материал как на русском, так и на английском языках.
Если есть что-то полезное у вас пишите в комментариях или на почту.

Ссылки с ! знаком рекомендуются лично мное для изучения в первую очередь.

Оглавление:

  1. Базовое – что такое градиенты – линейные и радиальные
  2. Углубление в тему – css паттерны, принцип цикады и т.д.
  3. Инструменты для создания градиентов

Базовое

Поддержка браузерами:

http://caniuse.com/#feat=css-gradients

Что такое градиенты – linear-gradients, radial-gradient, repeating-radial-gradient

http://htmlbook.ru/css3-na-primerakh/radialnyi-gradient
http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient

! http://css.yoksel.ru/linear-gradients/
! http://css.yoksel.ru/radial-gradients/

от браузеров

! IE

English:

css-tricks.com css3-gradients
http://www.css3files.com/gradient/ (ярко, красочно :) )

css3-linear-gradients
css3-radial-gradients

css3-repeating-gradients

От браузеров

Firefox
Safari
IE

Углубление в тему

! Погружение в css градиенты (градиенты и математика)

Создание паттернов для фона и паттерны

! http://css.yoksel.ru/css-patterns/

http://css-tricks.com/stripes-css/
http://lea.verou.me/css3patterns/ (хорошие примеры)
http://24ways.org/2011/css3-patterns-explained/
http://jasonkinney.me/css-gradient-background-patterns/
http://enjoycss.com/gallery/gradient_patterns

Принцип Цикады

the cicada principle and why it matters to web designers оригинал
! http://habrahabr.ru/post/117160/ (перевод)

http://habrahabr.ru/post/148639/ (на чистом css)

3d и градиент

http://css.yoksel.ru/3d-and-gradients/

Фильтр IE – градиент

 

Онлайн инструменты

http://www.colorzilla.com/gradient-editor/
http://www.cssmatic.com/ (поддержка sass)
http://www.css3factory.com/linear-gradients/
www.display-inline.fr/projects/css-gradient/
http://ie.microsoft.com/
http://css3gen.com/gradient-generator/
http://westciv.com/tools/gradients/

 

Если у вас есть ссылки или статьи полезные, оставляйте в комментариях я обязательно добавлю! ;)

1 комментарий к записи

  • #

    Очень хорошие статьи-гайдики, но мне кажется с видео было бы удобнее разобраться, во всяком случае новичкам, как я =(