2015-10-31 4 views
-1

Я ищу способ воспроизвести этот эффект в HTML/CSS. Я думал, что это будет так же просто, как установить радиальный градиент в качестве фона, а затем нанести прозрачный темный накладной и просто сделать кнопки и такие белые, но прозрачные, но это не даст почти такого же эффекта.Как воспроизвести этот эффект?

Это эффект я пытаюсь повторить:

enter image description here

Тот, кто умный с CSS случиться, чтобы узнать, как добиться этого? Я просмотрел все и не нашел методов, которые не являются безумно запутанными обходными решениями, которые едва работают для одного браузера. Возможность использования нескольких браузеров необязательна, я в основном забочусь о хроме и firefox.

Заранее благодарен!

РЕДАКТИРОВАТЬ: Чтобы сделать вещи даже обманными, да, это радиальный градиент, я разместил вид плохой картинки. Вот лучший пример:

enter image description here

+1

Где эффект в вопросе присутствует? Любые ссылки, которые вы можете предоставить? Кроме того, можете ли вы предоставить более подробную информацию о «эффекте» *, который вы после? Это круглые кнопки, крутой текст, радиус границы, цвета? – justinw

+0

Это эффект, когда кнопки в основном вычитаются из более темного фона, чтобы показать фактический градиент в качестве фона. Я не уверен, как это объяснить, но, может быть, вы можете лучше видеть на кнопках, которые выделены arent, цвет текста на затемненных кнопках имеет градиент, потому что они являются цветом исходного градиента bg. Я не уверен, объяснил ли я это достаточно хорошо, но, надеюсь, сделал – Flipybitz

+0

Любые ссылки? или это локальное приложение? – justinw

ответ

3

текст/изображения, имеющие режим наложения наложения. Независимо от ориентации градиента фона текст и кнопки «приспосабливаются» к нему.

mix-blend-mode: overlay; 

Я воссоздал быструю демонстрацию только с элементом списка. Надеюсь, вы найдете ее полезной.

Demo

http://codepen.io/aarjithn/pen/WQyLNz?editors=010

+0

Это помогло! Я на самом деле нашел точный метод, который я искал, что требовало некоторой настройки, но это то, что я сделал по-другому: все, что мне было нужно, это намек на режим смешивания, затем я прошел через все режимы наложения и нашел тот, который соответствовал тому, ищет, что бывает «color-dodge», и вместо того, чтобы использовать #fff для указания выделенной кнопки, я использовал #aaa, и это тот эффект, который он дал: http://codepen.io/Flipybitz/pen/vNrPZB – Flipybitz

Смежные вопросы