CSS3 градієнт CSS3 Menu

Чисте CSS меню із CSS3 градієнтом!

Використання CSS градієнта як фон панелі навігації зробить сайт привабливішим для користувачів Інтернету.

menu

CSS3 градієнт

Градієнт - один із найкращих ефектів, який можна додати на інформаційний вебсайт, тому що він не відволікає. Ви можете додати градієнти до Safari, Chrome та Firefox; це буде охоплювати більше половини відвідувачів для деяких сайтів.

Нижче представлений скріншот із Firefox, що демонструє ефектCSS3 градієнт:

СинтаксисЛінійного градієнта CSS3відрізняється між версіями Firefox і Safari/Chrome. Лінійний градієнт у Firefox: -moz-linear-gradient( , кінцеві кольори ) Лінійний градієнт у Safari, Chrome -webkit-gradient-linear( , кінцеві кольори )

*Позиція або кут: Використовується для визначення початкової точки градієнта. Значення може бути вказано у відсотках (%), у пікселях, або "left", "center" або "right" для горизонтального градієнта та "top", "center" або "bottom" для вертикального градієнта. Якщо вертикальна або горизонтальна позиція не вказана, використовується значення за промовчанням "center" або 50%. У Firefox такі значення як 45deg також приймаються. *Кінцеві кольори: Кольори, з яких починається і до якого повинен перейти градієнт. Якщо вказано більше ніж два кольори без явного значення зупинки для кожного кольору, градієнт буде переходить від одного до іншого рівномірно до остаточної зупинки кольору. - У Firefox кожен кінцевий колір має наступний синтаксис: [ ] . Якщо значення відсотка (від 0 до 100%) або довжини (від 0.0 до 1.0) встановлено для відповідного кольором, попередній колір закінчиться цим кольором у цій точці. Якщо значення не вказано, тоградієнт поступово переходитиме з початкового в кінцевий колір. - У Safari у кожного кінцевого кольору наступний синтаксис: кінцевий колір (значення, колір). Значення також вказується у відсотках (від 0 до 100%) або довжиною (від 0 до 1.0) або від (колір) і до (колір). Останні два – скорочений запис, еквівалентний color-stop(0, колір) та color-stop(1.0, колір).

CSS3 Menu генерує наступний код дляКСС3 градієнта: background-image: -moz-linear-gradient( 50% 0% ,rgba( 255,255,255,0.38 ),rgba( 255,255,255,0;1) background-image: -webkit-gradient(linear, 50% 0%,50% 100% , from(rgba( 255,255,255,0.38 )), to(rgba( 255,255,255,0.16 ))) ;

CSS градієнтипідтримуються у FF3.6+, Opera 10.50, Safari 2+ та Google Chrome.

CSS3 градієнти для елементів і фону за допомогою КСС3 Меню

Суцільні кольори поступово зникають в мережі, тому що виглядають старомодними в очах користувачів інтернету. У той час як всесвітньо відомі інтернет-ресурси, такі як Wikipedia, зі своїм мінімальним дизайном все ще досягають успіху, більшість інших сайтів змушені боротися за увагу відвідувачів будь-якими необхідними засобами.

CSS3 Menu v3.5 (Jan 23, 2013) Read more