Этот пост является продолжением моей предыдущей статьи о 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?
CSS 3 градиенты потрясающие. И когда один градиент является удивительным, просто представьте, какое прилагательное вы бы использовали, если бы у вас было более одного градиента (если вам удастся придумать правильное слово, сообщите мне в комментарии!). Добавление нескольких градиентов CSS 3 — довольно простая задача. Вместо того, чтобы передавать только одну функцию градиента в фоновом изображении, вы можете передать несколько разделенных запятыми списков функций градиента в качестве фонового изображения. Тем не менее, при этом вам придется помнить несколько вещей. Поскольку градиент очень похож на фоновое изображение, наличие нескольких градиентов практически концептуально эквивалентно наличию стека из нескольких фоновых изображений. А это значит, что если вы хотите видеть цвета градиента, находящегося на нижнем уровне стека, вам придется использовать прозрачный цвет на верхнем уровне стека.
Итак, две новые функции, которые должны прийти вам на ум при использовании нескольких фонов:
- Укладка уровня градиентов.
- Использование прозрачности при создании градиентов.
Давайте разберемся в уровне стека градиентов, используя простой пример, где мы используем 2 слоя градиентов в стеке градиентов.
Образец 1
Код CSS
background-image: linear-gradient(0deg,#000000 50%,#ffffff 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
Как видно из кода выше, я применил 2 градиента в свойстве фонового изображения. Один — это линейный градиент, а другой — радиальный градиент. Линейный градиент покрывает половину ширины блока черным, а другую половину белым. Радиальный градиент используется для создания острого круга. Тем не менее, мы не можем увидеть круг в браузере. Это связано с тем, что порядок, в котором вы указываете функции градиента, является порядком, в котором создается стек, и этот стек растет вниз, то есть заданные сначала градиенты отображаются как самые верхние слои, а градиенты, которые вы задаете позже появляются под ними. Поскольку в нашем примере радиальный градиент был задан после линейного градиента, и поскольку все цвета в линейном градиенте были непрозрачными, мы не смогли увидеть лежащий в основе радиальный градиент.
Теперь давайте используем прозрачность в функции градиента и посмотрим, как все меняется.
Образец 2
Код CSS
Как вы видите, в приведенном выше коде я использовал прозрачность в функции линейного градиента вместо использования белого цвета. И мы смогли увидеть нижележащий черный цветовой круг.
Итак, это совет. Если вы используете несколько градиентов CSS 3, вы можете создавать фигуры, смешивая и объединяя цвета градиента с прозрачностью.
2) Как использовать градиенты CSS 3 с другими свойствами CSS 3?
CSS 3 градиенты — потрясающая особенность. Но что делает их еще более потрясающими, так это то, что когда вы используете несколько фоновых изображений, вы также можете использовать их с другими свойствами CSS 3 и создавать что-то действительно удивительное. Два других свойства CSS 3, которые я считаю чрезвычайно полезными:
background-position
background-size
Сначала давайте взглянем на свойство размера фона. Свойство background size используется для определения размера фона. Что делает это интересным при использовании нескольких градиентов, так это то, что вместо предоставления одного значения для ширины и высоты фона теперь вы можете предоставить список разделенных запятыми значений размера фона, каждое из которых будет применено к соответствующему градиенту.
Что я хочу сказать, так это
background-image: градиент1, градиент2, градиент3;
размер фона: размер градиента 1, размер градиента 2, размер градиента 3
Давайте посмотрим на код в действии. Мы будем использовать те же градиенты, что и в предыдущем примере. Но на этот раз мы добавим свойство размера фона и посмотрим, что произойдет.
Образец 3
Код CSS
background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 100% 100%, 50% 50%;
In the above CSS, I specified 2 background gradients and two corresponding background sizes. For the second background size, I specified it to be 50 percent of the width and height of the element. Because the background is being repeated, the second background gets repeated across the dimensions of the element and you are able to see two circles in the image. If I were to make the linear gradient fully transparent, you would be able to see 4 circles in the element instead of 2. At present those two are being hidden by the linear gradient layer.
Now lets take a look at the effect of background position on gradients.
Sample 4
Css Code
background-image: radial-gradient(50% 50%, circle , #000000 40%,#ffffff 41% );
background-size: 50% 50%;
background-position:50% 0%;
As you see in the sample code, I just shifted the background position of the gradient in the horizontal direction by 50%.
However there are some quirks when using the background position property along with multiple gradients with different browsers as of this writing. So you would want to be careful when trying it out on your own.
3) How to use CSS 3 gradients to create Patterns?
Now gradient patters are an interesting feature that come into play when you begin to mix and merge multiple gradients and the background-size property.
To start with, lets make a very simple gradient pattern.
Sample 5
Css Code
background-image: linear-gradient(0deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 10% 10%, 25% 25%;
Как вы видите в коде, градиент такой же, я просто изменил цвет круга на зеленый. Но главное, что я изменил, был размер градиента. И, как видите, эффект довольно удивительный.
Окей, давай попробуем что-нибудь еще.
Образец 6
Код CSS
background-image: linear-gradient(45deg,#000000 50%,transparent 51% ),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50% 10%, 25% 25%;
Довольно круто, а?
Еще??
Образец 7
Код CSS
background-image: linear-gradient(45deg, #000000 25%, transparent 26%,transparent 75%, #000000 76%),
radial-gradient(50% 50%, circle , green 40%,#ffffff 41% );
background-size: 50px 50px, 25px 25px;
Как насчет еще одного ??
Образец 8
Код CSS 3
A point to be noted in the above example is that although I have specified 3 gradients, I have specified the size of only 2 gradients. Since the third size parameter is not specified, the first parameter of 50px 50px is applied to the third gradient.
Well, I can go on and on and on and endlessly keep creating patterns. Its just a question of playing with the parameter values (or rather playing with your grey matter until they burn and char and turn into dark matter).
Сейчас я остановлюсь здесь, так как считаю, что вы поняли мою точку зрения, и это — CSS 3-градиенты являются мощными. Итак, давайте двигаться вперед и обратимся к более важному вопросу.
4) Перекрестный браузер CSS 3 градиента.
Как и для большинства свойств CSS 3, поддержка браузера недоступна, если вы не добавите специфичные для браузера префиксы в свой код CSS. Если вы еще не знаете префиксы, это префиксы, которые вам, возможно, придется использовать, чтобы заставить функцию градиента работать в разных браузерах.
Firefox : -moz-
Webkit : -webkit-
Опера : -o-
IE : -ms-
Для поддержки в любых других браузерах, вы можете проверить их документацию, чтобы определить, какой префикс они используют.
5) Где найти ресурсы, которые умно генерируют кросс-браузерные CSS 3-градиенты для вас?
Well, this is one of the most important questions to be addressed. That’s because, although CSS 3 can be used to make patterns and many other things, you are most likely to find yourself using simple gradients to style your buttons or other elements to create subtle effects much more than anything else. And you’re definitely gonna want to make it cross browser, as much as possible, and have a decent fallback color if your site is not going to opened in modern browser with gradient support.
That said, there are a few tools out there than can help you by generating CSS 3 gradients for all the browsers, i.e. with the same effects using all the prefixes for major browsers.
Below are a few links to gradient tools that I prefer to use when trying to make simple gradients. If you are aware of better sites, let me know about them in the comments. Ill take a look, and maybe add it to the main post as well.
- Ultimate CSS Gradient Generator : I personally use this gradient generator the most because of the browser support in the generated css.
- CSS3 Gradient Generatorby: Damian Galarza : I stumbled across this one recently.
- Westciv gradient generator tool : This one is good if you are interested in playing with radial gradients. It exposes all the other options that are available with radial gradients and can get a bit tricky at times.
В заключение, CSS 3 — это отличная функция, которая открывает новые возможности для разработчиков и веб-дизайнеров без необходимости обращаться к инструменту графического дизайна каждый раз, когда они передумают о том или ином цвете. Со временем браузеры, соответствующие стандартам, будут иметь больше поддержки для новых свойств CSS 3. И CSS 3-градиенты определенно станут важной частью инструментария каждого веб-дизайнера в ближайшее время.
Удачного программирования ?
От http://mycodefixes.blogspot.com/2011/08/dissecting-css3-gradients-part-2.html