Одна из особенностей CSS 3, которую я считаю наиболее интересной, — это применение градиентов с помощью простых правил CSS. Причина, по которой я нахожу это настолько удивительным, заключается в том, что при разработке страниц мне обычно приходилось вставлять фиктивные изображения-заполнители на задний план или оставлять фоны бесцветными при написании HTML и CSS. Поэтому, даже когда я почти закончил с дизайном, у меня всегда есть вторая задача — открыть программное обеспечение для редактирования изображений, скорее всего, GIMP, и создать изображения в соответствии с размерами моих HTML-элементов.
Интересно, что главная проблема возникает, когда мне не нравится то, что я вижу. Когда вы объединяете все цвета на веб-сайте, вполне возможно, что вам не понравится цветовая схема. Это неизбежно возвращает вас к программному обеспечению для редактирования изображений, чтобы настроить цвета, чтобы получить его правильно. И это может происходить несколько раз, особенно когда вы создаете прототипы, чтобы предоставить клиенту демонстрацию того, как вы хотите, чтобы вещи выглядели. Вы обнаружите, что переключаетесь несколько раз между вашим HTML-редактором и вашим графическим редактором. Это именно то место, где CSS 3 градиенты вписываются в картинку, как сыр вписывается в бургер. Это был просто недостающий ингредиент. Итак, в этом посте я расскажу о следующих темах, которые помогут вам лучше понять градиенты CSS 3.
В этой серии из двух частей я расскажу обо всех основных моментах, которые помогут вам освоиться с градиентами CSS 3.
В этой первой части серии мы попытаемся ответить на следующие вопросы.
- Что такое CSS 3 градиенты? — основные понятия
- Какие типы градиентов CSS 3?
- Как использовать CSS 3 градиенты? — элементы дизайна
Во
второй части этой серии мы увидим более продвинутое использование градиентов CSS 3 и попытаемся ответить на такие вопросы, как
- Как использовать несколько градиентов CSS 3?
- Как использовать градиенты CSS 3 с другими свойствами CSS 3?
- Как использовать CSS 3 градиенты для создания шаблонов?
- Проблемы с браузером при использовании CSS 3 градиентов.
- Где найти ресурсы, которые умно генерируют кросс-браузерные CSS 3-градиенты для вас?
Итак, начнем ?
1) Что такое CSS 3 градиенты? — основные понятия
Если вы графический дизайнер любого уровня, я уверен, что вы знаете, что такое градиенты. Создание градиентов в графических инструментах, таких как GIMP или Photoshop, довольно просто. Но теперь, используя CSS 3, вы можете создавать градиенты практически с той же легкостью.
Самое важное, что следует отметить в отношении CSS 3-градиентов, это то, что они применяются как часть свойства css ‘background-image’. CSS 3-градиенты не требуют нового свойства CSS, они просто добавляют новую функцию, которая может быть добавлена в уже существующее свойство ‘background-image’. Имеет смысл добавить градиент CSS в качестве фона, потому что именно так используются изображения — чтобы он лежал на заднем плане элемента HTML.
Следующая важная вещь, которую стоит отметить, — это то, что вы можете добавить несколько градиентов фона, используя список функций градиента через запятую в одном и том же свойстве background css.
Теперь давайте перейдем к следующему разделу и узнаем о различных типах градиентов CSS 3.
2) Какие типы градиентов CSS 3?
Существует два типа градиентов CSS 3.
- Линейные градиенты
- Радиальные градиенты
Линейные градиенты :
Линейные градиенты самые простые и распространенные из всех. Давайте посмотрим на синтаксис, а затем посмотрим, как он работает.
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
Я просто должен сказать это прямо сейчас. Линейные градиенты ГОРЯЧИЕ!
Я полностью люблю их. Вместо того, чтобы разбивать синтаксис и объяснять различные термины, позвольте мне попытаться объяснить концепцию градиентов так, как я ее вижу.
Предположим, что вы хотите создать линейный градиент. Это означает, что вы хотите перейти от одного оттенка цвета к другому линейным способом. Теперь давайте попробуем сломать наш собственный мыслительный процесс, когда мы визуализируем градиенты.
В: Что нам нужно для создания простого линейного градиента?
A: как минимум 2 цвета. (Да, я знаю, что это было просто).
Q: Как вы узнаете, для чего используются 2 цвета?
A: Вы определяете один из цветов как начало градиента, а другой цвет — как конец градиента. Они называются как цветовые остановки. Поскольку (на данный момент) у вас есть только 2 цвета, у вас есть 2 цветовых остановки.
Q: Каково направление градиента? Это горизонтальный градиент? Это вертикальный градиент? Или это под определенным углом ??
A: Нам нужно направление для нашего градиента. Математически, направления определяются путем рисования вектора от одной начальной точки до другой с помощью стрелки, указывающей направление вектора. Поэтому, когда вы рисуете любую такую линию на листе бумаги, вы, очевидно, будете рисовать линию так, чтобы она составляла угол с горизонтальной осью листа бумаги. Этот угол является мерой направления вектора. Следовательно, нам нужен способ указать угол при указании градиента в CSS 3.
Итак, теперь у нас есть три основных ингредиента для приготовления нашего градиента CSS 3.
- Начальный цвет.
- Конечный цвет.
- Угол.
Давайте соединим эти три в синтаксисе градиента.
linear-gradient( angle, start-color, end-color);
Now it looks pretty simple, doesn’t it?
Although there is another syntax, I feel that this syntax is not only easily readable, but also gives you an immense amount of flexibility in defining the options. In the sections that follow, we will use colors and create a few linear gradients to see this form of defining gradients.
Radial Gradients :
The other type of gradient is radial gradients. Now radial gradients are quite similar to linear gradients. You have almost the same three main ingredients.
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )
This looks pretty scary, doesn’t it? Well it does to me. So, lets try to break it down in the same way that we broke down the syntax for linear gradient.
Apart from the three important ingredients, the new important ingredient in the radial gradient is the ‘shape’ of the gradient. We know that a radial is something like a circle. In CSS 3, you can define the radial to be one of two shapes — circle, ellipse.
While using the radial gradient, there is one property that is somehow more interesting than the angle. And that is, the coordinates of the center of the radial (circle or ellipse).
Радиальный градиент имеет гораздо больше опций по сравнению с линейным градиентом, и поэтому мы можем иметь еще несколько перестановок и комбинаций синтаксиса, что делает для меня совершенно невозможным охват радиальных градиентов в этом сообщении в блоге. Таким образом, мы увидим только основы, а затем вы сможете исследовать различные другие варианты на досуге, когда у вас будет лучшее понимание основных концепций.
Чтобы капитулировать, важными ингредиентами радиального градиента являются
- Координаты центра радиальные.
- Форма радиальная
- Начальный цвет (который становится цветом центра).
- Конечный цвет (который становится цветом внешнего края радиала).
Давайте соединим эти три в синтаксисе градиента.
radial-gradient( center-coordinates, shape , start-color, end-color);
Этот синтаксис может использоваться для определения наиболее базовой формы радиального градиента. И мы увидим в следующих примерах, как их можно применять для стилизации фона HTML-элемента.
3) Как использовать CSS 3 градиенты? — Элементы дизайна
До сих пор мы видели, что такое CSS 3-градиенты. И мы также узнали самую основную форму их синтаксиса. Теперь перейдем к самой интересной части этого поста, а именно к той части, где мы демонстрируем различные используемые градиенты CSS 3.
Для демонстрации я буду использовать HTML-элемент div с размерами 200 x 200 пикселей и применять к нему различные градиенты.
Линейные градиенты
Образец 1:
Этот показывает простой градиент от черного к белому.
Код CSS
background-image:linear-gradient(0deg, black, white);
The css code is very simple. You want a horizontal gradient (hence the 0 degrees), the starting color is black, the ending color is white and the gradient effect spreads across the dimention of the entire html element.
Sample 2:
Css Code
In this example, we have simply rotated the axis by 45 degrees. As you might have noticed, the axis rotates about the center of the html element. So when you rotate the axis by 45 degrees anticlockwise, the start color automatically starts at the left bottom and the end color ends at the right top, thereby giving you a gradient of 45 degrees about the center of the html element. This is a very important point to note about linear gradients. The following image (that I created using Inkscape, not CSS 3) should be able to give you a better idea of the angle calculation.
The axis/vector representing the direction of the gradient rotates about the center of the html element to which the gradient it applied.
The next example demonstrates using three colors in a gradient. It is similar to the previous two examples, the only difference being the additional parameter that describes the third color.
Sample 3
Css Code
In this example you see that the gradient started normally from the lower left corner, then it gradually changed to white when it reached the middle and then it gradually changed to green when it reached the upper right corner. This means that the gradient rendering algorithm tried to evenly distribute the area over which the gradient was to be rendered between the three colors that we specified.
In the next example, we will try a tiny variation of the above
Sample 4
Css Code
As you see in the above code, this is a slight variation of the previous example. I have specified percentage values along with the color. To understand what this percentage means, you need to keep one thing in mind — the direction vector of the gradient. As you move along the direction vector
of the gradient, the start of the vector is 0 percent. The end of the vector is 100%. So, when you specify the a percentage along with a color stop when using gradients, you are actually saying that at a given percent distance along the vector, I want my color to be #some-color. i.e. you are defining the position of the color stop along the direction vector
. In the above example, I declare black to be the color at 20 percent distance from the start of the direction vector
, white to be the color at 50 percent distance from the gradient
direction vector
, and green to be the color at 80 percent of the distance from the gradient
direction vector
. Since before 20%, no color is specified, hence the origin color(i.e. black in our case) is used from 0 t 20 percent. And since no color is specified after 80%, hence green is used as the color after 80 percent. So, we see that our gradients in this background are between 20 percent and 80 percent. The remaining parts are fixed colors.
of the gradient, the start of the vector is 0 percent. The end of the vector is 100%. So, when you specify the a percentage along with a color stop when using gradients, you are actually saying that at a given percent distance along the vector, I want my color to be #some-color. i.e. you are defining the position of the color stop along the direction vector
. In the above example, I declare black to be the color at 20 percent distance from the start of the direction vector
, white to be the color at 50 percent distance from the gradient
direction vector
, and green to be the color at 80 percent of the distance from the gradient
direction vector
. Since before 20%, no color is specified, hence the origin color(i.e. black in our case) is used from 0 t 20 percent. And since no color is specified after 80%, hence green is used as the color after 80 percent. So, we see that our gradients in this background are between 20 percent and 80 percent. The remaining parts are fixed colors.
Radial Gradients
In this section we will see a few examples that make use of the simplest form of radial gradients.
Sample 1
Css Code
background-image: radial-gradient(50% 50%, circle , #000000,#ffffff );
In the above example, you can see that the first parameter is used to set the x and y coordinates of the center of the radial. And I have set i to be 50% from the left and 50% from the top. The next parameter specifies the shape of the radial, which in our case is ‘circle’. The next parameter gives the start color of the circle from the center. The fourth parameter is used to specify the end color of the radial, which in our case happens to be white. So, we have a simple gradient, starting from black at the center to white at the edges of the element.
Now this may not seem so interesting at first. But when you perform a few tweaks on the parameters, you can create something really cool. Check out the next sample.
Sample 2
Css Code
As you see in the above code, we were easily able to create a circle with a sharp boundary using gradient parameters. In the syntax above, we have specified a percentage alongside each color value. To understand how this percentage applies, think of it in this way — You have a circle with its center set at the center of your html element. Now Since its a circle, it has a radius. When you specify #000000 50% as the first color, what you are actually saying is that upto 50 percent of the radius, starting from the center, you want the color to be #000000. In the next color parameter, when you say #ffffff 51%, you are saying that from 51 percent of the radius onwards, you want the color to be #ffffff. Since there is only a 1 percent difference between the two colors, you get a nice sharp boundary instead of a gradient between the two colors. If however you were to increase the difference in the percentage, as in the below example, you would get a gradient.
Sample 3
Css Code
As you see in the css code above, I increased the percentage value of the color #ffffff to 71 percent. So we were able to see a gradient effect from the color #000000 to the color #ffffff between 50% and 70% of the radius of the circle, which looks like a nice halo.
The wonderful thing about radial gradients is that just like linear gradients, you can also add more color stops. So lets try to make a much more realistic halo effect using radial gradients.
Sample 4
Css Code
Как вы видите в приведенном выше коде, создание ореола было просто вопросом добавления еще одного цветового ограничителя в функцию радиального градиента и установки правильных процентных значений. Красиво, не правда ли? Кинда выглядит как страшное затмение, но все равно красиво. Вероятно, потому что это вряд ли потребовало каких-либо усилий для создания.
Ну, в этом и прелесть CSS 3-градиентов.
Теперь, когда у нас есть базовое представление о градиентах CSS 3, в
следующей части этой серии мы увидим, как мы можем смешивать и объединять градиенты, чтобы создать что-то еще более мощное и, конечно, красивое, такое как создание шаблонов градиентов и использование свойство градиента с другими свойствами CSS 3.
Кто-нибудь взволнован? !!
Удачного программирования ?
От http://mycodefixes.blogspot.com/2011/08/dissecting-css3-gradients-part-1.html