|
Работа с градиентами при помощи CSS3
|
|
| Kosten | Вторник, 19 Июня 2018, 23:44 | Сообщение 1 |
| В этой статье узнаем, как можно работать с градиентами и выводить их в стилистике CSS, делая красивую палитру цвета в оригинальном виде. Стили CSS3 позволяет нам удалять наших фото редакторов в пользу его чистой доброты. Теперь есть возможность придать нашим элементам самые тонкие градиенты и дать нашим страницам дополнительную искру, которая требовала помощи таких программ, как Photoshop, что как поняли, теперь не требуется его привлечение.
Так как на это лучшее CSS градиенты могут использоваться браузерами без каких-либо головных болей, и выводить все корректно. Сегодня мы увидим, как каждый браузер реализует свойство градиента и создает довольно стильный прямоугольник.
Когда вы комбинируете линейный градиент с другими, то вы можете создавать всевозможные уникальные проекты. На данный момент создайте простой линейный градиент, используя следующую процедуру, чтобы понять, как они работают.
Как вы можете видеть, для создания приятного эффекта градиента на нашей странице требуется очень мало строк кода. Обычно это будет использоваться для создания кнопок, значков и вещей такого характера. Для простоты мы использовали элемент div. Настоятельно рекомендуется, чтобы вы возились с градиентами и просматривали сеть, чтобы увидеть примеры того, как они используются. Это очень популярная функция CSS3, и вы обязательно убедитесь, что ее больше используют, поскольку стандарт продолжает расти.
Предварительный просмотр:
HTML довольно стандартный и содержит простой элемент Div внутри тела. Мы дали Div класс, называемый «градиент» который позволит нам настроить маркетинг на Div с помощью CSS.
Посмотрите страницу HTML
Код <body> <div class="kardagimotas"> </div> </body>
Обратите внимание, что подключено только часть тела.
CSS
Наш CSS будет нацелен на «градиент» Div и назначить ему свойство градиента, включив в него всю реализацию свойства градиента главного браузера. Поскольку каждый поставщик имеет свою собственную спецификацию, мы продолжим каждый шаг по одному.
Код .kardagimotas {
background: -webkit-gradient(linear,left top,right bottom,from(#1c36bb),to(#f3e8e8));
background: -moz-linear-gradient(top, #152a96, #f0f0f1);
filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2343e6', endColorstr='#eff0f5');
border: 0px solid;
height: 275px;
width: 273px;
}
Во-первых, в CSS есть объявление webkit-gradient. Обратите внимание, что версия webkit реализована как значение свойства фона. WebKit-градиент декларации необходимо немного информации, чтобы сделать свою работу, а именно, это тип градиента, также начальное положение градиента " левое верхнее", конечное положение" правое нижнее" и два цвета, из которых можно построить градиент.
Вторая базовая декларация, версия Mozilla, очень похожа на версию webkit, однако она запрашивает только начальную точку и 2 цвета.Реализация Microsoft немного запутана, но все же выполняет тот же эффект, где используется класс Direct X для вызова градиента на страницу, и он просто запрашивает переход двух цветов между ними.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Вторник, 19 Июня 2018, 23:54 | Сообщение 2 |
|
| Большинство людей захотят чего-то более интересного, чем цвет фона или рамки для своих сайтов CSS3. Используя линейный градиент, вы можете создавать линии "горизонтальные, вертикальные и угловые", бриллианты и квадраты.
Вы можете сделать два градиента, уложенных друг на друга, а затем перейти к непрозрачности верхнего элемента. Свойство непрозрачности является вездесущим и анимативным , что делает его идеальным для этой работы.
HTML
Код <div class="plsaznutasem"></div>
CSS
Код div {
width: 138px;
height: 138px;
}
.plsaznutasem {
background: linear-gradient(#0b0bec, #e2a5b0);
} | | Страна: (RU) |
| |
| Kosten | Среда, 20 Июня 2018, 00:05 | Сообщение 3 |
|
| В прошедшие дни невозможно было использовать градиенты, не полагаясь на образы, но разработки в CSS означают, что теперь просто и надежно создавать градиенты изнутри наших таблиц стилей.
В их простейшей форме мы определяем градиенты как фоновые изображения. Мы устанавливаем фоновое изображение, где просто используя стенограмму background абсолютно точно, либо a, linear-gradientлибо a radial-gradient, тогда мы передаем начальный и конечный цвета.
HTML
Код <div class="kventiusal"></div>
CSS
Код .kventiusal {
background: linear-gradient(to right, #06064a, #4cccf1);
color: #f9f4f4;
padding: 5rem 2rem;
margin: 3rem;
font-size: 100px;
}
Сделав еще один шаг, вам не нужно останавливаться всего на двух цветах. И вы также можете использовать названия цветов, например:
HTML
Код <div class="smilasegtelan"></div>
CSS
Код .smilasegtelan {
background: linear-gradient(to right, #e49608, #d636ab, #630aa0, #0bcccc);
color: #fbf6f6;
padding: 5rem 2rem;
margin: 2rem;
font-size: 100px;
}
В этом случае каждый из четырех цветов будет занимать равное количество доступного пространства, что даст нам гладкий сбалансированный градиент.
Использование реального мира
Где мы можем использовать градиенты несколькими интересными способами.
1. Наложение
Вот пример наложения, где градиент слегка прозрачен, где он использует rgb aзначения и сидит на фотографии.
Свойство background может принимать несколько значений, что образуют стек, первые из которых верхних и самих последнего вывода в нижней части сваи. Если мы сначала определим градиент, он будет сидеть поверх того, что мы определяем впоследствии. Взгляните на этот фрагмент и посмотрите, сможете ли вы решить, что происходит:
HTML
Код <div class="klpaszuneris"></div>
CSS
Код .klpaszuneris {
background: linear-gradient(to right, rgba(27, 59, 119, 0.5), rgba(32, 152, 108, 0.3)), url(http://zornet.ru/_fr/56/6180871.jpg);
width: 100vw;
height: 100vh;
background-size: cover;
}
Демонстрация
Градиент по тексту
Наличие градиента по тексту - отличный эффект, хотя и не полностью поддерживается в чистом смысле. Вместо этого мы полагаемся на background-clip свойство и его префикс -webkit-background-clipдруга, что является чем-то вроде взлома, но работает очень хорошо.
Начнем с фрагмента текста (h1 в данном случае) и применим градиент к его фону. background-clipСвойство, присваивает значение text, а затем удаляет фон из целого блока для области за исключением текста. Текст color затеняет фон, конечно, поэтому мы делаем его transparent, чтобы позволить градиенту просачиваться сквозь:
HTML
CSS
Код h1 {
background: linear-gradient(to right, #22325a, #1eadf1, #0e1e58);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 5rem;
} | | Страна: (RU) |
| |
