Jump to content
«ПЛАНАР-СИТИ»
  • Announcements

    • DVN

      Борьба за Авторское право

      Предупреждаю всех и сразу, чтобы потом не было обид и обиженных. Согласно п.4.2.3 Правил форума с 13.03.2007 года все посты содержащие разного рода статьи, стихи, рассказы, обзоры и рецензии и т.д., и т.п. БЕЗ УКАЗАНИЯ копирайта будут сразу же удаляться в Корзину.
    • DVN

      Борьба за Авторское право-2

      Предупреждаю ЕЩЁ РАЗ, всех и сразу, чтобы потом не было обид и обиженных. Согласно п.4.2.3 Правил форума все посты содержащие разного рода статьи, стихи, рассказы, обзоры и рецензии и т.д., и т.п. БЕЗ УКАЗАНИЯ копирайта (авторства, ссылки на источник, откуда Вы взяли эту информацию) будут сразу же удаляться в Корзину. Если Вы автор представленной информации, так и пишите - © ник
Sign in to follow this  
ЗАРАЗА

CSS3 кроссбраузерный градиент

Recommended Posts

С наступлением эры CSS3 теперь даже градиент в любом блоке можно сделать без использования картинок.

 

К моему сожалению, раньше опера не поддерживала этого, но вот появилась первая информация об этой новинке.

 

Поддерживают: Opera 11.10+, Firefox 3.6+, Safari 5.03+ и Chrome 7+

 

Наиболее интересные представляю Вашему вниманию:

 

Простой линейный градиент

background-image: -o-linear-gradient(rgb(100,100,100),rgb(200,200,200));

gradients1.png

RGB-цвет начальной точки и RGB-цвет конечной точки.

 

Относительный линейный градиент

background-image: -o-linear-gradient(top,rgb(100,100,100),rgb(200,200,200));

gradients-variations.png

Параметр перед точками показывает начало градиентирования.

TOP - это сверху, остальные указаны на картинке.

 

Градиент с углом наклона

background-image: -o-linear-gradient(0deg,rgb(100,100,100),rgb(200,200,200));

0deg - тоже что и left

90deg - тоже что и bottom.

180deg - тоже что и right.

270deg - тоже что и top.

360deg - тоже что и left с поворотом на 360 градусов.

Доступны любые целые значения углов.

 

Градиент с альфа-каналом (прозрачный)

background-image: -o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5));

gradients5.png

1 - непрозрачный;

0.5 - прозрачность 50%

обратите внимание, что вместо rgb используется rgba.

 

Повторяющийся градиент

background-image: -o-repeating-linear-gradient(20deg,rgb(255,0,0),rgb(100,0,0) 20px, rgb(255,0,0) 40px);

gradients6.png

первая точка - RGB-цвет начала градиента;

вторая точка - RGB-цвет конец градиента и размер градиента в 20 точек;

третья точка - RGB-цвет обратный переход и отступ в 40 точек от первой;

 

Пример оформления пункта меню:

applebutton.png

 

Источник: http://dev.opera.com/articles/view/css3-linear-gradients/

 

Демо:

<iframe width="100%" height="600" src="http://devfiles.myopera.com/articles/5042/gradients_demo.html"></iframe>

 

ИЕ до сих пор использует фильтры.

 

Дерзайте!!! ;)

Share this post


Link to post
Share on other sites

меня смутило только то что цвет обозначается 10м кодом а не 16те ричным. и не через решетку. а вообще идея классная. года через два будет использоватся повсеместно.

Share this post


Link to post
Share on other sites

еще вопрос.

А закругленные уголки тоже при мощи цсс сделанны?

 

Вообщим, Вить, ты сам пробовал использовать?

Share this post


Link to post
Share on other sites

еще вопрос.

А закругленные уголки тоже при мощи цсс сделанны?

Специально для тебя: https://forum.planar.biz/index.php?showtopic=28720

 

Вообщим, Вить, ты сам пробовал использовать?

 

Да, пробовал повторяющийся градиент, при этом пошло с первого раза.

Экспериментировал - вместо rgb ставил rgba - Опера понимает любые комбинации цвета и альфаканала.

У меня Опера Версия: 11.11, Сборка: 2109.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×