Наложение фонов CSS реализация градиентов, узоров и других интересных эффектов

Содержание материала:

Про CSS

CSS-градиенты: линейные градиенты

CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.

Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .

Linear-gradient

Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:

Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.

Направление можно задавать градусами или ключевыми словами.

В градусах: от 0 до 360, например 270deg .

Ключевыми словами: to top = 0deg ; to right = 90deg ; to bottom = 180deg — значение по умолчанию; to left = 270deg .

Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .

Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:

Вот код самого первого квадрата, для примера:

Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.

Разница хорошо видна на прямоугольных фигурах:

Также можно задавать точки остановки для цветов градиента, значения задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.

Примеры задания значений в % , в em и значения, выходящие за границы элемента:

Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:

Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:

Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.

Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.

При отсутствии ограничений код может быть гораздо короче:

В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )

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

Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:

Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.

Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать здесь.

Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться CSS.coloratum, инструментом от Lea Verou.

Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент

К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .

Градиенты имеют такое же ограничение, что и box-shadow : им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.

Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.

Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.

В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.

Наложение узора на градиент

25.05.2020, 09:10

наложение картинке на градиент
Подскажите пожалуйста как на шапку сайта которая залита градиентом наложить картинку png .

Прикрепление узора к верхней и нижней границам страницы
Добрый вечер, не как не могу понять как можно сделать такое, скрин ниже вверху и внизу есть как бы.

Рисование узора.
Граф, с применением анимации РЕБЯТА ЛАБА ВЫРУЧАЙТЕ.

Вывод узора
Как можно создать с помощью for, if такие узоры: 1. o oo ooo oooo ooooo oooo ooo oo

Размер узора сетки
Добрый день! Как изменить размер узора сетки узорной заливки?

26.05.2020, 01:09 2

А можно те же вопросы, только развёрнуто?

Если нужно несколько фонов, то можно просто перечислить их через запятую. Введите «Множественные фоны css» в поиске, даст ссылку на htmlbook — там можно посмотреть, если что-то непонятно.

Чтобы сделать блик, нужно или его изображение, или можно поиграться с box-shadow.

Вообще советую htmlacademy курсы пройти, там разбирается практически всё, что только можно. Причём понятно и интересно.

CSS: Линейный градиент для фона

Градиент — заполнение выделенной области последовательностью цветовых оттенков с плавными переходами между ними. Градиент используется для отображения плавного перехода между двумя или более указанными цветовыми оттенками. Пример градиента:

Раньше, для создания эффекта градиента использовались фоновые изображения. Теперь для создания градиентного фона можно использовать CSS3. Элементы с установленными с помощью CSS3 градиентами выглядят лучше при увеличении, чем их аналоги — подключаемые фоновые изображения, так как градиент генерируется браузером непосредственно под указанную область.

Обратите внимание, что CSS градиент является фоновым изображением создаваемым браузером, а не фоновым цветом, поэтому он определяется как значение свойства background-image. Это означает, что градиент можно указывать не только в качестве значения свойства background-image, но и везде, где можно вставлять фоновое изображение, например в list-style-image и background.

Топ-пост этого месяца:  Достоинства и недостатки изготовления сайтов в спб

CSS3 определяет два типа градиентов:

  • Линейный градиент (Linear Gradient) — плавный переход от цвета к цвету по прямой линии.
  • Радиальный градиент (Radial Gradient) — плавный переход от цвета к цвету из одной точки во все направления.

Линейный градиент

Линейный градиент распространяется по прямой линии, демонстрируя плавный переход от одного оттенка цвета к другому. Линейный градиент создаётся с помощью функции linear-gradient(). Функция создаёт изображение, которое представляет собой линейный градиент между указанными оттенками цветов. Размер градиента соответствует размеру элемента, к которому он применён.

Функция linear-gradient() принимает следующие, разделяемые запятой, аргументы:

  • В качестве первого аргумента указывается градус угла или ключевые слова, определяющие угол направления линии градиента. Необязательный аргумент.
  • Разделяемый запятыми список состоящий из двух или более цветов, за каждым из которых может следовать стоп позиция.

Простейший линейный градиент требует только два аргумента, определяющие начальный и конечный цвет:

При передаче функции двух аргументов устанавливается вертикальный градиент с начальной точкой сверху.

Направление линии градиента может быть определено двумя способами:

Использование градусов В качестве первого аргумента можно передать градус угла линии градиента, определяющий направление градиента, так например, угол 0deg (deg сокращение от англ degree — градус) определяет линию градиента от нижней границы элемента к верхней, угол 90deg определяет линию градиента слева на право и т.д. Проще говоря, положительные углы представляют собой вращение по часовой стрелке, отрицательные соответственно против часов. Использование ключевых слов В качестве первого аргумента могут также передаваться ключевые слова «to top», «to right», «to bottom» или «to left», они представляют собой углы линий градиентов «0deg» «90deg» «180deg» «270deg» соответственно.

Угол можно так же задать с помощью двух ключевых слов, например, to top right — линия градиента направлена в верхний правый угол.

Пример градиента заданного в разных направлениях:

Как уже упоминалось, линейный градиент может включать список более чем из двух цветов, разделяемых запятой, браузер будет их равномерно распределять по всей доступной области:

После цвета допускается указывать стоп позицию для него, которая определяет место расположение цвета (где один цвет начинает переходить в другой) относительно начальной и конечной точки градиента. Стоп позиция указывается с помощью единиц измерения поддерживаемых в CSS или с помощью процентов. При использовании процентов, расположение стоп позиции вычисляется в зависимости от длины линии градиента. Значение 0% является начальной точкой градиента, 100% — конечной.

Значение цвета можно указывать различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Например, использование градиента с прозрачностью может быть использовано в сочетании с фоновым цветом или изображением, расположенным под градиентом для создания интересных визуальных эффектов:

Градиент поверх фоновой картинки в CSS

На этом уроке мы не просто познакомимся с градиентами, но и узнаем, как их можно применять на практике. Вариантов применения градиентов в веб-дизайне, несчетное количество, но нас не интересует все и сразу. Будем двигаться постепенно и начнем мы с популярного дизайнерского приёма – это наложения градиента поверх большой фоновой картинки, используя CSS стили.

Сейчас вы наверное задумались, а зачем вообще что-то накладывать на картинку и почему в CSS, если есть Photoshop?

На первую половину вопроса я отвечу, демонстрируя два изображения. На первом нет наложения градиента, а на втором – используется градиент. Что смотрится интереснее по дизайну?

Первый вариант

Второй вариант

Ответ очевиден. В первом варианте, из-за более широкой палитры цветов, тяжелее читается текст, да и зрительное восприятие неправильно расставляет акценты. Мы смотрим на верхушки деревьев, но вряд ли это главный посыл дизайнера.

Во втором варианте градиенты используются и в качестве тонирующего слоя, убираются резкие цветовые переходы, задний фон никак не отвлекает от текста.

Демонстрация.

Photoshop или CSS?

Ответ будет разный, смотря, о ком мы говорим? Дизайнер рисует свой макет в Photoshop, вынося градиенты на отдельный слой. Верстальщик, анализируя макет, должен решить – объединять ли слой картинки с градиентом и сохранить их в одном jpg/png/gif файле или градиенты верстать на CSS?

Здесь нет чёткого правила, но одно мы знаем точно, что если по замыслу дизайнера, предполагается делать анимированный фон, то без CSS/JS уже не обойтись. И конечно не надо забывать, что картинка с градиентом будет больше весить, поэтому если градиент простой, то лучше написать его кодом.

Переходим к написанию кода примера и как всегда начинаем с разметки.

HTML разметка

Тег header будет служить контейнером для фоновой картинки, а тег div с классом header_box – контейнером для двух заголовков.

The Forest

where nature and people

CSS код

В теге header опишем все свойства сразу для двух заголовков, поскольку стилизуем мы их одинаково и сознательно помещаем одну фразу в заголовки разных уровней. Здесь мы решаем вопрос переноса строки и вторая часть фразы меньше в размерах, так как находиться в теге h2. Разбивание одной фразы – это хороший дизайнерский приём, опять же делает фразу более значимой.

header <
font-family: sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #fff;
text-transform: uppercase;
letter-spacing: 7px;
>

Кроме стилизации текста, в теге header лежит наш градиент вместе с фоновой картинкой. Свойство cover растягивает картинку на всю ширину и высоту хедера.

Градиент поверх картинки

Для справки: Градиенты бывают линейные и радиальные, линейный тянется по прямой линии, от одного цвета к другому, как правило их используют для заполнения фигур с углами (прямоугольники, квадраты). Радиальный градиент тянется из центра окружности к краям и он хорошо подходит округлым фигурам (круг, овал), на сайтах это обычно кнопки.

Итак, у нас линейный градиент (linear-gradient), тянущийся снизу вверх (to top), от светлого-зеленого оттенка к темно-зеленому (rgba и цифры).

background-image: linear-gradient (to top, rgba (89,106,114, 0.6), rgba (206,220,23, 0.4)), url (fog.jpg);

Последние две цифры – 0.6/0.4 регулируют степень прозрачности градиента, без этих цифр, мы вообще не увидели бы картинки, а один сплошной градиент.

Градиент по высоте заполняет первый экран на 95 процентов, просто так лучше смотрится скошенная линия снизу.

Это не фотошоп, в реальности фотография целиковая, это мы виртуально её подрезали с помощью свойства clip-path. Пара цифр обозначает координаты X и Y, по которым строится кривая, маскирующая все лишнее. Данное свойство не поддерживается IE и Edge.

clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);

Позиционирование текста

Для текста мы создали специальный блок, с позиционировали его относительно окна браузера ровно посередине.

.header_box <
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
>

Примеры градиентов

Оттуда можно скопировать код цвета и вставить в Photoshop или сразу в ваш CSS код.

15 вариантов стилизации фотографий с помощью CSS3

Большинство людей для обработки изображений используют Adobe Photoshop. Помимо всех преимуществ, в этой программе есть еще один весомый плюс, который дает ей возможность опережать конкурентов – режимы наложения слоев, или blending modes.

Такие режимы позволяют создавать интересные эффекты, смешивая несколько слоев. Кто хоть раз пользовался этой функцией в Adobe Photoshop, знает, какие широкие возможности она предоставляет. Но знаете ли вы, что режимы смешивания также доступны и в CSS? Сегодня мы рассмотрим это на примерах.

Топ-пост этого месяца:  Условие if else в TypeScript синтаксис применения логических операторов

Поддержка браузерами

На сегодняшний день около 50% используемых браузеров поддерживают свойство background-blend-mode , включая новые версии Google Chrome, Opera и Mozilla Firefox. Браузер Internet Explorer на данный момент не отображает эти эффекты. Список версий браузеров можно просмотреть на сайте caniuse.com.

Как использовать режим наложения CSS3

С помощью свойства background-blend-mode можно смешать два изображения либо изображение и фон. Термин «основной цвет» означает исходный в изображении цвет, «совмещенный» – цвет, который накладывается, «результирующий» – цвет, полученный в результате наложения. Мы будем смешивать фотографию caracal.jpg и однотонный фон #eac071 . Для этого зададим класс blend и создадим основной «каркас» CSS:

Теперь можно создавать режимы смешивания, добавляя еще один класс и стиль. Ниже приведено 15 примеров.

Color Burn (затемнение основы)

Этот режим затемняет базовые цвета, делая картинку более контрастной. Создаем класс burn и прописываем стиль:

Color (цвет)

Яркость основного цвета + насыщенность и цветовой тон совмещенного цвета = результат режима Color.
Color проявляет себя лучше всего при раскраске монохромных изображений.

Darken (замена темным)

Здесь из двух пикселей выбирается тот, который является более темным. Если основной цвет пикселя более светлый, чем у совмещенного, он заменяется более темным пикселем. Остальные пиксели не изменяются. При применении белого цвета результат не виден.

Difference (разница)

В режиме Difference вычитаются пиксели либо основного, либо совмещенного цвета. Это зависит от того, какой из них будет более ярким. Смешивание с черным цветом результата не дает, а при смешивании с белым основные цвета инвертируются.

Color Dodge (осветление основы)

Фильтр осветляет картинку и делает ее менее контрастной за счет замены основного цвета более ярким.

Exclusion (исключение)

Exclusion схож с режимом Difference, но изображение становится менее контрастным. Смешивание с белым и черным цветами приводит к аналогичным результатам, что и в Difference.

Hard Light (жесткий свет)

При необходимости осветлить или затемнить некоторые участки изображения используйте этот режим. Принцип его работы таков: если совмещенный цвет более темный, чем 50% серого, картинка затемняется. Если же совмещенный цвет светлее 50% серого, то картинка, соответственно, становится более светлой.

Hue (цветовой тон)

Режим Hue сочетает насыщенность и яркость основного цвета с цветовым тоном совмещенного.

Lighten (замена светлым)

В этом режиме картинка становится светлее. Выбираются те цвета, которые являются более светлыми.

Luminosity (яркость)

Luminosity – противоположность режиму Color. Здесь сочетается яркость совмещенного цвета с цветовым тоном и насыщенностью основного.

Multiply (умножение)

Здесь значения основного и совмещенного цветов перемножаются, и результирующий цвет всегда получается более темным.

Overlay (перекрытие)

При смешивании основного и совмещенного цветов яркие цвета осветляются, а темные – затемняются.

Saturation (насыщенность)

Светимость и цветовой тон основного цвета сочетается с насыщенностью совмещенного цвета.

Screen (осветление)

В этом режиме картинка становится более светлой. Смешивая изображение с белым цветом, в результате получится белый цвет. Черный цвет результата не дает.

Soft Light (мягкий свет)

В зависимости от совмещенного цвета, изображение станет либо светлее, либо темнее. Работа режима схожа с Hard Light, только здесь в результате получается более мягкий свет.

Подобрав подходящие для смешивания цвета, можно без использования Adobe Photoshop добиться красивых эффектов, которые оживят ваши изображения. Вы можете скачать архив с файлами, чтобы просмотреть исходники и лучше ознакомиться с материалом. Желаем творческих успехов!

Эффекты с повторяющимся фоном

Повторяющийся фон, тот у которого repeat , repeat-x или repeat-y , часто используется для создания интересных декоративных эффектов.

  • стежки;
  • зазубренные края;
  • градиенты и тени.

Да, сейчас уже градиенты и тени можно делать с помощью CSS. Но иногда, когда тень или градиент достаточно сложные, проще использовать полупрозрачный PNG.

Самое главное при создании таких эффектов — выбрать картинку с нужным периодом. Она может быть очень маленькой и даст существенную экономию веса страницы.

Попрактикуемся. Только, пожалуйста, изменяйте режим повторения после того, как пропишете фоновые изображения. Так будет нагляднее.

10 бесплатных генераторов фона

В веб-дизайне при создании пользовательских интерфейсов трудно обойтись без иконок и текстур. Однако если в дизайне использовались элементы, созданные кем-то другим, то это сделает его неоригинальным. Фон является одним из самых главных элементов в любом интерфейсе, поэтому его уникальности нужно уделить особое внимание. В последнее время появилось много удобных инструментов для создания бесшовных текстур, которые можно использовать для создания фоновых изображений. Многие из этих инструментов просты в использовании и позволяют добиться потрясающих результатов даже новичкам. Порой достаточно одного клика мыши для того, чтобы получить текстуру профессионального качества. С помощью специализированного софта можно создавать фоны в любом стиле и затем использовать их в своих проектах. FreelanceToday предлагает вашему вниманию 10 бесплатных генераторов случайных фонов.

Инструмент Trianglify Generator можно использовать для создания низкополигональных фонов с плавными градиентами, которые намного мягче, чем градиенты, созданные на основе метода Делоне. Инструмент включает в себя множество предустановленных цветовых комбинаций, что существенно упрощает процесс генерации полигональных текстур.

В настройках пользователь может указать размер холста в пикселях, выбрать палитру, размер ячеек и установить уровень дисперсии. Также можно выбрать отклонение энтропии полигонов: если установить нулевое значение, то фон будет состоять из треугольников, расположенных ровными рядами.

С помощью генератора можно выбрать одну из 27 разработанных профессиональными дизайнерами цветовых схем, но если нужно сделать что-то свое, то всегда можно сгенерировать собственную схему. Полученный фон можно сохранить в форматах PNG и SVG.

Инструмент Trianglify Background Generator использует тот же триангуляционный JS-плагин, что и предыдущий генератор. Скрипт, лежащий в основе программы, использует несколько палитр из COLOURlovers и ColorBrewer и позволяет использовать дополнительные настройки, такие, как выбор типа градиента. Также в инструменте есть два новых параметра в меню: Bleed и Cell Padding, однако данный функционал не может регулировать уровень дисперсии, так что пользователю придется выбрать одну их предустановленных палитр.

Бесшовные текстуры можно создавать разными способами, в том числе и с помощью слов. Именно так работает очень необычный инструмент, который называется Geopattern. Пользователь может написать слово в специальном поле и программа сама сгенерирует текстуру. Минимум действий, максимум результата! Можно написать просто одну или две буквы и получить уникальную текстуру, которую можно использовать в качестве фона. Инструмент работает на основе простого скрипта, генерирующего бесшовные геометрические паттерны, состоящие из 16 различных фигур. Geopattern использует неограниченное количество цветов, поэтому выдает совершенно непредсказуемые результаты. Все зависит от количества букв в слове, так что пользователю придется поэкспериментировать, если он хочет подобрать уникальный узор. Результат можно сохранить в формате PNG.

Этот инструмент использует метод триангуляции Делоне. В результате получаются очень эффектные высококонтрастные полигональные фоны. Интерфейс сервиса очень простой, там всего несколько ползунков, с помощью которых можно установить размер холста, изменить яркость, контрастность и размер полигонов. С помощью специальной палитры можно подобрать нужную цветовую схему. В том случае, если не получается создать подходящую текстуру, фон можно сгенерировать, нажав кнопку, Randomize и инструмент создаст случайный паттерн. Нажав кнопку повторно, можно получить совершенно другое изображение. Процесс можно повторять до тех пор, пока не найдется оптимальный узор.

Топ-пост этого месяца:  60сек — обменник криптовалют (биткоинов) и электронных денег (Киви, АдваКеш) на рубли

На первый взгляд Flat Surface Shader ничем не отличается от предыдущего генератора случайных фонов. Однако это не так, сервис использует более рандомный и динамичный подход к триангуляции Делоне. Генерация полигонов происходит несколько хаотично, так как источники света в этом инструменте находятся в постоянном движении. В сущности, пользователь никак не может повлиять на конечный результат, но может подобрать цветовую схему и нужный размер полигонов. Фоновое изображение можно сохранить как в растровом формате PNG, так и в векторном формате SVG.

Полигональные фоны сегодня в тренде, поэтому неудивительно, что подобных генераторов становится все больше. Но не везде такие паттерны выглядят уместно, порой нужно что-то другое. В этом случае можно использовать инструмент Waterpipe.js. Этот генератор позволяет получить изображение с эффектом дыма. Пользователь может скачать один из предустановленных вариантов или создать собственный фон, настроив параметры вручную. Можно выбрать цвет фона, также есть возможность выбора градиента. Так как клубы дыма должны выглядеть, как трехмерные объекты, добиться нужного эффекта можно с помощью стартового и финишного градиентов. Сочетание светлого и темного оттенков создает реалистичный эффект дыма.

Инструмент Colorful CSS Gradient Background Generator наверняка пригодится дизайнерам, создающим сайты и приложения, особенно тем, кто работает с iOS. Это веб-сервис позволяет создавать красивые градиентные фоны буквально на лету. Главное достоинство инструмента заключается в том, что он автоматически генерирует код CSS для создаваемых градиентов. Есть и небольшой минус, так как на выходе получается только код, а не картинка, так что фоновое изображение можно использовать только для интернет-проектов. Если же градиентный фон нужно получить в растровом формате, придется использовать стороннее программное обеспечение. Для этой цели неплохо подходит Phantom.JS, инструмент требует определенных навыков кодирования, но достаточно гибок и прост для того, чтобы справиться с поставленной задачей.

С помощью инструмента Unique Gradient Generator можно создавать фоны из любого растрового изображения. Размер изображения практически не имеет значения, генератору достаточно даже картинки размером 7х3 пикселя. Инструмент размывает исходник до полной неузнаваемости, подобно эффекту Gaussian Blur в Adobe Photoshop. Чтобы добиться нужного результата, пользователю придется потратить какое-то время на подбор исходного изображения, иначе цветовая схема будет выглядеть несколько грязноватой, если в исходнике будет много темных оттенков.

Генератор имеет библиотеку из 33-х готовых к использованию изображений, но можно загрузить и собственные файлы. Готовый фон можно скачать в растровом формате или как код CSS.

Инструмент Material Design Background Generator, это сервис, который находится на пике популярности, ведь с помощью данного инструмента можно без особых усилий генерировать фоновые изображения в стиле Material Design, созданном дизайнерами и веб-разработчиками компании Google. Так как это рандомный генератор, некоторые результаты могут выглядеть довольно странно. Так что пользователю придется потратить какое-то время, чтобы получить подходящее изображение. Такова плата за случайность, но зато в результате можно создать действительно уникальный фон для своего проекта.

Инструмент K’s Watercolor Background Image Generator создает бесшовные текстуры с эффектом акварели. Генератор создает изображение с помощью полупрозрачных кругов, которые, сливаясь, имитируют акварельные пятна. На настоящую акварель не очень похоже, но фоны получаются достаточно интересными. Чтобы создать текстуру, пользователю нужно указать количество кругов и их размер, а также выбрать цветовую схему. Чтобы создать более сложную текстуру, можно использовать несколько слоев, которые повлияют на конечный результат.

Полупрозрачный градиент поверх картинки

Представьте: 1. на весь фон — картинка; 2. на весь фон — градиент

А можно ли это смешать? Допустим, что бы была фоновая картинка, а поверх нее слабый полупрозрачный градиент, скажем сверху (255,255,255.0,6), а с низу (255,255,255.0,4). Так можно сделать? Сам пробовал и писать этот градиент, и гуглить.. вообщем самоделкин из меня никакой. Может кто посоветовать решение? (Ну если такое возможно)

2 ответа 2

Вот такой вариант есть: пример Точно работает в IE 10+ и последних версиях Firefox/Opera/Chrome

Делается такое с помощью обычного градиента:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Наложение фонов CSS: реализация градиентов, узоров и других интересных эффектов

Сборник HTML, CSS, JavaScript/jQuery компонентов

Коллекция потрясающих эффектов для изображений | HTML, CSS и JavaScript (jQuery)

Эффекты для изображений — здесь мы собрали и продолжаем регулярно обновлять коллекцию бесплатных готовых решений для изображений, созданных при помощи HTML и CSS (CSS3 & HTML5), а также в некоторых эффектах немного присутствует JavaScript (jQuery). Hover-эффекты (эффекты при наведение), 3D, zoom (увеличение), magnify, overlay, transition… Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Эффект градиента с использованием CSS

Хотите создавать причудливые заголовки без использования программы Photoshop? Вот простой трюк CSS, который поможет Вам создавать эффекты градиента с помощью изображения PNG. (только код CSS без использования Javascript или Flash).

Все что для этого нужно, это пустой тег в заголовке и применение наложения фона изображения с помощью CSS свойства position:absolute. Этот прием был опробован на большинстве веб браузерах: Firefox, Safari, Opera и даже Internet Explorer 6. Продолжайте читать эту статью, чтобы узнать, как работает данный способ.

Преимущества;

  1. Этот способ основан на CSS коде без использования JavaScript или Flash. Он работает в большинстве браузеров, включая IE6 (PNG рубить требуется).
  2. Он идеально подходит для создания заголовков рубрик. Вы не используете программу Photoshop, что экономит Ваше время и трафик.
  3. Вы можете использовать любую гарнитуру шрифта при этом размер шрифта остается масштабируемым.

Как же работает данный способ?

Способ очень простой. Мы просто добавляем 1 пиксельный градиент PNG (с альфа прозрачностью) перед текстом.

HTML

CSS

Для работы в IE6

Так как IE6 не поддерживает прозрачность в PNG-24, то для решения данной проблемы необходимо использовать следующий код (добавьте данный код между тегами ):

CSS

jQuery вариант присоединения (для любителей семантики)

Если Вы не хотите иметь в заголовке пустые теги , то можно использовать Javascript. Вот образец кода с использованием jQuery:

jQuery

Применение текстуры

В качестве фонового изображения могут использоваться любые текстуры. Вот пример использования текстуры «зебра». Все зависит от вашего воображения!

Недостатки;

  1. Этот способ пригоден только для элементов со сплошным цветом. Цвет градиентного изображения должен совпадать с цветом фона вашей страницы.
  2. Для работы в IE6 необходимо применение специального хака.
  3. Если ваше градиентное изображение будет выше текста заголовка, то операция выделения текста будет невозможна.
Добавить комментарий