CSS gradient генератор
Времена, когда сделать градиент на сайте можно было только с использованием картинок давно прошли. Теперь достаточно просто создавать градиенты внутри CSS стилей.
Для того, чтобы задать градиент используется свойство background-image или сокращенный вариант background-image . И мы можем создать как линейный так и радиальный градиент, прописав значения либо linear-gradient, либо radial-gradient и указав начальный и конечный цвета. Вот пример синтаксиса:
background: linear-gradient (#58b6b9, #edf1cf);
Поменять направление возможно, указав его вначале, перед первым цветом.
background: linear-gradient (to right, #94525c, #14aad7);
Если заменить этот параметр на to top right вы получите диагональный градиент. Такой же эффект можно создать, указав параметр в градусах, например, 45deg .
Вы можете использовать больше чем 2 цвета, и цвета можно записать в том числе и по названию.
background: linear-gradient (to right, #94525c, #14aad7, cyan);
Каждый из четырех цветов будет занимать равное количество доступного пространства, что даст нам гладкий и сбалансированный градиент.
Если мы хотим, чтобы один цвет занимал больше места, чем другой, можно добавить значение в процентах непосредственно после цвета. Потренируйтесь на градиент css генераторе выше.
background: linear-gradient (to right, #a3795f 50%, #012754);
Радиальный градиент
Используем все, что мы уже узнали ранее, чтобы создать радиальный градиент. На самом деле это довольно просто, достаточно в начале указать значение radial-gradient .
background: radial-gradient (#edf1cf, #43acb4);
Такой радиальный градиент принимает форму родительского блока, поэтому вместо круга мы получили эллипс. Чтобы градиент был в форме круга независимо от пропорций родителя, необходимо указать ключевое слово circle .
background: radial-gradient (circle, #5d1a78, #414b50);
К тому же мы можем указать где будет центр радиального градиента. Давайте сделаем так, чтобы он был в левом верхнем углу:
background: radial-gradient (circle at top left, #e1d767, #d3f6da);
Практическое использование CSS градиента
Давайте попробуем использовать градиент более оригинальным способом.
Градиент поверх картинки
Ниже вы видите пример слоя с градиентом поверх изображения. Здесь мы использовали полупрозрачные rgba цвета.
Свойство background может принимать сразу несколько значений. При этом первое будет верхним слоем, а последнее — нижним.
CSS div { background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url('gradient.jpg'); }
Мы получаем такой эффект:
Градиент в тексте
Градиент в тексте — это классный эффект, хотя и не полностью поддерживаемый в чистом виде. Вместо него мы используем свойство background-clip , это что-то вроде хака, но отлично работающего хака.
Возьмем элемент, в данном случае h1, и применим к нему градиент. Свойству background-clip присвоим значение text, это удалит фон из всего блока, за исключением текста. И, конечно же, следует сделать свойство color прозрачным, иначе мы не увидим градиент.
CSS div { background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6); -webkit-background-clip: text; background-clip: text; color: transparent; }
- Студия Профессиональная разработка сайтов под заказ Подробнее
- Иконки Прекрасный способ визуально выразить главную мысль Подробнее
- Сервисы Полезные инструменты для веб разработчиков Подробнее
- Блог Делимся в опытом и знанием в IT сфере Подробнее
- Поделиться ВконтактеFacebook Контакты support@active-vision.ru
© 2019 — 2023 Active-Vision. Политика конфиденциальности. Вся информация на сайте носит справочный характер и не является публичной офертой, определяемой статьей 437 ГК РФ
Как сделать градиент поверх картинки?
Должна быть картинка, градиент, и текст поверх всего этого. Никак не получается сделать, пробую разные приемы, ничего не срабатывает.
.header < height: 670px; width: 100%; background-image: url(../img/header_bg.png); background: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%); >Отслеживать
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
задан 14 окт 2016 в 13:44
PolonskiyP PolonskiyP
239 2 2 золотых знака 5 5 серебряных знаков 13 13 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
linear-gradient — это изображение, поэтому изображения (фон и градиент) надо прописывать через запятую
.header < height: 670px; width: 100%; background-image: linear-gradient(to right, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85) 100%), url(../img/header_bg.png); >Далее, если я правильно понял про вопрос суть с текстом, то:
Создаете блок и присваиваете ему такой класс, заполняя текстом, пример:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris enim enim, semper sed libero placerat, venenatis eleifend velit. Aliquam imperdiet nunc in libero condimentum viverra. Quisque eu est et mauris pellentesque vulputate. Curabitur posuere sollicitudin urna id malesuada. Vivamus tincidunt tristique diam, id porttitor neque tempor at. Quisque eget enim in tortor scelerisque vehicula vel eget justo. Nunc rutrum iaculis tortor at porttitor. Полупрозрачный градиент фонового изображения
Возможно ли средствами CSS изменить прозрачность фонового изображения ( background-image ) линейно, при помощи градиента. Именно прозрачность, а не наложение цвета сверху, дабы получить «смешивание» наложенных друг на друга изображений с указанием положения начала (100% видимость) и положения окончания (0% видимость) градиента? Либо другие не громоздкие варианты получения схожего результата.
Отслеживать
9,644 4 4 золотых знака 35 35 серебряных знаков 72 72 бронзовых знака
Кастомный градиент поверх картинки
Как сделать такой угловой (белый) выступ на картинку? Я понимаю, что возможно придется прибегнуть к SVG-картинке
Отслеживать
задан 13 сен 2018 в 16:42
Antonio112009 Antonio112009
2,641 1 1 золотой знак 19 19 серебряных знаков 44 44 бронзовых знака
codepen.io/vitaliy_kirenkov/pen/XJVXdP Чуть-чуть допилить под свои нужды
13 сен 2018 в 16:52
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
Вроде бы все пожелания учтены
Родительский блок в нём два потомка , в первом потомке картинка и кнопка внутри которой иконка youtube что бы можно было в дальнейшем повесить клик на открытие плеера, в другом потомке тестовый текст и псевдоэлемент с градиентом под углом .
* < margin: 0; padding: 0; list-style: none; tet-decoration: none; >img < display: block; width: 100%; height: 100%; object-fit: cover; >.elem < width: 1024px; height: 320px; margin: 30px auto; display: flex; >.elem__block1 < position: relative; width: 60%; height: 100%; >.elem__block1 img < position: absolute; top: 0; left: 0; z-index: 1; >.elem__block1 button < position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 70px; height: 50px; border: none; outline: none; background: none; >.elem__block1 button .fa < font-size: 50px; color: red; >.elem__block2 < padding: 30px 20px; width: 40%; position: relative; >.elem__block2 p < font-size: 14px; >.elem__block2 li < padding: 4px 0; >.elem__block2 h2 < font-variant: small-caps; >.elem__block2 li span < padding-left: 10px; font-size: 18px; >.elem__block2 .fa < text-align: left; >.elem__block2:after
Lorem, ipsum. dollar
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste, aliquam.
- Lorem, ipsum dolor.
- Lorem ipsum dolor sit.
- Lorem, ipsum dolor.
- Lorem ipsum dolor sit.
- Lorem, ipsum dolor.
Отслеживать
ответ дан 13 сен 2018 в 23:24
Никита Фаст Никита Фаст
920 5 5 серебряных знаков 15 15 бронзовых знаков
Углы можно сделать и с помощю css . Создаем :after . И даем ему подходящий бордер.
.cont < width: 100%; overflow: hidden; height: 100%; >.cont < width: auto; height: 180px; >.cont>img < width: 100%; height: auto; >.cont:after
Отслеживать
ответ дан 13 сен 2018 в 17:17
Raz Galstyan Raz Galstyan
8,193 1 1 золотой знак 19 19 серебряных знаков 50 50 бронзовых знаков
UPD CSS multiple backgrounds (developer.mozilla.org):
@charset "UTF-8"; html < margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif; font-size: 16px; line-height: 1.15; >*, *:before, *:after < margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: baseline; >html, body < width: 100%; min-height: 100vh; margin: 0; background-color: #fff; color: #2e2e2e >div < display:block; width: 100%; height: 100vh; background-color: #fff; background: -webkit-linear-gradient(340deg, transparent 0, transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); background: -o-linear-gradient(340deg, transparent 0, transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); background: linear-gradient(110deg, transparent 0, transparent 85%, #fff 85%, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); background-repeat: repeat-x, no-repeat; background-size: 100% 100%, cover; >(На скорую) Вариант с текстом:
@charset "UTF-8"; html < margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif; font-size: 16px; line-height: 1.15; font-weight: 400; font-style: normal; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100% >*, *:before, *:after < margin: 0; padding: 0; -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; font-stretch: normal; vertical-align: baseline; >html, body < width: 100%; min-height: 100vh; background-color: #fff; color: #2e2e2e; >body < margin: 0; position: relative; font-size: 1.25rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures; font-feature-settings: "liga", "clig" >.rap < position: relative; width: 100%; max-width: 1024px; margin: 0 auto; padding: 0; height: 100vh; >.box < display: block; width: 100%; height: 375px; >.img < position: absolute; left: 0; top: 0; width: 600px; background-color: #fff; background: -webkit-linear-gradient(340deg, transparent 0, transparent 562px, #fff 563px, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); background: -o-linear-gradient(340deg, transparent 0, transparent 562px, #fff 563px, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); background: linear-gradient(110deg, transparent 0, transparent 562px, #fff 563px, #fff), url('https://3dnews.ru/assets/external/illustrations/2015/01/16/908187/sm.bb10.600.jpg'); background-repeat: repeat-x, no-repeat; background-size: 100% 375px, cover; >.txt < position: absolute; left: 600px; top: 0; display: block; width: 424px; >.txt div
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Отслеживать
ответ дан 13 сен 2018 в 19:09
36 5 5 бронзовых знаков
В Firefox у обоих вариантов граница мыльная
13 сен 2018 в 19:23
НАШЕЛ РЕШЕНИЕ. Делается через 3 div-a! Может и не верное / На костылях написано.
Создаем 3 дива в ряд, средний не прописываем width , а просто увеличиваем padding и в тот же момент пишем отрицательный margin и дальше переворачиваем блок с помощью transform: skew(-20deg); . Блок, который должен быть сзади углового элемента — можно добавить z-index: -1 , чтобы элемент ушел на задний план, а тот элемент, что должен быть сверху — z-index: 1
.how_we_do < display: flex; flex-direction: row; width: 100%; height: 55%; >.how_we_do .how_we_do_left < overflow: hidden; width: 60%; background: url("https://www.jonglaan.nl/.imaging/mte/jonglaan/og-image/dam/nieuws/europese-standaard-voor-tolheffing-in-transportsector.JPG/jcr:content/europese%20standaard%20voor%20tolheffing%20in%20transportsector.JPG") center center no-repeat; background-size: cover; >.how_we_do .rotate < position: relative; padding: 150px; margin: -150px; background-color: white; transform: skew(-20deg); >.how_we_do .how_we_do_right < z-index: 1; width: 30%; padding-top: 2%; margin-right: 10%; >.how_we_do .how_we_do_right h1 < font-size: 40px; font-weight: 600; >.how_we_do .how_we_do_right h2 < font-size: 16px; font-weight: 400; color: #444; margin-bottom: 5%; line-height: 27px; >.how_we_do .how_we_do_right h3 < color: #444; font-size: 24px; font-weight: 600; margin-bottom: 3%; >.how_we_do .how_we_do_right h3 .icon_col
--> Как мы работаем?
Ut enim ad minima veniam, quis nostrum exercitationem ulla corporis suscipit laboriosam, nisi ut aliquid ex ea.
Грузоперевозки по всей России
Быстрые и безопасные грузоперевозки
Самые низкие ставки
Логистика и Доставка
Упаковка и Хранение