Html background gradient chrome

CSS3 поддержка градиента для всех браузеров

Продолжаем продвигать CSS3 в массы, теперь помимо использования border-radius и box-shadow, уже можно использовать заливку градиентом без применения внешних изображений. О том, как это сделать, любезно делится с нами Robert Nyman.

Теперь мы имеем возможность создавать градиентные заливки прямо из CSS кода, без использования каких-либо картинок.

Различия синтаксиса и поддержка браузерами

Примеры

Линейный градиент, сверху вниз

Линейный градиент, слева направо

Этот градиент перетекает слева направо, по 70% ширине элемента. Конечный цвет, после 70% не будет корректно работать в Internet Explorer; опции FinishX и GradientSize не применяются в фильтре градиента .

Радиальный градиент

Можно позабавиться и сделать радиальный градиент! Но, к сожалению, этот тип градиентов никак не поддерживается в Internet Explorer.

Итоги

Для простых линейных градиентов, это решение вполне подходит, что-бы пользоваться им просто из CSS. К сожалению ограниченность возможностей Internet Explorer’а не позволяет наслаждаться всеми типами градиентов в полной мере.

21 февраля, 2010 , 21:22
handyblogger[at]gmail.com

/* Для WebKit (Safari, Google Chrome и т.д.) */
background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
/* Для Mozilla/Gecko (Firefox и т.д.) */
background: -moz-linear-gradient(top, #00f, #fff);
/* Для Internet Explorer 8 */
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)»;
/* Для Opera */
background: -o-linear-gradient(top, #00f, #fff);

Интересно, а логи моего блога говорят что у Вас:
«Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.1.6) Gecko
/20091201 MRA 5.6 (build 03270) Firefox/3.5.6» Прежде чем писАть статью я всегда проверяю то, что в ней заявлено.

Интересно, а можно с CSS3 сделать 3х цветный градиент под углом? как здесь http://emfire.ru/
Если кто знает, жду в почту, указанную на сайте.

Автор! дезинформируешь! с пятого экплорера радиальная прозрачность filter: Alpha (style=2) style=1 линейная прозрачность
style=2 радиальная прозрачность
style=3 квадратная прозрачность

Не хотел цепляться за слова, но придется: в статье нет ни слова про прозрачность и Альфа канал, говорится конкретно про градиент (filter: ….gradient()).
Если можно выполнить радиальный градиент через прозрачность, это наверное здорово, но догадываюсь, что придется городить (для IE) два элемента (один над другим), а статья немного не о том, — она об непосредственной поддержке конкретно градиента.
А в общем, спасибо за наводку, если у Вас в запасе есть ссылка на реализацию указанного примера буду благодарен.

Источник

Complete Guide To Cross Browser Compatible CSS Gradients

CSS gradients for background have become an indispensable aspect UI/UX design and have a massive impact on a website’s design. It plays a fundamental role in setting the design hierarchy, capturing user attention and focus, and finally defining website usability and appearance. The common forms of backgrounds that websites employ could either be solid colors, images, gradients or a combination of all three. CSS Gradients for background empowers designers for displaying smooth transitions between numerous colors. Not only are gradients being used for header or section backgrounds but also for creating CSS Gradients for overlays, text, buttons, borders, outlines, skewed blocks and banners.

Before the advent of CSS Gradients for background, developers had no other choice but to resort to images to create such effects. However, this method had huge drawbacks that would hurt websites performance. Using large number of images especially for trivial purpose would lead to a massive spike in website loading speed and bandwidth usage. But by harnessing the power of CSS Gradients designers can ensure faster site loading time without sacrificing resolution and clarity just by using simple native functions for CSS Gradients.

What Are CSS Gradients?

The CSS gradients are realised by the use of gradient functions which create a progressive transition between multiple colors. One important requisite for using CSS gradients is that they belong to data type and can only be applied to background-image property or shorthand “background” instead of CSS properties with data type such as “color” or “background-color”. CSS Gradients in background have no defined intrinsic dimensions and are devoid of any specific dimension size or ratio. It simply adopts to the dimension of the element it is applied to on the fly.

CSS3 defines 4 major types of gradients.

1. Linear CSS Gradient
2. Radial CSS Gradient (also elliptical)
3. Conical CSS Gradient
4. Repeating CSS Gradient

Except Conical gradient, the other 3 types of CSS gradients i.e. Radial, Repeating, and Linear CSS Gradients enjoys good browser support with the only exception being IE 6-9 and Opera mini browser. Conical gradients is still in an experimental stage and not yet adopted by the majority of browsers including Firefox, Edge and Opera. Only the latest version of Chrome (69+) and Safari(12.1+) provide support for this feature. We will discuss browser support for these 4 types of CSS gradients in detail, we will also perform cross browser testing for figuring cross browser compatibility solutions of these CSS gradients.

1. CSS Linear Gradient

CSS Linear Gradients facilitates smooth, escalating transition between numerous colors along a straight line. You can make these transitions to move in – up, down, left, right or diagonal direction. You need to specify a minimum of 2 colors (called color-stops) to create this effect along optionally specifying the direction and start points.

Syntax For Linear CSS Gradients
background-image: linear-gradient(direction, colorStop1, colorStop2, …);

• Direction : Used to set the direction or angle of the CSS linear gradient effect. Direction can either be – top, bottom, left, right or in deg or in turn. It is optional to specify direction. Note that If direction is not specified, by default it will be set to top to bottom.
• Color-Stops : Consists of color value followed by a start point. Start point can be in % or a length value. It is optional to define start points.

Some examples of CSS linear gradient with different set of values.

Top To bottom Linear CSS Gradients

The transition in this case starts from top to bottom direction with blue color on top and ends with purple color on bottom. Specify “to bottom” direction or it will be set by default . To create a reverse bottom to top gradient, reverse the direction to “to top”

Источник

Complete Guide To Cross Browser Compatible CSS Gradients

CSS gradients for background have become an indispensable aspect UI/UX design and have a massive impact on a website’s design. It plays a fundamental role in setting the design hierarchy, capturing user attention and focus, and finally defining website usability and appearance. The common forms of backgrounds that websites employ could either be solid colors, images, gradients or a combination of all three. CSS Gradients for background empowers designers for displaying smooth transitions between numerous colors. Not only are gradients being used for header or section backgrounds but also for creating CSS Gradients for overlays, text, buttons, borders, outlines, skewed blocks and banners.

Before the advent of CSS Gradients for background, developers had no other choice but to resort to images to create such effects. However, this method had huge drawbacks that would hurt websites performance. Using large number of images especially for trivial purpose would lead to a massive spike in website loading speed and bandwidth usage. But by harnessing the power of CSS Gradients designers can ensure faster site loading time without sacrificing resolution and clarity just by using simple native functions for CSS Gradients.

What Are CSS Gradients?

The CSS gradients are realised by the use of gradient functions which create a progressive transition between multiple colors. One important requisite for using CSS gradients is that they belong to data type and can only be applied to background-image property or shorthand “background” instead of CSS properties with data type such as “color” or “background-color”. CSS Gradients in background have no defined intrinsic dimensions and are devoid of any specific dimension size or ratio. It simply adopts to the dimension of the element it is applied to on the fly.

CSS3 defines 4 major types of gradients.

1. Linear CSS Gradient
2. Radial CSS Gradient (also elliptical)
3. Conical CSS Gradient
4. Repeating CSS Gradient

Except Conical gradient, the other 3 types of CSS gradients i.e. Radial, Repeating, and Linear CSS Gradients enjoys good browser support with the only exception being IE 6-9 and Opera mini browser. Conical gradients is still in an experimental stage and not yet adopted by the majority of browsers including Firefox, Edge and Opera. Only the latest version of Chrome (69+) and Safari(12.1+) provide support for this feature. We will discuss browser support for these 4 types of CSS gradients in detail, we will also perform cross browser testing for figuring cross browser compatibility solutions of these CSS gradients.

1. CSS Linear Gradient

CSS Linear Gradients facilitates smooth, escalating transition between numerous colors along a straight line. You can make these transitions to move in – up, down, left, right or diagonal direction. You need to specify a minimum of 2 colors (called color-stops) to create this effect along optionally specifying the direction and start points.

Syntax For Linear CSS Gradients
background-image: linear-gradient(direction, colorStop1, colorStop2, …);

• Direction : Used to set the direction or angle of the CSS linear gradient effect. Direction can either be – top, bottom, left, right or in deg or in turn. It is optional to specify direction. Note that If direction is not specified, by default it will be set to top to bottom.
• Color-Stops : Consists of color value followed by a start point. Start point can be in % or a length value. It is optional to define start points.

Some examples of CSS linear gradient with different set of values.

Top To bottom Linear CSS Gradients

The transition in this case starts from top to bottom direction with blue color on top and ends with purple color on bottom. Specify “to bottom” direction or it will be set by default . To create a reverse bottom to top gradient, reverse the direction to “to top”

Источник